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

Question

我是 3D 技术的新手，通过参考一些站点我设法获得了一些代码运行渲染 3D 对象。该对象由 3D 软件 Maya 生成。我收到了这些文件—— .obj（目标文件） .mtl（material 文件） .png（纹理文件）。

使用‘three.js’我尝试在浏览器中渲染对象，为此我使用了下面给出的三种方法—— 1. OBJLoader 并显式加载纹理文件。 2.OBJMTLLoader 3. JSON 通过将 .obj 文件转换为 .js 来加载程序。在所有情况下，3D 对象都已成功渲染，但我遇到的常见问题是它根本没有加载其“纹理”。对象文件、Material 文件和纹理文件都在同一位置。据观察，物体上应用了阴影，所以我可以看到一些部分是彩色的，但“纹理”部分（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 加载器需要 material 文件，使用这种方法观察到它加载对象和 material 文件但不加载纹理，这里是 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

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

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

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

Answer 1

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

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

Three.js with texture not loading using .png file

three.js