three.js-Uncaught ReferenceError: сцена не определена

Question

three.js-Uncaught ReferenceError: сцена не определена

1

Я новичок в a-frame, three.js, и я пытаюсь создать простую сцену с использованием модели.obj. Моя цель - создать одно дерево, а затем клонировать его, но оно дает сообщение об ошибке "Невстреч" ReferenceError: сцена не определена

 <a-scene>
 <a-assets>
   <img id="my-image" src="sky.jpg">
   <img id="grass" src="grass.jpg">
   <a-asset-item id="tree-obj" src="tree-05.obj"></a-asset-item>
   <a-asset-item id="tree-mtl" src="tree-05.mtl"></a-asset-item>
   <a-asset-item id="lion-cub-obj" src="lion-cub.obj"></a-asset-item>
   <a-asset-item id="lion-cub-mtl" src="lion-cub.mtl"></a-asset-item>
 </a-assets>
  <a-plane src="#grass" height="200" width="200" rotation="-90 0 0"></a-plane>
   <a-obj-model src="#tree-obj" mtl="#tree-mtl" scale="0.05 0.05 0.05" id="group" position=" 4 0.5 0"></a-obj-model>
   <script>
    var mtlLoader = new THREE.MTLLoader();
    mtlLoader.setPath('./');
    mtlLoader.load('tree-05.mtl', function(materials) {
    materials.preload();
    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.setPath('./');
    objLoader.load('tree-05.obj', function(object) {
      object.scale.set(0.05, 0.05, 0.05);
      object.position.set( 6, 0.5, 0 );
      scene.add(object);  
      });
     });
  </script>
 <a-obj-model src="#lion-cub-obj" mtl="#lion-cub-mtl" scale="0.25 0.25 0.25" rotation="0 -180 0" position=" 0 1 0"></a-obj-model>
<a-sky src="#my-image" position="0 -200 0"></a-sky>

Harshit Sharma 04 июнь 2017, в 21:50

Источник

Теги:

javascript

three.js

aframe

1 ответ

Ещё вопросы

Piotr Adam Milewski · Accepted Answer · 2017-06-04T20-42-00.000Z

Вы не определили сцену в тегах <script>, вам нужно сделать ссылку, сделав:

document.querySelector('a-scene').object3D; ссылку или,
сделав ссылку this.el.sceneEl.object3D на любом <a-entity> поскольку, похоже, возвращает ссылку на a-scene в вашем случае: document.querySelector('a-plane').sceneEl.object3D;

btw, когда вы помещаете <script> как вы, область видимости - это окно, а не <a-obj-model>. Мой совет будет создавать компонент:

AFRAME.registerComponent('myloader', {
    init: function(){
    var self = this;
    var mtlLoader = new THREE.MTLLoader();
    mtlLoader.setPath('./');
    mtlLoader.load('tree-05.mtl', function(materials) {
    materials.preload();
    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.setPath('./');
    objLoader.load('tree-05.obj', function(object) {
      object.scale.set(0.05, 0.05, 0.05);
      object.position.set( 6, 0.5, 0 );
      self.el.sceneEl.object3D.add(object);  
}
});

затем добавьте его следующим образом: <a-obj-model myloader (...)
Это не лучший компонент, так как вам нужно будет определить обновление и удалить функции, но я бы сделал это так.

Я использовал ваше предложение и добавил var scene=document.querySelector('a-scene'); но теперь он выдает ошибку, заявляющую Uncaught Error: Попытка добавить элемент, который не имеет object3D .
и та же ошибка возникает, если я использую ваш способ создания компонента. 3D-модель нигде не видно
попробуйте var scene = document.querySelector ('a-scene'). object3D;
@HarshitSharma ссылка scene.object3D должна работать, создала простое создание куба в Threejs, и это работает, когда я добавляю объект в ссылку scene.object3D : plnkr.co/edit/jQ2DPsjketpYQOogDyMW?p=preview
Поскольку у вас есть сценарий внутри сцены ... включите его после сцены. Пожалуйста, ознакомьтесь также с aframe.io/docs/0.5.0/introduction/…