※modoやBlenderは比率の拡大縮小なら比率を保ったままの処理が可能です。もしかして他の3Dソフトも同じなのかも？ まっ、比率で計算してもいいんですけどね。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>3Dの比率を保ったサイズ変更</title>
<style>
body {
font-family: "Segoe UI", sans-serif;
background: gray;
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
margin: 0;
}
.container {
background: #ffffff;
padding: 40px;
border-radius: 14px;
box-shadow: 0 8px 25px rgba(0,0,0,0.08);
width: 500px;
}
h2 {
margin-bottom: 30px;
font-weight: 600;
text-align: center;
color: #333;
}
.section {
margin-bottom: 30px;
}
.section-title {
font-size: 14px;
color: #666;
margin-bottom: 12px;
letter-spacing: 1px;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.field {
display: flex;
flex-direction: column;
}
label {
font-size: 13px;
margin-bottom: 6px;
color: #555;
}
input {
padding: 5px;
border-radius: 8px;
border: 1px solid #dcdfe6;
font-size: 14px;
transition: 0.2s;
}
input:focus {
border-color: #4a90e2;
box-shadow: 0 0 0 3px rgba(74,144,226,0.15);
outline: none;
}
.result input {
background: #f0f6ff;
}
button {
width: 102%;
padding: 5px;
border-radius: 8px;
border: none;
background: #4a90e2;
color: white;
font-size: 14px;
cursor: pointer;
transition: 0.2s;
}
button:hover {
background: #3a7bd5;
}
</style>
</head>
<body>
<div class="container">
<h2>3Dの比率を保ったサイズ変更</h2>
<div class="section">
<div class="section-title">元の値</div>
<div class="grid">
<div class="field">
<label>old X</label>
<input type="text" id="x" value="2">
</div>
<div class="field">
<label>old Y</label>
<input type="text" id="y" value="4">
</div>
<div class="field">
<label>old Z</label>
<input type="text" id="z" value="6">
</div>
</div>
</div>
<div class="section result">
<div class="section-title">新しい値（どれか1つ入力）</div>
<div class="grid">
<div class="field">
<label>new X</label>
<input type="text" id="x2">
</div>
<div class="field">
<label>new Y</label>
<input type="text" id="y2">
</div>
<div class="field">
<label>new Z</label>
<input type="text" id="z2">
</div>
</div>
</div>
<button onclick="clearAll()">新しい値のクリア</button>
</div>
<script>
const x = document.getElementById("x");
const y = document.getElementById("y");
const z = document.getElementById("z");
const x2 = document.getElementById("x2");
const y2 = document.getElementById("y2");
const z2 = document.getElementById("z2");
function toNum(val){
return parseFloat(val);
}
function round2(num){
return (Math.round(num * 100) / 100).toFixed(2);
}
function calculate(source){
const xVal = toNum(x.value);
const yVal = toNum(y.value);
const zVal = toNum(z.value);
if (!xVal || !yVal || !zVal) return;
let ratio;
if(source==="x2" && x2.value!==""){
ratio = toNum(x2.value) / xVal;
} else if(source==="y2" && y2.value!==""){
ratio = toNum(y2.value) / yVal;
} else if(source==="z2" && z2.value!==""){
ratio = toNum(z2.value) / zVal;
} else {
return;
}
if(isNaN(ratio)) return;
if(source !== "x2") x2.value = round2(xVal * ratio);
if(source !== "y2") y2.value = round2(yVal * ratio);
if(source !== "z2") z2.value = round2(zVal * ratio);
}
function clearAll(){
x2.value="";
y2.value="";
z2.value="";
}
x2.addEventListener("input",()=>calculate("x2"));
y2.addEventListener("input",()=>calculate("y2"));
z2.addEventListener("input",()=>calculate("z2"));
</script>
</body>
</html>
