THREE.js：设置球体的绝对旋转，而不是累积旋转？

Question

我希望能够将 Three.js 球体的旋转设置为绝对值，但是每当我设置 rotateY 时，我应用的值都会从上次旋转中添加或减去，而不是变成新的绝对旋转设置。

在有关立方体的相关答案中（Three.js 设置绝对本地旋转） ，立方体有一个 rotation 属性，并且 cube.rotation.x = someValue 会产生我正在寻找的那种绝对旋转。

但是我正在使用的 SphereGeometry 对象（以世界地图作为纹理）没有旋转属性。

我想我可以跟踪以前的轮换，并仅应用差异，但我认为这最终会受到累积舍入误差的影响。

还有其他方法可以做到这一点吗？某种重置方法？

  async orient(lon: number, lat: number): Promise<void> {
    if (Globe.mapFailed)
      throw new Error('Map not available');
    else if (!Globe.mapImage)
      await new Promise<void>((resolve, reject) => Globe.waitList.push({ resolve, reject }));

    if (!this.initialized) {
      this.camera = new PerspectiveCamera(FIELD_OF_VIEW, 1);
      this.scene = new Scene();
      this.globe = new SphereGeometry(GLOBE_RADIUS, 50, 50);

      const mesh = new Mesh(
        this.globe,
        new MeshBasicMaterial({
          map: new CanvasTexture(Globe.mapCanvas)
        })
      );

      this.renderer = new WebGLRenderer({ alpha: true });
      this.renderer.setSize(GLOBE_PIXEL_SIZE, GLOBE_PIXEL_SIZE);
      this.rendererHost.appendChild(this.renderer.domElement);
      this.scene.add(mesh);
      this.camera.position.z = VIEW_DISTANCE;
      this.camera.rotation.order = 'YXZ';
      this.initialized = true;
    }

    this.globe.rotateY(PI / 20); // Just a sample value I experimented with
    this.camera.rotation.z = (lat >= 0 ? PI : 0);
    requestAnimationFrame(() => this.renderer.render(this.scene, this.camera));
  }

更新：

我现在的解决方法是：

    this.globe.rotateX(-this.lat);
    this.globe.rotateY(this.lon);
    this.lon = to_radian(lon);
    this.lat = to_radian(lat);
    this.globe.rotateY(-this.lon);
    this.globe.rotateX(this.lat);

我保存之前已完成的轮换，以便可以撤消它们，然后应用新的轮换。 （度/弧度转换以及需要反转的经度旋转的符号使该过程有点模糊。）

Answer 1

我认为您感到困惑 geometry.rotateY( rot) 与 mesh.rotation.y = rot。正如文档中所解释的：

.rotateY()：绕 Y 轴旋转几何体。这通常作为一次性操作完成，而不是在循环期间完成。使用 Object3D.rotation 进行典型的实时网格旋转。

geometry.rotateY(rot) 只能使用一次，因为它会更新所有顶点位置的值，因此它必须迭代每个顶点并更新它。如果您需要修改几何体的“原始状态”，例如需要开始朝下 z 轴的角色模型，这非常有用。

mesh.rotation.y = rot; 可能是您正在寻找的。这是您在实时旋转期间使用的，因此内部顶点位置保持不变，您只需将网格作为一个整体进行旋转。例如，当你的角色在地图上跑来跑去时。

this.mesh = new Mesh(geometry, material);

// Set rotation to an absolute rotation value
this.mesh.rotation.y = Math.PI / 20;

// Increment rotation a relative amount (like once per frame):
this.mesh.rotation.y += Math.PI / 20;