Angular中Three.js变量值更新失效问题求助

问题现象 #

在Angular项目中使用Three.js时，点击测试函数changeSpeed修改earthRadius和globalRotationSpeed后：

• 控制台打印显示变量值已更新，但实际视觉效果无变化
• setAnimationLoop动画循环中始终使用变量的初始值
• 相机的translateX方法可以正常生效

问题根源分析 #

从代码中可以定位到三个核心问题：

1. 局部常量捕获初始值，无法同步组件变量更新
   在constructor中定义了局部常量const globalRotationSpeed = this.globalRotationSpeed;，动画循环引用的是这个常量而非组件实例的this.globalRotationSpeed。常量赋值后不可更改，后续组件变量的更新无法同步到动画循环中。

2. 几何体参数初始化后与变量解绑
   earthRadius仅在创建SphereGeometry时作为参数传入，几何体创建完成后，组件的earthRadius变量与模型尺寸不再关联，单纯修改变量不会自动更新已渲染的模型。

3. Three.js对象为局部变量，组件方法无法访问
   earth等Three.js对象是constructor内的局部变量，changeSpeed方法无法直接操作这些对象，导致无法修改模型属性。

修复方案 #

1. 让动画循环引用组件实例的变量 #

通过箭头函数绑定this，或提前保存组件实例引用，确保动画循环能访问到最新的组件变量：

constructor() {
  // ...其他代码
  const texture = new THREE.TextureLoader().load(
    'assets/textures/stars-background.jpg',
    () => { // 箭头函数继承外部this
      renderer.setAnimationLoop(() => {
        earth.rotateY(earthRotationSpeed * this.globalRotationSpeed);
        earthPivotPoint.rotateY(earthOrbitalSpeed * this.globalRotationSpeed);
        renderer.render(scene, camera);
      });
    }
  );
  // ...其他代码
}

2. 将Three.js对象改为组件成员变量 #

在组件类中声明成员变量，让changeSpeed可以直接操作模型对象：

export class ModelComponent implements OnInit {   
  earthRadius: number = 3;
  globalRotationSpeed = 0.000001;
  earth!: THREE.Mesh; // 声明成员变量
  // ...其他成员变量

  constructor() {
    // ...其他代码
    // 创建地球时赋值给成员变量
    this.earth = new THREE.Mesh(earthGeometry, earthMaterial);
    // ...其他代码
  }
}

3. 修改earthRadius后同步更新模型尺寸 #

在changeSpeed方法中，修改变量后直接更新模型的几何体或缩放比例：

changeSpeed() {
  this.earthRadius = 10;
  // 方案1：通过缩放实现，无需重新创建几何体
  const scaleRatio = this.earthRadius / 3; // 3为初始半径
  this.earth.scale.setScalar(scaleRatio);

  // 方案2：重新创建几何体（适合修改分段数等场景）
  // this.earth.geometry.dispose(); // 释放旧几何体内存
  // this.earth.geometry = new THREE.SphereGeometry(this.earthRadius, 30, 30);

  this.globalRotationSpeed = 0.0001; // 同步修改旋转速度
  this.camera.translateX(10);
}

关键修复后代码片段 #

export class ModelComponent implements OnInit {   
  earthRadius: number = 3;
  globalRotationSpeed = 0.000001;
  earth!: THREE.Mesh;
  renderer = new THREE.WebGLRenderer({ antialias: true });
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(
    75, // 补充缺失的cameraFov值
    window.innerWidth / window.innerHeight,
    0.1,
    3000
  );

  constructor() {
    const camera = this.camera;
    camera.position.set(0, 360, 180);
    const orbit = new OrbitControls(camera, this.renderer.domElement);

    const earthTexture = new THREE.TextureLoader().load('assets/textures/earth-texture.jpg');
    const earthGeometry = new THREE.SphereGeometry(this.earthRadius, 30, 30);
    const earthMaterial = new THREE.MeshStandardMaterial({ map: earthTexture });
    this.earth = new THREE.Mesh(earthGeometry, earthMaterial);
    
    const earthPivotPoint = new THREE.Group();
    earthPivotPoint.rotateY(degToRad(AE.EclipticLongitude(AE.Body.Earth, date)));
    this.scene.add(earthPivotPoint);
    earthPivotPoint.add(this.earth);

    const texture = new THREE.TextureLoader().load(
      'assets/textures/stars-background.jpg',
      () => {
        this.renderer.setAnimationLoop(() => {
          this.earth.position.set(earthDistance, 0, 0);
          this.earth.rotateY(earthRotationSpeed * this.globalRotationSpeed);
          earthPivotPoint.rotateY(earthOrbitalSpeed * this.globalRotationSpeed);
          this.renderer.render(this.scene, this.camera);
        });
      }
    );

    this.renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(this.renderer.domElement);
  }

  changeSpeed() {
    console.log(this.earthRadius);
    this.earthRadius = 10;
    this.earth.scale.setScalar(this.earthRadius / 3);
    this.globalRotationSpeed = 0.0001;
    this.camera.translateX(10);
    console.log(this.earthRadius);
  }
}

内容的提问来源于stack exchange，提问作者siwakw7