如何使用TypeScript与Three.js为导入的3D模型添加纹理

该SDK的3D渲染层基于Three.js构建，SDK官方的类型定义、演示示例全部采用TypeScript编写，和你了解的技术栈方向一致。

SDK内置的FBX、OBJ、DAE加载组件，本质是对Three.js对应格式加载器的上层封装，模型加载完成后会将解析得到的Three.js Mesh对象挂载到组件输出上，添加纹理的核心流程分为三步：

• 监听模型加载完成的回调事件，等待模型资源全部解析完成
• 提前完成目标纹理的异步加载，确保纹理资源可被Three.js正常访问
• 遍历模型下所有网格对象，给对应材质赋值纹理资源

适配现有代码的实现参考 #

在你当前导入FBX椅子模型的代码基础上，调整后的完整逻辑如下：

const modelNode = await sdk.Scene.createNode();
const fbxComponent = modelNode.addComponent(sdk.Scene.Component.FBX_LOADER, {
    url: '对应FBX椅子模型的可访问路径',
});
// 配置模型缩放
fbxComponent.inputs.localScale = {
    x: 0.01,
    y: 0.01,
    z: 0.01
};
// 监听FBX模型加载完成事件
fbxComponent.outputs.onLoadComplete.watch((loadedModel) => {
    // 遍历模型内所有网格节点
    loadedModel.traverse((node) => {
        // 筛选带渲染材质的网格对象
        if (node.isMesh) {
            // 将已加载好的纹理赋值给材质漫反射通道
            node.material.map = 已加载完成的纹理资源对象;
            // 标记材质更新，确保纹理修改生效
            node.material.needsUpdate = true;
        }
    })
});
// 设置模型空间位置
modelNode.obj3D.position.set(-5, 0, -5);
// 启动模型节点
modelNode.start();

新手实现注意事项 #

• 纹理资源存放的服务需要配置CORS跨域规则，否则Three.js会因安全限制无法正常解析纹理内容
• 如果源格式的3D模型已经内置了纹理关联关系，SDK会在加载流程中自动解析并绑定对应纹理，无需手动重复赋值
• 加载OBJ、DAE格式模型时，仅需将组件类型替换为对应的OBJ_LOADER、COLLADA_LOADER即可，后续修改纹理的遍历逻辑完全通用
• 禁止在组件刚创建时就操作模型材质，此时模型资源尚未加载完成，无法获取到有效的Mesh对象

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