Three.js，计算两个BufferGeometry位置状态之间的转换矩阵

Question

我正在研究一个AR项目，其中对象检测AI返回检测到的对象的顶点。

在场景中，我将检测到的对象作为父网格，并从AI输出中更新了List和BufferGeometry，当顶点改变时我需要计算其变换矩阵并应用这些变换给孩子们。

如何计算从一个“检测（位置顶点）”到另一个“检测（位置顶点）”的变换矩阵（平移，缩放，旋转）。

这是我的问题的简化图示，其中蓝色平面是检测到的对象，红色平面是其子对象，我需要计算蓝色平面从其先前位置到将其应用于红色物体的变换，以便它们可以一起移动：

https://jsfiddle.net/uv76tj89/1/

谢谢。

Answer 1

如果您知道子几何将是父几何的一半，只需应用child.scale.set(0.5, 0.5, 0.5);，然后在更新时使用与父几何完全相同的顶点位置即可：

parentGeometry.getAttribute('position').array = parentPositions[posIndex];
parentGeometry.getAttribute('position').needsUpdate = true;
childGeometry.getAttribute('position').array = parentPositions[posIndex];
childGeometry.getAttribute('position').needsUpdate = true;

Three.js引擎会将z轴的1/2比例和+5应用于子顶点，因此您不必担心手动进行这些调整。请参见下面的演示。

（注意，我是在Float32Array内创建parentPositions[]作为优化的，因此您不必每次更新时都创建新的数组和新的BufferAttribute。仅4个顶点就可以显着提高性能，但是当您有1000个顶点时，它确实有帮助。

var scene = new THREE.Scene();
var camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 1000 );
var renderer = new THREE.WebGLRenderer({antialias : true});
renderer.setClearColor(0x444444);
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera.position.z = 100;
new THREE.OrbitControls( camera, renderer.domElement );

/* Helpers */
// Grid helper
var width = 100;
var height = 100;
var gridHelper = new THREE.GridHelper(width * 2, 10, 0x999999, 0x000000);
gridHelper.position.y = -height / 2;
scene.add(gridHelper)
// Axes helper
scene.add(new THREE.AxesHelper(50));

/* parent Mesh */
var parentGeometry = new THREE.PlaneBufferGeometry(width, height);
var parentMaterial = new THREE.MeshBasicMaterial( { color:  0x209ad6} );
var parent = new THREE.Mesh( parentGeometry, parentMaterial );
scene.add(parent);


/* Child mesh */
var childGeometry = new THREE.PlaneBufferGeometry(width, height);
var childMaterial = new THREE.MeshBasicMaterial( {color:  0xFF0000} );
var child = new THREE.Mesh( childGeometry, childMaterial );
parent.add(child);

// Apply desired transformations to the child Mesh
child.position.z = 5;
child.scale.set(0.5, 0.5, 0.5);

/* Parent positions */
// Make all position arrays Float32Array
// so we don't have to create a new one each frame.
var parentPositions = [
	//Reference point
  new Float32Array([
    -50, 50, 0,
    50, 50, 0,
    -50, -50, 0,
    50, -50, 0
  ]),
  //Variations
	new Float32Array([
     -50, 50, 50,
      50, 50, 50,
      -50, -50, -50,
      50, -50, -50
	]),
  new Float32Array([
     -75, 75, -25,
      75, 75, -25,
      -75, -75, 25,
      75, -75, 25
	]),
  new Float32Array([
     0, 75, -25,
      75, 0, -25,
      -75, 0, 25,
      0, -75, 25,  
	]),
  //... random positions
];

var lastTime = 0;
var posIndex = 0;

function render(currentTime) {
  requestAnimationFrame( render );
  
  // Update position attributes
  // Instead of making a new attribute on each update
   if (currentTime >= lastTime + 1000)  {
     parentGeometry.getAttribute('position').array = parentPositions[posIndex];
     parentGeometry.getAttribute('position').needsUpdate = true;
     childGeometry.getAttribute('position').array = parentPositions[posIndex];
     childGeometry.getAttribute('position').needsUpdate = true;

     lastTime = currentTime;
     posIndex = posIndex === 3 ? 0 : posIndex + 1;
  }

  
  

  renderer.render( scene, camera );
}
render()

html, body {margin: 0; padding: 0;overflow: hidden;}

<script src="https://cdn.jsdelivr.net/npm/three@0.117.1/build/three.min.js"></script>
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r110/examples/js/controls/OrbitControls.js"></script>

我不确定您为什么将孩子最初定为PlaneGeometry，但我必须更改它以使其与父项PlaneBufferGeometry相匹配。

编辑：

我想我现在才刚刚开始了解您的问题所在，并且您需要计算垂直于您的平面的向量。您可以从四个顶点中选择任意三个来执行此操作：

您可以使用this answer来找出三角形所指向的点，然后可以使用child.lookAt(x, y, z);来使child指向那个方向

您可以阅读this article，以获得有关如何使其垂直的更深入的解释。