基于React类组件的Three.js代码拆分方案咨询

很理解你想把代码拆分得更清晰的需求，这就给你一套简单可行的方案，完美适配你的React+Three.js项目：

新建一个专门存放场景对象创建逻辑的文件，比如src/utils/scene-objects.js，把你的网格创建逻辑迁移进去：

// src/utils/scene-objects.js
import * as THREE from 'three';

// 封装创建自定义立方体的函数，接收场景实例，返回创建好的网格对象
export const createCustomCube = (scene) => {
  const geometry = new THREE.BoxGeometry(2, 2, 2);
  const material = new THREE.MeshPhongMaterial({
    color: 0x156289, 
    emissive: 0x072534, 
    side: THREE.DoubleSide, 
    flatShading: true
  });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
  return cube; // 返回立方体对象，方便组件中挂载到this上
};

回到你的React组件文件，导入刚才的工具函数，简化原有的addCustomSceneObjects逻辑：

import { createCustomCube } from './utils/scene-objects'; // 根据你的文件路径调整导入路径

// ... 组件其他代码保持不变

componentDidMount() { 
  this.sceneSetup(); 
  this.addCustomSceneObjects(); 
  this.startAnimationLoop(); 
  window.addEventListener("resize", this.handleWindowResize); 
}

// 现在这个函数只负责调用工具函数，把场景实例传进去即可
addCustomSceneObjects = () => { 
  this.cube = createCustomCube(this.scene); // 将返回的立方体挂载到this上，方便后续动画或交互使用
}

如果后续需要添加更多场景对象，可以继续在scene-objects.js中扩展函数，比如：

// 在scene-objects.js中新增创建灯光的函数
export const createSceneLight = (scene) => {
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
  directionalLight.position.set(0, 5, 5);
  scene.add(directionalLight);
  return directionalLight;
};

然后在组件中直接调用：

addCustomSceneObjects = () => { 
  this.cube = createCustomCube(this.scene);
  this.light = createSceneLight(this.scene); // 新增灯光
}

这样你的组件代码会始终保持简洁，所有场景对象的创建逻辑都集中在工具文件里，便于维护和复用。

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