Загрузка ВСЕХ текстур с URL в ThreeJS - PullRequest
Новая
       7

Загрузка ВСЕХ текстур с URL в ThreeJS

0 голосов
/ 26 сентября 2018

Я впервые с 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 мешей.Они были названы "skin, body, display, s1, s2, ..." в программном обеспечении CAD.ThreeJS также, кажется, распознает эти имена, так как некоторые текстуры применяются так, как должны.

Ну ... базовая текстура (renderItem.skin) применяется там, где и должна.Наклейки сверху (это в основном текстуры на 4 плоских сетках, которые немного смещены относительно большей сетки) не видны.

Я должен установить для этих четырех материалов значение прозрачный = true, поскольку прямоугольная сетка должна отображаться только там, где текстура png непрозрачна.

Chrome загружает правильные текстуры для всех материалов (я вижу это на вкладке источников в инструментах разработчика), но не применяет их правильно.

Одна вещь, которую я заметил: для некоторых моделей текстуры искажаются (даже для базовой текстуры), и в одном примере я видел, что одна из нерабочих наклеек была настолько искажена, что была почти невидимой.

Короче говоря: мои текстуры, кажется, нашли свое место, но кажутся настолько растянутыми или неправильно примененными, что становятся практически незаметными.

Зритель жив.В этом примере.Базовая текстура была применена, но разбита по всему журналу.На этой модели также должно быть 4 наклейки.Dev Tools показывает их загруженными, но они не видны.

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

Предполагается, что модель в средстве просмотра ThreeJS будет выглядеть аналогично той, которую я сделал с помощью API SketchFab.

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

Любая помощь приветствуется!

Редактировать: Я трижды проверил уф-упаковку и попробовал несколько программ рендеринга и моделирования CAD.Все, Rhino, Blender, KeyShot, Cinema и Sketchfab не испытывают никаких проблем с применением этой текстуры: https://i.imgur.com/fUmTYPX.png

Edit2: теперь становится действительно странно.Если я настрою сцену, используя загрузчик mtl с простым mtl, который ссылается на текстуру, я получаю это (хорошее отображение, белые области должны быть такими). ​​Результат: https://i.imgur.com/0uOqdn9.png

Если я установлю 5-секундный тайм-аут, создам новый материал с той же текстурой и наложу его на каждую сетку в сцене, это превратится в УФ-глюк, о котором я упоминал выше.https://i.imgur.com/JwIZo0e.png

...