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

Question

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

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

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

Answer 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文件中。