如何将图像和纹理添加到 Three.js JSON 对象文件

Posted 2023-02-19

【中文标题】如何将图像和纹理添加到 Three.js JSON 对象文件

【英文标题】：How to add images & textures to Three.js JSON object file

【发布时间】：2018-03-25 20:04:42

【问题描述】：

我的主要目标是使用出色的 Three.js 库将在 3DS/MAX 中创建的 3D 模型加载到 WebGL。我已经朝着这个目标完成了以下步骤。

尝试将 MAX 插件导出器直接用于 Three.js JSON。这是有问题的，而且没有用。 已将 MAX 模型导出为 OBJ 格式。 使用 Three.js 转换器 Obj2Three.js 将 OBJ 模型转换为 JSON 格式。 这很好用，我现在可以将我的模型加载到 Three.js 中，但它没有应用任何纹理/图像。 检查了 JSON 文件，其中包含几何、材料、元数据和对象部分。 Three.ObjectLoader 显然也可以处理图像和纹理，如果这些部分在文件中定义的话。

所以我的问题是这是如何完成的？是否有任何实用程序可以帮助将纹理添加到 JSON 文件？

【参考方案1】：

您根本不需要转换。查看 three.js 的示例文件夹，您应该会看到一大堆加载器。如果您想要被广泛使用的东西，请使用 OBJLoader，否则我建议查看 FBXLoader 或 ColladaLoader2，因为这些文件的大小比 .obj 或 JSON 小得多。这是使用 FBXLoader 并添加纹理的演示，但您可以在每个加载器中使用相同的概念：

loadFBX = function(modelPath, texturePath) 

  var container = new THREE.Object3D();

  fbxLoader.load(modelPath, function( object ) 

        container.add(object);

   object.traverse (function (child) 

        if (child instanceof THREE.Mesh) 
           //here's how we add the texture, you may need to
           //UV Unwrap your model first in 3Ds
           child.material = new THREE.MeshLambertMaterial();
           child.material.map = textureLoader.load(texturePath);
        

     );

    , onProgress, onError );

    return container;


var model = loadFBX('../models/model.fbx', '../textures/texture.png');
scene.add(model);

当您可以直接加载 .obj 甚至 .fbx 格式时，为什么要转换？但是如果你真的想要，有一个非常简单的方法可以将纹理添加到你的 JSON 模型中。 使用在线 Three.js 编辑器并将您的 .obj 或任何模型拖到场景中。从那里您可以使用可视化编辑器添加图像纹理，然后将对象导出为 .json。然后，您可以简单地将其加载到场景中，纹理将包含在 JSON 文件中。

【讨论】：

谢谢。我尝试使用 FBXLoader 并没有成功。我想知道我是否在 3DS//MAX 中使用了正确的导出设置。你知道FBX格式应该是二进制还是ASCII？它应该导出到什么 FBX 文件版本？导出的默认值为二进制和 FBX 版本 2014/2015。

标准 fbx 应该是二进制的，确保在加载器之前包含inflate.min.js。