Модель A-Frame .obj отображается, но не работает

Абсолютно новичок в a-frame здесь прошел через учебные сцены, и сейчас я настраиваю свои первые модели с использованием .obj.

Используя удаленный сервер, почувствуйте, что это важная информация.

Я видел вопросы о том, что модели не отображаются, но моя показывает неисправность, и я не уверен, с чего начать ее исправление.

Вот как это выглядит в Windows 3D Builder:

И вот как это выглядит в моем проекте (на розовой плоскости для контраста):

Вот HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pokemon Stadium</title>
    <link href="css/main.css" rel="stylesheet">
    <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
    <script src="js/main.js"></script>
</head>
<body>


<!-- Scene -->
<a-scene onLoad="">
    <!------------------------------------------------ Assets --------------------------------------------------------->
    <a-assets>
        <a-asset-item id="stadium-obj" src="assets/models/stadium/Pokemon+Stadium.obj"></a-asset-item>
        <a-asset-item id="stadium-mtl" src="assets/models/stadium/Pokemon+Stadium.mtl"></a-asset-item>
        <a-asset-item id="ivy-obj" src="assets/models/ivysaur/Pokemon.obj"></a-asset-item>
        <a-asset-item id="ivy-mtl" src="assets/models/ivysaur/Pokemon.mtl"></a-asset-item>
    </a-assets>


    <!------------------------------------------------- Scene --------------------------------------------------------->
    <!-- Skybox -->
    <a-sky color="#279DF4"></a-sky>


    <!-- Abyss -->
    <a-plane scale="1000 1000" position="0 -10 0" color="#212121" rotation="-90 0 0" material="shader: flat"></a-plane>


    <!-- Stadium -->
    <a-entity obj-model="obj: #stadium-obj; mtl: #stadium-mtl" position="0 0 -30" scale="0.05 0.05 0.05" material="side: double"></a-entity>

    <!-- Bulbasaur -->
    <a-entity obj-model="obj: #ivy-obj; mtl: #ivy-mtl" position="15 10 0" scale="1 1 1" rotation="0 90 0"></a-entity>


    <!-- Camera + cursor -->
    <a-entity camera look-controls position="10 12 0" rotation="-23 -90 0">
        <a-cursor id="cursor"
                  animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
                  animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
                  event-set__1="_event: mouseenter; color: springgreen"
                  event-set__2="_event: mouseleave; color: black"
                  fuse="true"
                  raycaster="objects: .link"></a-cursor>
    </a-entity>
</a-scene>
</body>
</html>

aframe .obj 3d-model

JDorman 10.05.2017 источник

Ответы (1)

arrow_upward
1
arrow_downward

Вероятно, вам придется установить тип стороны материала на THREE.DoubleSide. ~~С помощью A-Frame вы должны иметь возможность изменять тип, используя следующий атрибут DOM на AEntity: material="side: double".~~

Если это не так, вы должны обновить свой пост фрагментом элементов сцены.

РЕДАКТИРОВАТЬ:

Как показано на изображении, части моей модели отображаются неправильно. Загрузчик моделей в THREEjs считывает все сетки в модели и связывает их с сгруппированным объектом. Чтобы исправить это, вы должны установить сторону материала сеток как DoubleSided. К счастью, в A-Frame компонент obj-model испускает событие, когда модель успешно загружена, мы добавляем прослушиватель для отправленного события model-loaded в элемент DOM и добавляем обратный вызов, который возвращает пользовательское событие. Customevent отправляет ссылку на модельную группу. Запрос для AEntity, я добавил к моему id modelEl.

<script>
  (function(modelEl) {
    if (!window['AFRAME'] && !modelEl) {
      return;
    }

    modelEl.addEventListener('model-loaded', function(evt) {
        var model = evt.detail.model;

      traverse(model);
    });
  })(document.getElementById('stadium'));

  function traverse(node) {
    node.children.forEach(function(child) {
      if (child.children) {
        traverse(child);
      }

      updateMaterial(child['material'], THREE.DoubleSide);
    });
  }

  function updateMaterialSide(material, side) {
    if (!material) {
      return;
    }

    if (material instanceof THREE.Material) {
      material.side = side;
      material.needsUpdate = true
    } else if (material instanceof THREE.MultiMaterial) {
      material.materials.forEach(function(childMaterial) {
        updateMaterial(childMaterial, side);
      });
    }
  }
</script>

После запуска приведенного выше скрипта моя модель и часть загрузки текстур были исправлены.

Что-то, что следует учитывать, - это копаться в создании пользовательских компонентов и изменять или расширять компонент obj-model, чтобы избежать необходимости запрашивать каждую модель, которая может иметь ту же проблему. Если ничего из этого не сработало, я полагаю, что что-то не так с вашими настройками экспорта волнового фронта obj.

РЕДАКТИРОВАТЬ2:

Что касается моего комментария, вот результат исправленного файла obj в A-Frame:

Для удобства вы можете найти файлы MTL и OBJ здесь:

файл obj

файл mtl

Shane 10.05.2017

comment

Спасибо за ответ, Шейн, это не сработало, поэтому я разместил html - JDorman; 10.05.2017

comment

@JDorman Ах, извините, я поспешил с этим ответом в поезде. Возможно, вам придется установить тип стороны материала на дочерних сетках. Если вы новичок в THREEjs, это может сначала сбить с толку. Загрузчик модели объединяет все сетки в групповой элемент. Эта группа используется для хранения всех сеток модели. Я обновил свой пример выше. THREEjs - это фреймворк webgl, который используется A-Frame. - Shane; 10.05.2017

comment

Выглядит отлично, завтра попробую! Огромное спасибо! - JDorman; 12.05.2017

comment

Просто попробовал это, и похоже, что это не работает. Если бы это была проблема с самой моделью, она бы тоже выглядела сломанной в Windows 3D Builder? Я создал пример на Glitch если от этого будет легче. - JDorman; 12.05.2017

comment

Ваш экспортированный файл obj имеет неверный формат для WebGL! Во время экспорта SketchUp в формат OBJ вам необходимо указать правильные параметры экспорта. Я верю, что triangulate all faces это то, что вам нужно. Когда вы импортируете любую модель в 3D Builder Windows 10, он должен проверять наличие ошибок. Это сработало для вашей модели SketchUp и попросило решить любые проблемы. После принятия запроса он также загружается в A-Frame. Кажется, с материалами все в порядке. Я обновил свой пост, потому что дети могут быть смесью групп и сеток. Однажды вы можете столкнуться с этой проблемой. - Shane; 12.05.2017

Модель A-Frame .obj отображается, но не работает

Ответы (1)

Похожие вопросы