Как встроить 3D-модели на веб-страницу? - PullRequest
Новая
       38

Как встроить 3D-модели на веб-страницу?

0 голосов
/ 01 августа 2020

Мы хотим добавить на наш сайт наши 3D-модели и копируем пример из Aframe для тестирования, который работал нормально:

https://madatac.es/31284-2/

<!-- wp:html -->
<script>
  AFRAME.registerComponent('modify-materials', {
    init: function () {
      // Wait for model to load.
      this.el.addEventListener('model-loaded', () => {
        // Grab the mesh / scene.
        const obj = this.el.getObject3D('mesh');
        // Go over the submeshes and modify materials we want.
        obj.traverse(node => {
          if (node.name.indexOf('ship') !== -1) {
            node.material.color.set('red');
          }
        });
      });
    }
  });
</script>

<a-scene background="color: #ECECEC">
  <a-assets>
    <a-asset-item id="cityModel" src="**https://cdn.aframe.io/test-models/models/glTF-2.0/virtualcity/VC.gltf**"></a-asset-item>
  </a-assets>
  <a-entity gltf-model="#cityModel" modify-materials=""></a-entity>
</a-scene>
<!-- /wp:html -->

Затем мы захотели попробовать нашу собственную 3D-модель gLTF, сложенную снаружи на нашем личном сервере, чтобы увидеть, у кого она будет работать, но ничего не появится ... 

<!-- wp:html -->
<script>
  AFRAME.registerComponent('modify-materials', {
    init: function () {
      // Wait for model to load.
      this.el.addEventListener('model-loaded', () => {
        // Grab the mesh / scene.
        const obj = this.el.getObject3D('mesh');
        // Go over the submeshes and modify materials we want.
        obj.traverse(node => {
          if (node.name.indexOf('ship') !== -1) {
            node.material.color.set('red');
          }
        });
      });
    }
  });
</script>

<a-scene background="color: #ECECEC">
  <a-assets>
    <a-asset-item id="cityModel" src="**https://madatac.es/contenidoweb/Sala 1.gltf**"></a-asset-item>
  </a-assets>
  <a-entity gltf-model="#cityModel" modify-materials=""></a-entity>
</a-scene>
<!-- /wp:html -->

В чем может быть проблема?

Должны ли мы накладывать 3D-модель gltf на некоторые объекты Aframe, чтобы ее можно было просмотреть на нашей веб-странице?

Заранее спасибо.

...