在运行时更改使用Three.js创建的3D立方体的宽度/高度/长度 [英] Change width/height/length of 3D Cube created with Three.js at runtime

问题描述

我们可以在运行时更改使用Three.js创建的3D立方体的尺寸宽度/高度/长度吗？

Can we change the dimension "width/height/length" of 3D Cube created with Three.js at runtime?

就像我在SO中有一个小提琴改变了运行时多维数据集的颜色： http://jsfiddle.net/mpXrv/1/

Like I got a Fiddle in SO which changes Color of Cube at run time : 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/

Here is the Fiddle for the same! http://jsfiddle.net/EtSf3/1/

如果您需要任何其他信息，请告诉我。

Let me know if you need any other information.

请建议。

推荐答案

解决方案1（更好）

您必须使用scale mesh属性来增加（或减少）对象的尺寸。

You must use the scale mesh property to increase (or decrease) the dimensions of your object.

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

首先，您需要设置多维数据集变量到全局范围。

First, You need to set your cube variable to the global scope.

我已将立方体的尺寸替换为1,1,1。

I've replaced the dimensions of your cube to 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

另一个解决方案是删除您的对象并使用给定值创建一个新网格。

An other solution will be to delete your object and create a new mesh with the given values.

这篇关于在运行时更改使用Three.js创建的3D立方体的宽度/高度/长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！