Изменение ширины/высоты/длины 3D-куба, созданного с помощью команды Three.js во время выполнения

Question

Можно ли изменить размер «ширина/высота/длина» 3D-куба, созданного с помощью Three.js во время выполнения?

Как я получил скрипку в 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(); 

Вот Fiddle за то же самое! 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' 
})); 

Приложить даже на баттоне

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; 
});