three.js-Uncaught ReferenceError: scene is not defined

Question

我是 a-frame 的新手，three.js 并且正在尝试使用 .obj 模型创建一个简单的场景我的目标是创建一棵树然后克隆它但是它给出了一个错误说明 Uncaught 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> 标签中定义场景，您需要通过以下方式进行引用：

document.querySelector('a-scene').object3D;参考或，
对任何 <a-entity> 进行参考 this.el.sceneEl.object3D 因为它似乎 return 场景参考，在您的情况下：document.querySelector('a-plane').sceneEl.object3D;

顺便说一句，当你像以前那样放置 <script> 标签时，范围是 window，而不是 <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 (...)
它不是最好的组件，因为您需要定义更新和删除功能，我仍然会这样做。

three.js-Uncaught ReferenceError: scene is not defined

three.js-Uncaught ReferenceError: scene is not defined

javascript

three.js

aframe