我是3D图形编程的新手。我正在使用Three.js设计一个将3D可视化用于3D箱包装的软件。现在,我正在使用下面的代码创建和定位两个元素。
var camera, scene, renderer;
var mesh, mesh2;
init();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 800;
scene = new THREE.Scene();
var texture = new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/crate.gif' );
var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
var geometry2 = new THREE.BoxBufferGeometry( 200, 200, 200 );
var material = new THREE.MeshBasicMaterial( {map:texture} );
mesh = new THREE.Mesh( geometry, material );
mesh2 = new THREE.Mesh( geometry2, material );
mesh2.position.x = 170
mesh2.position.y = -48
mesh2.position.z = 100
mesh.rotation.x = 0.45;
mesh.rotation.y = 1;
mesh2.rotation.x = 0.45;
mesh2.rotation.y = 1;
scene.add( mesh2 );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
现在我使用(170,-48,100)作为坐标来对齐第二个立方体。我通过调整数字并不断检查来获得这些数字。但是应该有一些公式来获取这些x,y,z,因为我将它们旋转到某个角度(x = 0.45,y = 1)。我不确定如何开始计算。
问题陈述是,给定一组多维数据集维度'(l1,w1,h1),(h2,w2,h2)等,而多维数据集位置(x1,y1,z1)(x2,y2,z2)如何计算它们并将其放置在附近和/或堆叠它们?
答案 0 :(得分:0)
将mesh2设为网格的子级:mesh.add( mesh2 )
mesh2
将继承mesh
的旋转,您将定义相对偏移量以在父级坐标空间中移动它。
固定示例:
mesh = new THREE.Mesh( geometry, material );
mesh2 = new THREE.Mesh( geometry2, material );
mesh2.position.x = 170
//mesh2.position.y = -48
//mesh2.position.z = 100
mesh.rotation.x = 0.45;
mesh.rotation.y = 1;
//mesh2.rotation.x = 0.45;
//mesh2.rotation.y = 1;
scene.add( mesh );
mesh.add( mesh2 ); // << ---- solution
已更新:在没有父子层次结构的情况下也是可能的。
let mesh = new THREE.Mesh( geometry, material );
let mesh2 = new THREE.Mesh( geometry2, material );
// mesh2.position.x = 170
// mesh2.position.y = -48
// mesh2.position.z = 100
mesh.rotation.x = 0.45;
mesh.rotation.y = 1;
mesh.updateMatrix(); // <<-- this is essential, to write .position and .rotation values into object transformation matrix.
// mesh2.rotation.x = 0.45;
// mesh2.rotation.y = 1;
scene.add( mesh );
// apply local transforms
mesh2.applyMatrix(new THREE.Matrix4().makeTranslation(210, 0, 0));
// apply transforms of mesh on top
mesh2.applyMatrix(mesh.matrix);
scene.add( mesh2 ); // << ---- add directly to Scene