Matrix js，计算两个缓冲几何位置状态之间的转换矩阵
我正在做一个AR项目，其中一个对象检测AI返回检测到的对象的顶点 在场景中，我将检测到的对象作为父网格，并使用AI输出更新的Matrix js，计算两个缓冲几何位置状态之间的转换矩阵,matrix,three.js,geometry,position,transform,Matrix,Three.js,Geometry,Position,Transform,我正在做一个AR项目，其中一个对象检测AI返回检测到的对象的顶点 在场景中，我将检测到的对象作为父网格，并使用AI输出更新的缓冲几何体和位置属性，我需要在顶点更改时计算其变换矩阵，并将这些变换应用于其子网格 如何计算从一个“检测（位置顶点）”到另一个的变换矩阵（平移、缩放、旋转） 下面是我的问题的简化示例，其中蓝色平面是检测到的对象，红色平面是其子对象，我需要计算蓝色平面从其先前位置到红色平面的变换，将它们应用于红色平面，以便它们可以一起移动： 谢谢。如果您知道子几何体将是父几何体的一半，只需
缓冲几何体位置属性谢谢。如果您知道子几何体将是父几何体的一半，只需应用
child.scale.set（0.5,0.5,0.5），然后指定与更新时父对象完全相同的顶点位置，方法是：
parentGeometry.getAttribute（'position'）。数组=parentPositions[posIndex]；
parentGeometry.getAttribute（'position'）。needsUpdate=true；
childGeometry.getAttribute（'position'）。数组=父位置[posIndex]；
childGeometry.getAttribute（'position'）。needsUpdate=true；
parentPositions[]Float32ArrayBufferAttributevar scene=new THREE.scene（）；
var camera=新的三个正交摄影机（window.innerWidth/-2，window.innerWidth/2，window.innerHeight/2，window.innerHeight/-2，1，1000）；
var renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setClearColor（0x4444）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
摄像机位置z=100；
新的三个.轨道控件（摄影机、渲染器.doElement）；
/*助手*/
//网格辅助程序
var宽度=100；
var高度=100；
var gridHelper=new THREE.gridHelper（宽度*2,10,0x9999999,0x000000）；
gridHelper.position.y=-height/2；
场景.添加（gridHelper）
//轴助手
场景。添加（新的三个。AxeHelper（50））；
/*父网格*/
var parentGeometry=新的三个.PlaneBufferGeometry（宽度、高度）；
var parentMaterial=new THREE.MeshBasicMaterial（{color:0x209ad6}）；
var parent=new THREE.Mesh（parentGeometry，parentMaterial）；
场景。添加（父级）；
/*子网格*/
var childGeometry=新的三个.PlaneBufferGeometry（宽度、高度）；
var childMaterial=new THREE.MeshBasicMaterial（{color:0xFF0000}）；
var child=new THREE.Mesh（childGeometry，childMaterial）；
父。添加（子）；
//将所需的变换应用于子网格
子位置z=5；
儿童量表（0.5,0.5,0.5）；
/*母公司职位*/
//使所有位置数组都浮动到数组中
//所以我们不必每帧创建一个新的。
变量parentPositions=[
//参考点
新浮点数组([
-50, 50, 0,
50, 50, 0,
-50, -50, 0,
50, -50, 0
]),
//变化
新浮点数组([
-50, 50, 50,
50, 50, 50,
-50, -50, -50,
50, -50, -50
]),
新浮点数组([
-75, 75, -25,
75, 75, -25,
-75, -75, 25,
75, -75, 25
]),
新浮点数组([
0, 75, -25,
75, 0, -25,
-75, 0, 25,
0, -75, 25,
]),
//…随机位置
];
var lastTime=0；
var-posIndex=0；
函数渲染（当前时间）{
请求动画帧（渲染）；
//更新职位属性
//而不是在每次更新时创建新属性
如果（当前时间>=lastTime+1000）{
parentGeometry.getAttribute（'position'）。数组=parentPositions[posIndex]；
parentGeometry.getAttribute（'position'）。needsUpdate=true；
childGeometry.getAttribute（'position'）。数组=父位置[posIndex]；
childGeometry.getAttribute（'position'）。needsUpdate=true；
lastTime=当前时间；
posIndex=posIndex==3？0:posIndex+1；
}
渲染器。渲染（场景、摄影机）；
}
render（）html，正文{margin:0；padding:0；overflow:hidden；}
BufferAttribute