时间戳

首页 > 解决方案 > Three.js中如何计算对象的位置

javascript - Three.js中如何计算对象的位置

问题描述

我是 3D 图形编程的新手。我正在使用 Three.js 设计一个使用 3D 可视化进行 3D bin 包装的软件。现在我正在使用下面的代码来创建和定位两个元素。

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）如何计算并将它们放在附近和/或堆叠起来？

标签： javascriptthree.jsgeometry

解决方案

使 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

推荐阅读