Как рассчитать положение объектов в Three.js - PullRequest
Новая
       10

Как рассчитать положение объектов в Three.js

0 голосов
/ 28 февраля 2019

Я новичок в программировании 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), как рассчитать и разместить их рядом и / или сложить их?

1 Ответ

0 голосов
/ 28 февраля 2019

Сделайте 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
...