如何合并THREE.JS中Sun API与GLTF模型加载代码？

核心问题根源 #

你遇到的场景分离、报错问题，本质是同时引入了两个独立的Three.js实例（修改版全局Three.js + three.module.js模块版），导致全局对象和模块导出冲突，场景、相机等资源无法共享。下面是具体的解决步骤：

1. 统一Three.js依赖 #

直接使用Sunlight API依赖的修改版Three.js，彻底移除three.module.js的引入：

• 如果你的GLTF加载代码原本用ES模块写法（比如import { GLTFLoader } from ...），改成用全局THREE对象调用加载器。
• 若修改版Three.js未内置GLTFLoader，手动引入非模块版本的GLTFLoader脚本（放在修改版Three.js之后）。

2. 复用Sunlight API的核心实例 #

绝对不要为GLTF单独创建新的Scene、Camera或WebGLRenderer，直接复用Sunlight初始化好的实例：

// 第一步：初始化Sunlight API的场景、相机、渲染器（按API文档步骤）
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 开启阴影（Sunlight依赖阴影贴图，必须开启）
renderer.shadowMap.enabled = true;

// 初始化SunLight并添加到场景
const sunLight = new THREE.SunLight();
sunLight.castShadow = true; // 开启光源阴影投射
scene.add(sunLight);

// 第二步：加载GLTF模型并添加到同一个场景
const loader = new THREE.GLTFLoader();
loader.load('你的模型路径.gltf', function(gltf) {
    const model = gltf.scene;
    // 调整模型位置、缩放，确保在相机可视范围内
    model.position.set(0, 0, 0);
    model.scale.set(1, 1, 1);
    
    // 遍历模型开启阴影接收/投射
    model.traverse(child => {
        if(child.isMesh) {
            child.castShadow = true;
            child.receiveShadow = true;
        }
    });
    
    // 关键：把模型添加到Sunlight的同一个场景
    scene.add(model);
}, undefined, error => {
    console.error('GLTF加载失败:', error);
});

// 第三步：复用Sunlight的动画循环
function animate() {
    requestAnimationFrame(animate);
    sunLight.update(); // Sunlight的时间更新逻辑
    renderer.render(scene, camera);
}
animate();

3. 阴影贴图适配调整 #

如果阴影不显示，检查以下配置：

• 调整SunLight的阴影相机参数，确保覆盖模型范围：

  sunLight.shadow.camera.near = 0.1;
  sunLight.shadow.camera.far = 50;
  sunLight.shadow.camera.fov = 45;
  

• 避免模型面朝向问题：确保模型的法线方向正确，不会出现"背面消隐"导致阴影异常。

4. 常见报错排查 #

• THREE is not defined：确认修改版Three.js脚本在所有业务代码之前引入。
• 模型不显示：检查模型位置是否在相机视锥体内，可通过camera.lookAt(model.position)强制相机对准模型。
• 重复场景：检查代码中是否存在多个document.body.appendChild(renderer.domElement)，只保留一次渲染器DOM挂载。

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