Can I resize the width / height / length of a 3D cube created using the Three.js command at run time?
How I got Fiddle in SO, which changes the color of the cube at runtime: http://jsfiddle.net/mpXrv/1/
Similarly, you can change the dimension
Here is my code:
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
var angularSpeed = 0.2;
var lastTime = 0;
function animate() {
var time = (new Date()).getTime();
var timeDiff = time - lastTime;
var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
cube.rotation.y += angleChange;
lastTime = time;
renderer.render(scene, camera);
requestAnimationFrame(function () {
animate();
});
}
var container = document.getElementById("container");
var renderer = new THREE.WebGLRenderer();
renderer.setSize(container.offsetWidth, container.offsetHeight);
container.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 700;
var scene = new THREE.Scene();
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);
var ambientLight = new THREE.AmbientLight(0x888888);
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight(0x666666);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
animate();
Here is the fiddle for the same! http://jsfiddle.net/EtSf3/1/
Let me know if you need any other information.
Please offer.
source
share