在 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>

您可能會發現這篇文章很有用