Question

这是我第一次使用threeJS，正在研究纹理/模型查看器。
所有纹理和模型都位于VPS上。 html随Express一起提供。

这部分起作用：

var renderItem = {       //All links to all textures
  body: "http://188.166.72.201:8000/body.png",
  display: "http://188.166.72.201:8000/display.png",
  info: "http://188.166.72.201:8000/clear.png",
  model: "P250.obj",
  s1: "http://188.166.72.201:8000/VoxEminorHoloKatowice2015.png",
  s2: "http://188.166.72.201:8000/VoxEminorHoloKatowice2015.png",
  s3: "http://188.166.72.201:8000/VoxEminorHoloKatowice2014.png",
  s4: "http://188.166.72.201:8000/VoxEminorHoloKatowice2014.png",
  skin: "http://188.166.72.201:8000/w5u6vq5f.jpg"
}

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
    camera.position.z = 30;

var renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );

var controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.5;
    controls.enableZoom = true;

var fillLight = new THREE.AmbientLight(15658734,1.6)
    fillLight.position.set(100, 0, 100)

var backLight = new THREE.DirectionalLight(15658734,1,10)
    backLight.position.set(100, 0, -100).normalize()

scene.add(fillLight);
scene.add(backLight);

var mtlLoader = new THREE.MTLLoader();
    mtlLoader.setTexturePath('/models/');
    mtlLoader.setPath('/models/');
    mtlLoader.load('item.mtl', function (materials) { 

      scene.background = (new THREE.TextureLoader).load("bg.jpg")

      materials.preload();

      materials.materials.skin.map = (new THREE.TextureLoader).load(renderItem.skin)
      materials.materials.body.map = (new THREE.TextureLoader).load(renderItem.body)
      materials.materials.display.map = (new THREE.TextureLoader).load(renderItem.display)
      materials.materials.s1.map = (new THREE.TextureLoader).load(renderItem.s1)
      materials.materials.s2.map = (new THREE.TextureLoader).load(renderItem.s2)
      materials.materials.s3.map = (new THREE.TextureLoader).load(renderItem.s3)
      materials.materials.s4.map = (new THREE.TextureLoader).load(renderItem.s4)
      materials.materials.info.map = (new THREE.TextureLoader).load(renderItem.info)

      materials.materials.s1.transparent = true;
      materials.materials.s2.transparent = true;
      materials.materials.s3.transparent = true;
      materials.materials.s4.transparent = true;

      var objLoader = new THREE.OBJLoader();
          objLoader.setMaterials(materials);
          objLoader.setPath('/models/');
          objLoader.load(renderItem.model, function (object) {
          scene.add(object);
      });

});

var animate = function () {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
};

animate();

我要在此处导入的MTL文件主要是一个虚拟文件，因为这似乎使我能够以某种方式访问材料。该mtl中提到的纹理存在，但仅为白色。

我的模型总共包括8个网格。这些在CAD软件中被命名为“皮肤，身体，显示，s1，s2，...”。 ThreeJS似乎也可以识别这些名称，因为某些纹理已按需应用。

好吧...基础纹理（renderItem.skin）正在应有的位置应用。它上面的贴纸（它们基本上是4个扁平网格物体上的纹理，与较大的网格物体有些偏移）不可见。

我必须将这四种材料设置为transparent = true，因为矩形网格仅应在png纹理不透明的情况下渲染。

Chrome正在为所有材质加载正确的纹理（我可以在开发工具的“源”选项卡上看到该纹理），但未正确应用它们。

我注意到的一件事：对于某些模型，纹理变形（甚至对于基本纹理），在一个示例中，我看到一个不起作用的贴纸变形得非常厉害，几乎看不见。

长话短说：我的纹理似乎找到了正确的位置，但是似乎太过拉伸或错误地应用了，以至于它们几乎变得不可见。

观看者直播。在这个例子中。基本纹理已应用，但在弹匣周围破裂。此模型上还应该有4个贴纸。开发工具显示它们已加载，但它们均不可见。

http://3d.mrinka.org/three?s=277l8y69

ThreeJS查看器中的模型应该看起来与我使用SketchFab API制作的模型相似。

https://sketchfab.com/models/8fb464cb51b94c11924d4c652995f335

感谢您的帮助！

编辑：我三联检查了uv包装并尝试了多种渲染和cad建模软件。所有，Rhino，Blender，KeyShot，Cinema和Sketchfab应用此纹理都没有任何问题：https://i.imgur.com/fUmTYPX.png

Edit2：现在变得很奇怪。如果我使用带有链接到纹理的简单mtl的mtl加载器设置场景，则会得到此效果（良好的映射，白色区域应该像这样。）结果：https://i.imgur.com/0uOqdn9.png

如果我将超时设置为5秒，请创建一种具有相同纹理的新材料，并将其应用于场景中的每个网格，这将变成我上面提到的UV毛刺。 https://i.imgur.com/JwIZo0e.png

从ThreeJS中的URL加载所有纹理

0 个答案: