简体   繁体   English

在three.js中更改obj模型材料

[英]Change obj model material in three.js

I have a 3D model with UV mapping created in blender. 我有一个在Blender中创建的带有UV贴图的3D模型。 I applied the UV mapping in a way that the texture is only applied on one side of the model. 我以仅将纹理应用于模型一侧的方式应用了UV贴图。 I exported the model as obj and mtl . 我将模型导出为objmtl When I import this model on three.js it works as intended and the loader automatically applies the image defined in the mtl file as the texture. 当我在three.js上导入此模型时,它会按预期工作,并且加载程序会自动将mtl文件中定义的图像用作纹理。

Now I want to change this texture programatically in three.js . 现在,我想在three.js以编程方式更改此纹理。 The model has multiple materials (I think it's because of multiple faces). 该模型具有多种材质(我认为是因为存在多个面孔)。 How do I reapply the material maintaining the UV mapping and just changing the texture applied? 如何重新应用保持UV贴图并仅更改所应用纹理的材质? I want to apply a map and a envMap to the model. 我想将mapenvMap应用于模型。

                       var m = new THREE.MeshPhongMaterial({
                            envMap: cubemap,
                            reflectivity: 0.9
                        });
                        var m2 = new THREE.MeshPhongMaterial({
                            envMap: cubemap,
                            color: parseInt(material.color, 16),
                            reflectivity: 0.9,
                            map: THREE.ImageUtils.loadTexture('/textures/uv_checker large.png')
                        });

                        loadedMesh.material = [m,m,m,m,m,m2,m2,m2,m];

With the m and m2 positions applied after some trial and error. 经过反复试验后,应用mm2位置。 The texture is applied but it doesn't end up looking the same way as the original. 应用了纹理,但最终看起来与原始外观不同。 II have some small empty spaces and even texture on places I shouldn't have texture due to my UV mapping. II由于我的UV贴图,我有些地方不应该有纹理,所以我的空白空间很小,甚至没有纹理。

How can I approach this? 我该如何处理?

Ok I found a way. 好吧,我找到了办法。 I don't know if this will work with all the models but I replaced all the materials that had a map texture with my custom material with another texture and replaced all the other materials with another different material. 我不知道这是否适用于所有模型,但我将具有map纹理的所有材质替换为我自定义材质的另一种材质,并将所有其他材质替换为另一种材质。 It worked perfectly and the UV Map was still there. 它运行完美,并且UV Map仍然存在。

var m1 = new THREE.MeshPhongMaterial({map: texture, ...});
var m2 = new THREE.MeshPhongMaterial({...});
for(var n = 0; n < model.material.length; ++n) {
   if(model.material[n].map) model.material[n] = m1;
   else model.material[n] = m2;
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM