three.js-Uncaught ReferenceError: scene is not defined

Question

I am new to a-frame,three.js and am trying to create a simple scene using a .obj model my aim is to create one tree and then clone it but it gives an error stating Uncaught ReferenceError: scene is not defined

 <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>

Piotr Adam Milewski · Accepted Answer · 2017-06-05 05:56:10Z

1

You didn't define the scene in Your <script> tags, You need to make a reference either by making a:

document.querySelector('a-scene').object3D; reference or,
making a reference this.el.sceneEl.object3D on any <a-entity> for it seems to return the a-scene reference, in Your case: document.querySelector('a-plane').sceneEl.object3D;

btw when you put the <script> tag like you did, the scope is the window, not the <a-obj-model>. My advise would be creating a component:

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);  
}
});

then add it as follows: <a-obj-model myloader (...)
It's not the best component, as You'd need to define the update and remove functions, still i'd do it this way.

edited Jun 5, 2017 at 5:56

answered Jun 4, 2017 at 21:57

Piotr Adam Milewski

14.7k3 gold badges23 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Harshit Sharma Over a year ago

I used your suggestion and added var scene=document.querySelector('a-scene'); but now it throws an error stating Uncaught Error: Trying to add an element that doesn't have an object3D.

Harshit Sharma Over a year ago

and the same error comes if i use your way of creating a component. The 3D model is nowhere to be seen

Piotr Adam Milewski Over a year ago

try var scene=document.querySelector('a-scene').object3D;

Piotr Adam Milewski Over a year ago

@HarshitSharma the scene.object3D reference should work, made a simple cube creation in threejs, and it works when i add the object to the scene.object3D reference: plnkr.co/edit/jQ2DPsjketpYQOogDyMW?p=preview

ngokevin Over a year ago

Because you have a script tag within the scene...include it after the scene. Please also read aframe.io/docs/0.5.0/introduction/…

Collectives™ on Stack Overflow

three.js-Uncaught ReferenceError: scene is not defined

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related