Three.js 纹理不使用 .png 文件加载

Question

我是 3D 技术的新手，通过引用少数站点我已经设法让一些代码运行以渲染 3D 对象。该对象由 3D Software Maya 生成。我收到了这些文件—— .obj（目标文件） .mtl（材料文件） .png（纹理文件）。

我尝试使用“three.js”在浏览器中渲染对象，为此我使用了以下三种方法 - 1. OBJLoader 并显式加载纹理文件。 2. OBJMTLLoader 3. JSON loader 通过将 .obj 文件转换为 .js。 在所有情况下，3D 对象都已成功渲染，但我面临的常见问题是它根本没有加载它的“纹理”。对象文件、材质文件和纹理文件都在同一个位置。据观察，在对象上应用了阴影，因此我可以看到一些彩色的部分，但“纹理”部分（png 文件）没有被应用到对象上，所以部分看起来是黑色和黑暗的。没有错误，因为浏览器没有显示任何内容。

使用 JSON 加载器的片段 –

var oLoader = new THREE.JSONLoader();
 oLoader.load('Main_unit_01.js', function (geometry, materials) {

 // get original materials
 var material = new THREE.MeshFaceMaterial(materials);

  //var material = new THREE.MeshPhongMaterial();
  //material.map = new THREE.ImageUtils.loadTexture(
  //         "final_texture_v01.png");
  var mesh = new THREE.Mesh(geometry, material);
  mesh.scale.set(10, 10, 10);
  Test.scene.add(mesh); 

OBJMTL loader 需要材质文件，使用这种方法可以观察到它同时加载了对象和材质文件，但不加载纹理，这是 MTL 文件中存在的一小部分信息 -

newmtl phongE1SG
illum 4
Kd 0.00 0.00 0.00
Ka 0.00 0.00 0.00
Tf 1.00 1.00 1.00
map_Kd final_texture_v01.png
Ni 1.00
Ks 0.50 0.50 0.50

这是 .js 文件中存在的部分信息，是 .obj 到 .js 转换的结果 –

"DbgColor" : 238,
"DbgIndex" : 3,
"DbgName" : "phongE1SG",
"colorAmbient" : [0.0, 0.0, 0.0],
"colorDiffuse" : [0.0, 0.0, 0.0],
"colorSpecular" : [0.5, 0.5, 0.5],
"illumination" : 4,
"mapDiffuse" : "final_texture_v01.png",
"opticalDensity" : 1.0

在上面的材料和js文件中，我们可以看到'.png'文件已经被提到了一些标签。在阅读了一些博客上给出的一些建议后，我尝试将相对路径明确设置到这些文件中，但没有成功。我在这里检查了大部分博客并应用了大部分建议，但没有奏效。我还检查了“github.com”寻求帮助，但无法获得任何帮助。没有一个浏览器给出任何错误，例如找不到特定文件。 这是我关注的几个链接。 1.three.js JSONLoader Material Not Showing 2.Loading textures with JSONloader

我不能发布超过 2 个链接，但我关注了很多网站。

如果有任何解决方案可以在对象上获取纹理，请提出建议。

Answer 1

MTL文件Kd属性对应js属性colorDiffuse。 Ka 属性是colorAmbient。如您所见，它们都是 0。这就是您看不到模型的原因。尝试使环境项（0.2, 0.2, 0.2）和漫反射项（0.8, 0.0, 0.8）。