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

Question

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

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

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

这是我目前的尝试：

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>

谁能解释一下为什么动画函数中单独处理的元素仍然不围绕它们自己旋转？

感谢您的帮助

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>

您可能会发现this article 很有用