Javascript 在THREE.js中围绕各自的中心旋转每个网格项

我想创建一个由几何体（行*列）组成的网格，并希望围绕其自身的中心旋转每个单独的网格

我通过两个for循环生成网格，将单个元素转换到正确的位置，并将它们推到一个数组中，以便在动画函数中再次使用它们。在动画函数中，我再次迭代所有元素并旋转每个元素

问题是，即使我单独处理每个元素并将每个元素翻译到正确的位置，每个元素仍然围绕页面中心旋转，而不是围绕其自身中心旋转（请参见屏幕截图）

以下是我目前的尝试：

const main=（）=>{
常数行=4；
常数列=4；
常量项=[]；
const canvas=document.querySelector（“#canvas”）；
const renderer=new THREE.WebGLRenderer（{canvas，antialas:true}）；
const scene=new THREE.scene（）；
const-camera=新的三个透视摄像头（1，window.innerWidth/window.innerHeight，0.11000）；
renderer.setSize（window.innerWidth、window.innerHeight）；
渲染器.setClearColor（'#e5'）；
摄像机位置z=500；
//几何学
for（设x=0；x{
请求动画帧（动画）；
ITEMS.map（item=>{
项目.旋转.x+=0.01；
项目旋转y+=0.01；
})
camera.updateMatrix世界（）；
渲染器。渲染（场景、摄影机）；
}
const onWindowResize=（）=>{
const w=窗的宽度；
常数h=窗内高度；
摄像头。纵横比=w/h；
camera.updateProjectMatrix（）；
渲染器。设置大小（w，h）；
}
动画（）；
onWindowResize（）；
addEventListener（'resize'，onWindowResize，false）；
};
window.addEventListener（'load'，main，false）
正文{
填充：0；
保证金：0；
高度：100vh；
}
帆布{
显示：块；
}

<代码> > p>因为代码正在移动几何本身，所以它的中心不再在框的中间。

改变

      edges.translate(x*1.5, y*1.5, 0);

到

这将移动场景图中的
Object3D
，而不是几何体数据的顶点


const main=（）=>{
常数行=4；
常数列=4；
常量项=[]；
const canvas=document.querySelector（“#canvas”）；
const renderer=new THREE.WebGLRenderer（{canvas，antialas:true}）；
const scene=new THREE.scene（）；
const-camera=新的三个透视摄像头（1，window.innerWidth/window.innerHeight，0.11000）；
renderer.setSize（window.innerWidth、window.innerHeight）；
渲染器.setClearColor（'#e5'）；
摄像机位置z=500；
//几何学
for（设x=0；x{
请求动画帧（动画）；
ITEMS.map（item=>{
项目.旋转.x+=0.01；
项目旋转y+=0.01；
})
camera.updateMatrix世界（）；
渲染器。渲染（场景、摄影机）；
}
const onWindowResize=（）=>{
const w=窗的宽度；
常数h=窗内高度；
摄像头。纵横比=w/h；
camera.updateProjectMatrix（）；
渲染器。设置大小（w，h）；
}
动画（）；
onWindowResize（）；
addEventListener（'resize'，onWindowResize，false）；
};
window.addEventListener（'load'，main，false）
正文{
填充：0；
保证金：0；
高度：100vh；
}
帆布{
显示：块；
}

<代码> > p>因为代码正在移动几何本身，所以它的中心不再在框的中间。

改变

      edges.translate(x*1.5, y*1.5, 0);

到

这将移动场景图中的
Object3D
，而不是几何体数据的顶点


const main=（）=>{
常数行=4；
常数列=4；
常量项=[]；
const canvas=document.querySelector（“#canvas”）；
const renderer=new THREE.WebGLRenderer（{canvas，antialas:true}）；
const scene=new THREE.scene（）；
const-camera=新的三个透视摄像头（1，window.innerWidth/window.innerHeight，0.11000）；
renderer.setSize（window.innerWidth、window.innerHeight）；
渲染器.setClearColor（'#e5'）；
摄像机位置z=500；
//几何学
for（设x=0；x{
请求动画帧（动画）；
ITEMS.map（item=>{
项目.旋转.x+=0.01；
项目旋转y+=0.01；
})
camera.updateMatrix世界（）；
渲染器。渲染（场景、摄影机）；
}
const onWindowResize=（）=>{
const w=窗的宽度；
常数h=窗内高度；
摄像头。纵横比=w/h；
camera.updateProjectMatrix（）；
渲染器。设置大小（w，h）；
}
动画（）；
onWindowResize（）；
窗户。