three.js-Uncaught ReferenceError：シーンが定義されていません

Question

私はa-frame、three.jsを初めて使い、.objモデルを使って単純なシーンを作成しようとしています。私の目的は1つのツリーを作成し、それがキャッチされていないに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> 

Answer 1

が定義されていない、あなたが行うことで、どちらかの参照を作成する必要があり、あなたの<script>タグにシーンを定義していませんでした：

1. document.querySelector('a-scene').object3D;参照または、

2. あなたのケースでは、A-シーン参照、返すように見えるために任意の<a-entity>に参照this.el.sceneEl.object3Dを作る：あなたがやったように、あなたが<script>タグを入れたときにところでdocument.querySelector('a-plane').sceneEl.object3D;

をスコープはウィンドウであり、<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 (...)
あなたはまだ私はそれを行うだろう、更新を定義し、機能を削除する必要があるだろうとして、それは、最高のコンポーネントではありませんこちらです。