在THREE.js OBJLoader加载的对象上应用不同的纹理

Question

我有一个方形.obj模型和2个纹理。如何在其上面应用一个纹理，在其余面上应用另一个纹理？

Answer 1

根据您的需求，有很多方法可以根据您的需求以不同的方式询问所有人。看起来您想要将两种材质应用于对象，而不是两种纹理。

_{它看起来是这样的，因为你似乎希望纹理可以互换，所以你无法组合图像并保持分辨率和OBJ＆amp; THREE.Material仅支持一组uv属性，因此您无法使用单个素材和多个纹理。所以它是多种材料......}

多种材料

如果您有两种材料（2 THREE.Material s与2个WebGL程序相关），那么每个面孔都需要知道它所分配的材料。

虽然THREE.js多材料API已经流行了很长一段时间，THREE.Geometry和THREE.BufferGeometry之间存在差异，但幸运的是THREE.OBJLoader supports material groups的盒子。要将其转换为THREE.js，您需要将3D编辑器中的多个材质应用于对象，然后导出OBJ以获取所有内容。手动完成操作有点困难，需要调用addGroup，如上面的文档/链接所示。

在THREE.js中，您只需将所有材质作为数组传递给对象demonstrated in this answer。我也是updated your fiddle to do the same thing。相关代码如下所示

var loadingManager = new THREE.LoadingManager();
var ObjLoader = new THREE.OBJLoader(loadingManager);
var textureLoader =  new THREE.TextureLoader(loadingManager);
//Material 1 with first texture
var material = new THREE.MeshLambertMaterial({map: textureLoader.load('https://dl.dropboxusercontent.com/s/nvnacip8fhlrvm4/BoxUV.png?dl=0')});
//Material 2 with second texture
var material2 = new THREE.MeshLambertMaterial({map:
textureLoader.load('https://i.imgur.com/311w7oZ.png')});
ObjLoader.load(
    'https://dl.dropboxusercontent.com/s/hiazgei0rxeirr4/cabinet30.obj?dl=0',
    function ( object ) {
        var geo = object.children[0].geometry;
        var mats = [material, material2];
        //These are just some random groups to demonstrate multi material, you need to set these up so they actually work for your object, either in code or in your 3D editor
        geo.addGroup(0,geo.getAttribute("position").count/2,0);
        geo.addGroup(geo.getAttribute("position").count/2,
        geo.getAttribute("position").count/2,1);
        //Mesh with multiple materials for material parameter
        obj = new THREE.Mesh(geo, mats);
        obj.position.y = 3;
    });