使用Three.js在運行時創建3D立方體的寬度/高度/長度

Question

我們可以在運行時更改使用Three.js創建的3D立方體的尺寸「寬度/高度/長度」嗎？

就像我在SO小提琴其在運行時改變立方體的顏色：http://jsfiddle.net/mpXrv/1/

同樣可以改變我們的維度？

這裏是我的代碼：

HTML

<script src="http://www.html5canvastutorials.com/libraries/three.min.js"></script> 
<div id="container"></div> 
<div class="inputRow clear" id="dimensionsNotRound" data-role="tooltip"> 
    <label class="grid-8">Dimensions (mm):</label> 
    <br/> 
    <br/> 
    <div> <span>Length</span> 

     <input class="numeric-textbox" type="text" value=""> 
     <br/> 
     <br/> 
    </div> 
    <div> <span>Width</span> 

     <input class="numeric-textbox" type="text" value=""> 
     <br/> 
     <br/> 
    </div> 
    <div> <span>Height</span> 

     <input class="numeric-textbox" type="text" value=""> 
     <br/> 
     <br/> 
    </div> 
    <button id="btn">Click me to change the Dimensions</button> 

JS

//Script for 3D Box 


// revolutions per second 
var angularSpeed = 0.2; 
var lastTime = 0; 

// this function is executed on each animation frame 
function animate() { 
    // update 
    var time = (new Date()).getTime(); 
    var timeDiff = time - lastTime; 
    var angleChange = angularSpeed * timeDiff * 2 * Math.PI/1000; 
    cube.rotation.y += angleChange; 
    lastTime = time; 

    // render 
    renderer.render(scene, camera); 

    // request new frame 
    requestAnimationFrame(function() { 
     animate(); 
    }); 
} 

// renderer 
var container = document.getElementById("container"); 
var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(container.offsetWidth, container.offsetHeight); 
container.appendChild(renderer.domElement); 


// camera 
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000); 
camera.position.z = 700; 

// scene 
var scene = new THREE.Scene(); 

// cube 
var cube = new THREE.Mesh(new THREE.CubeGeometry(400, 100, 200), new THREE.MeshLambertMaterial({ 
    color: '#cccccc' 
})); 
cube.overdraw = true; 
cube.rotation.x = Math.PI * 0.1; 
cube.rotation.y = Math.PI * 0.3; 
scene.add(cube); 

// add subtle ambient lighting 
var ambientLight = new THREE.AmbientLight(0x888888); 
scene.add(ambientLight); 

// directional lighting 
var directionalLight = new THREE.DirectionalLight(0x666666); 
directionalLight.position.set(1, 1, 1).normalize(); 
scene.add(directionalLight); 

// start animation 
animate(); 

下面是相同的小提琴！ http://jsfiddle.net/EtSf3/1/

讓我知道你是否需要任何其他信息。

請建議。

Answer 1

方案1（更好）

必須使用比例尺的網格屬性來增加（或減少）的尺寸你的對象。

http://jsfiddle.net/EtSf3/4/

首先，您需要將cube變量設置爲全局範圍。

我已經更換了你的立方體的尺寸爲1，1，1

cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1), new THREE.MeshLambertMaterial({ 
    color: '#cccccc' 
})); 

即使在BTN附加的

var $ = function(id) { return document.getElementById(id); }; 

$('btn').onclick = function() { 
    var width = parseInt($('inp-width').value), 
     height = parseInt($('inp-height').value), 
     length = parseInt($('inp-length').value); 

    cube.scale.x = width; 
    cube.scale.y = height; 
    cube.scale.z = length; 
}; 

解決方案2

的其他解決方案將刪除您的對象並創建一個具有給定值的新網格。

Answer 2

你想要的是Mesh.scale（在你例子中的cube.scale）。

http://jsfiddle.net/EtSf3/3/

這是我添加的代碼

document.getElementById('btn').addEventListener('click', function(e) { 
    var inputs = document.getElementsByClassName('numeric-textbox'); 
    cube.scale.x = parseFloat(inputs[0].value) || cube.scale.x; 
    cube.scale.z = parseFloat(inputs[1].value) || cube.scale.z; 
    cube.scale.y = parseFloat(inputs[2].value) || cube.scale.y; 
});