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

Question

我想创建一个几何图形网格 (ROWS * COLUMNS) 并想围绕它自己的中心旋转每个单独的网格。

我通过两个 for 循环生成网格，将单个元素转换为正确的 position 并将它们推入数组以在 animation function 中再次使用它们。在 animation function 中，我再次遍历所有元素并旋转每个元素。

问题是即使我单独处理每个元素并且我已经将每个元素翻译到正确的位置，每个元素仍然围绕页面的中心而不是它自己的中心旋转（见截图）

这是我目前的尝试：

 const main = () => { const ROWS = 4; const COLUMNS = 4; const ITEMS = []; const canvas = document.querySelector('#canvas'); const renderer = new THREE.WebGLRenderer({canvas, antialias: true}); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(1, window.innerWidth/window.innerHeight, 0.1, 1000); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor('#e5e5e5'); camera.position.z = 500; // GEOMETRY for (let x = 0; x < COLUMNS; x++) { for (let y = 0; y < ROWS; y++) { const geometry = new THREE.BoxGeometry(1, 1, 0.5); const edges = new THREE.EdgesGeometry(geometry); const edgesMaterial = new THREE.LineBasicMaterial({ color: 0x1940EB }); const edgesMesh = new THREE.LineSegments(edges, edgesMaterial); ITEMS.push(edgesMesh); edges.translate(x*1.5, y*1.5, 0); scene.add(edgesMesh); } } scene.position.set(-COLUMNS/2, -ROWS/2, 0); const animation = () => { requestAnimationFrame(animation); ITEMS.map(item => { item.rotation.x += 0.01; item.rotation.y += 0.01; }) camera.updateMatrixWorld(); renderer.render(scene, camera); } const onWindowResize = () => { const w = window.innerWidth; const h = window.innerHeight; camera.aspect = w / h; camera.updateProjectionMatrix(); renderer.setSize(w, h); } animation(); onWindowResize(); window.addEventListener('resize', onWindowResize, false); }; window.addEventListener('load', main, false);

 body { padding: 0; margin: 0; height: 100vh; } canvas { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.js"></script> <canvas id="canvas"></canvas>

有人可以向我解释为什么 animation function 中单独提到的元素仍然不围绕自己旋转吗？

谢谢你的帮助

Answer 1

因为代码正在移动几何体本身，所以它的中心不再位于盒子的中间。

改变

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

到

      edgesMesh.position.set(x*1.5, y*1.5, 0);

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

 const main = () => { const ROWS = 4; const COLUMNS = 4; const ITEMS = []; const canvas = document.querySelector('#canvas'); const renderer = new THREE.WebGLRenderer({canvas, antialias: true}); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(1, window.innerWidth/window.innerHeight, 0.1, 1000); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor('#e5e5e5'); camera.position.z = 500; // GEOMETRY for (let x = 0; x < COLUMNS; x++) { for (let y = 0; y < ROWS; y++) { const geometry = new THREE.BoxGeometry(1, 1, 0.5); const edges = new THREE.EdgesGeometry(geometry); const edgesMaterial = new THREE.LineBasicMaterial({ color: 0x1940EB }); const edgesMesh = new THREE.LineSegments(edges, edgesMaterial); ITEMS.push(edgesMesh); edgesMesh.position.set(x*1.5, y*1.5, 0); scene.add(edgesMesh); } } scene.position.set(-COLUMNS/2, -ROWS/2, 0); const animation = () => { requestAnimationFrame(animation); ITEMS.map(item => { item.rotation.x += 0.01; item.rotation.y += 0.01; }) camera.updateMatrixWorld(); renderer.render(scene, camera); } const onWindowResize = () => { const w = window.innerWidth; const h = window.innerHeight; camera.aspect = w / h; camera.updateProjectionMatrix(); renderer.setSize(w, h); } animation(); onWindowResize(); window.addEventListener('resize', onWindowResize, false); }; window.addEventListener('load', main, false);

 body { padding: 0; margin: 0; height: 100vh; } canvas { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.js"></script> <canvas id="canvas"></canvas>

您可能会发现这篇文章很有用