将一个立方体动态堆叠在另一个立方体上 [英] Stack a cube over another dynamically

问题描述

我正在three.js 中开发一个项目，用户可以在其中动态更改其中对象的尺寸.对象是两个不同尺寸的盒子，一个盒子应该总是位于另一个盒子的顶部.例如，如果 cube 的高度是 10，chimney.position.y 应该是 10.我尝试了不同的可能性，但它不起作用.

I am working on a project in three.js, where the user can change dynamically the dimension of the objects inside it. The objects are two boxes with different dimensions and one box, should be always located on top of the other one. For instance, if the height of cube is 10, chimney.position.y should be 10. I tried different possibilities, but it is not working.

这是我的代码片段:

var cubeHeight = 0.1;
var boxGeometry = new THREE.BoxGeometry(0.1, cubeHeight, 0.1);
var boxMaterial = new THREE.MeshLambertMaterial({color: 0x000088});
cube = new THREE.Mesh(boxGeometry, boxMaterial);
cube.position.set(0, cubeHeight/2, 0);
scene.add(cube);

var chimneyGeometry = new THREE.BoxGeometry(5, 0.1, 5);
var chimneyMaterial = new THREE.MeshLambertMaterial({color: 0x000088});  
chimney = new THREE.Mesh(chimneyGeometry, chimneyMaterial);
chimney.position.set(0,cubeHeight,-12.5);
scene.add(chimney);

// Now the GUI panel for the interaction is defined
gui = new dat.GUI();
parameters = { 
    length: 1, height: 1, width: 1,
    tall: 1 
}

// Define the second folder which takes care of the scaling of the cube
var folder1 = gui.addFolder("House dimensions (cm)");
var cubeX = folder1.add(parameters,"length").min(1).max(2000).step(1).listen();
var cubeY = folder1.add(parameters, "height").min(1).max(2000).step(1).listen();
var cubeZ = folder1.add(parameters, "width").min(1).max(2000).step(1).listen();
var chimneyHeight = folder1.add(parameters, "tall").min(1).max(700).step(1).listen(); 
folder1.open();

 // Function taking care of the cube changes
 // cubeY has a different value to keep the solid fixed to the floor
 cubeX.onChange(function(value){cube.scale.x = value; roof.scale.x = value;});
 cubeY.onChange(function(value){cube.scale.y = value; cube.position.y = (cubeHeight * value) / 2;});
 cubeZ.onChange(function(value){cube.scale.z = value;});
 chimneyHeight.onChange(function(value){chimney.scale.y = value; chimney.position.y = ((cubeHeight * value) / 2) + cubeY;});

你知道如何解决这个问题吗?提前感谢您的回答！

Do you have an idea of how to solve this issue? Thanks in advance for your answers!

推荐答案

这是一个解决方案:

    cubeY.onChange(function(value){
        cube.scale.y = value;
        cube.position.y = (cubeHeight * value) / 2;
        chimney.position.y = (chimneyHeight * chimney.scale.y) / 2 + cube.position.y * 2
    });

    chimneyY.onChange(function(value){
        chimney.scale.y = value;
        chimney.position.y = (chimneyHeight * value) / 2 + cube.position.y * 2;
    });

这里是小提琴:http://jsfiddle.net/z1yd342b/

three.js r71

three.js r71

这篇关于将一个立方体动态堆叠在另一个立方体上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！