Как вращать виртуальную сферу?

Question

Евгений @MadnessTony

Web Developer

Как вращать виртуальную сферу?

С помощью сферы фибоначчи создаю в цикле точки, координаты которых в дальнейшем использую для TextGeometry.
Добавляю несколько объектов с текстом на виртуальную сферу, также добавляю эти ноды в группу, которую потом хочу вращать, сами текстовые узлы направляю лицом к камере, но если я пытаюсь вращать и одновременно направлять узлы к камере - ничего не работает, как можно реализовать подобную логику правильно?

function fibonacciSphere(numPoints, point) {
  const rnd = 1;
  const offset = 2 / numPoints;
  const increment = Math.PI * (3 - Math.sqrt(5));

  const y = point * offset - 1 + offset / 2;
  const r = Math.sqrt(1 - Math.pow(y, 2));

  const phi = ((point + rnd) % numPoints) * increment;

  const x = Math.cos(phi) * r;
  const z = Math.sin(phi) * r;

  return new THREE.Vector3(x, y, z);
}

const loader = new FontLoader();

const group = new THREE.Group();

function main() {
  const fov = 75;
  const aspect = 2; // the canvas default
  const near = 0.1;
  const far = 100;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 2;

  const scene = new THREE.Scene();

  function addTextNode(text, vert) {
    loader.load("./fonts/Fira.json", function (font) {
      const geometry = new TextGeometry(text, {
        font: font,
        size: 0.16,
        height: 0.01,
      });
      const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
      const mesh = new THREE.Mesh(geometry, material);
      mesh.position.x = vert.x;
      mesh.position.y = vert.y;
      mesh.position.z = vert.z;

      group.add(mesh);
      scene.add(group);
    });
  }

  const renderer = new THREE.WebGLRenderer();
  const container = document.querySelector("#root");
  container.appendChild(renderer.domElement);

  const numPoints = 50;
  for (let i = 0; i < numPoints; ++i) {
    addTextNode(`p${i}`, fibonacciSphere(numPoints, i));
  }

  function render(time) {

    // group.rotation.x += 0.01;
     scene.traverse((child) => {
      child.children.map((el) => {
        el.quaternion.copy(camera.quaternion);
      });
    })
    renderer.setSize(container.clientWidth, container.clientHeight);
    const canvas = renderer.domElement;
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    camera.updateProjectionMatrix();

    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);
}

main();

Получается вращать сферу и все отображается корректно, если в рендер функции я указываю:

group.rotation.x += 0.001;
    scene.traverse((child) => {
      let position = new THREE.Vector3();
      let direction = new THREE.Vector3();
      child.children.map((el) => {
        el.getWorldPosition(position);
        el.position.copy(position);
        
        child.getWorldDirection(direction);
        child.rotation.copy(direction);
      });
    });

Но в этом случае выводится много предупреждений THREE.Quaternion: .setFromEuler() encountered an unknown order: undefined