如何让THREE.JS的InstancedMesh正常工作、正确渲染模型？

核心问题原因 #

代码无控制台报错但看不到实例化模型，是几个基础配置缺失导致的：

• 未给实例设置变换矩阵：InstancedMesh创建后所有实例默认无独立位置、旋转、缩放配置，全部重叠在坐标原点，若相机视锥体未覆盖该区域就完全看不到内容
• PBR材质配置错误：使用MeshStandardMaterial时设置了opacity:0.8但未开启transparent: true，透明度规则不生效；且这类基于物理的材质必须有光照才能正常显色，无光源时模型会纯黑和背景融为一体
• 几何体获取逻辑有隐患：遍历GLTF场景时如果模型包含多个网格，现有写法会把几何体变量覆盖为最后一个遍历到的网格，大概率取不到目标球体的几何体
• 可选排查项：GLTF模型本身初始缩放极小/极大、坐标偏移过远，也会导致模型不在相机可见范围内

修正后可运行代码 #

// 先补全场景光照，PBR材质无光照会显示为纯黑
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);

// 修正材质配置，开启透明属性
const equatorMaterial = new THREE.MeshStandardMaterial({
    color: 0x242526,
    metalness: 1,
    opacity: 0.8,
    roughness: 0.8,
    transparent: true
})

let ballGeometry;
const dummy = new THREE.Object3D(); // 用于计算每个实例的变换矩阵
const loader = new GLTFLoader()

loader.load('./ball.gltf', function (gltf) {
    // 遍历获取第一个有效网格的几何体，避免多mesh覆盖问题
    gltf.scene.traverse(function (model) {
        if (model.isMesh && !ballGeometry) {
            ballGeometry = model.geometry;
            // 调用center()把几何体居中到自身坐标原点，避免模型本身偏移
            ballGeometry.center();
        }
    });

    if (!ballGeometry) {
        console.error('未从GLTF中解析到有效网格几何体');
        return;
    }

    const instanceCount = 20;
    const instancedMesh = new THREE.InstancedMesh(ballGeometry, equatorMaterial, instanceCount);
    
    // 为每个实例设置独立的位置、旋转、缩放，生成变换矩阵
    for (let i = 0; i < instanceCount; i++) {
        // 示例：沿X轴均匀排列20个球体，每个间隔2单位
        dummy.position.set(i * 2 - instanceCount, 0, 0);
        dummy.rotation.set(0, 0, 0);
        dummy.scale.setScalar(1);
        dummy.updateMatrix();
        instancedMesh.setMatrixAt(i, dummy.matrix);
    }

    // 标记实例矩阵需要上传到GPU渲染
    instancedMesh.instanceMatrix.needsUpdate = true;
    scene.add(instancedMesh);
}, undefined, function (error) {
    console.error(error);
});

额外排查点 #

• 确认相机初始位置可覆盖原点附近区域，比如将相机位置设为(0, 0, 30)并看向原点
• 确认渲染循环正常运行，每帧调用renderer.render(scene, camera)
• 若模型大小不符合预期，调整dummy.scale.setScalar()的缩放值适配场景尺度即可

内容的提问来源于stack exchange，提问作者Gift G.