aframe 错误：使用不是 THREE.Object3D 实例的对象调用了 Entity.setObject3D答案

【问题标题】：aframe error: Entity.setObject3D was called with an object that was not an instance of THREE.Object3Daframe 错误：使用不是 THREE.Object3D 实例的对象调用了 Entity.setObject3D
【发布时间】：2021-12-31 00:03:44
【问题描述】：

你好，我尝试向我的 aframe 组件添加一个网格，但我收到一个奇怪的错误，也有一个非常简单的代码，像这样

AFRAME.registerComponent('mysquare', {
      init: function(){
        var el = this.el; 

        var box = new THREE.BoxGeometry(40, 5, 40);
        var boxMesh = new THREE.Mesh(box);
        boxMesh.position.set(25, 0, 25);
        el.setObject3D("mesh", boxMesh);

      }
    });

home.html

<ion-content>
      <div></div>
      <a-scene embedded>
         <a-entity mysquare></a-entity>
       </a-scene> 
</ion-content>

错误信息

错误：Entity.setObject3D 被调用的对象不是THREE.Object3D 的实例。

我也尝试了add 函数，但我收到了相同的消息。怎么可能？

我使用 ionic 2 + aframe v.0.7.1 开发我的应用程序。我也试过 0.5.0 版本，但我有同样的问题

【问题讨论】：

嗯，这看起来完全正确。也许错误来自代码库中的其他地方？尝试setObject3D('mesh', new THREE.Object3D()) 进行完整性检查。
我忘记写了，但我已经尝试过了。同样的错误，实际上我认为那不是代码。我认为这可能与 ionic2 存在某种不兼容？

标签： javascript three.js ionic2 aframe

【解决方案1】：

我终于解决了这个问题，没有直接包含threejs库。

我的导入部分是这样的

import * as THREE from 'three';
declare var AFRAME;

我已经删除了第一个导入，现在一切正常。现在我可以在这种模式下创建一个 3d 对象

el.setObject3D("mesh", new AFRAME.THREE.Object3D());

【讨论】：

嗨@Diagonal，您如何以这种方式包含自己的网格？

【解决方案2】：

我在一个 Angular 9 项目中工作，该项目使用 webpack 来处理依赖关系。

有以下这些导入

import { Component, OnInit } from '@angular/core';
import * as AFRAME from 'aframe';
import * as THREE from 'three';

...

AFRAME.registerComponent('box', {
...
  // Create mesh.
  this.mesh = new THREE.Mesh(this.geometry, this.material);

  // Set mesh on entity.
  el.setObject3D('mesh', this.mesh);
...

控制台显示与您的错误相同的错误：

core:a-node:error Failure loading node:   
Error: `Entity.setObject3D` was called with an object that was not an instance of THREE.Object3D.

查看转译后的代码，我们看到 THREE 的导入是一个 Module 对象

/* harmony import */ var three__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! three */ "./node_modules/three/build/three.module.js");

哪个代码使用three__WEBPACK_IMPORTED_MODULE_2__作为引用来创建Mesh，它不是全局的THREE，而是THREE的一个Module（因为threejs将它作为一个模块提供了build/three.module.js）。

three__WEBPACK_IMPORTED_MODULE_2__ === THREE
// false
three__WEBPACK_IMPORTED_MODULE_2__ + ''
// [object Module]
THREE + ''
// [object Object]

然而，导入的AFRAME 具有对全局THREE 的引用，它在内部将其用于检查实例。请注意，AFRAME 不提供自己作为模块，因此 webpack 解析为全局 AFRAME。

three__WEBPACK_IMPORTED_MODULE_2__ === THREE
// false
aframe__WEBPACK_IMPORTED_MODULE_1__.THREE === THREE
// true
aframe__WEBPACK_IMPORTED_MODULE_1__ === AFRAME
// true

请注意，typescript 能够将 AFRAME.THREE 识别为 THREE 类型，因此具有 THREE 类型的所有优点。

因此，如果您使用的是AFRAME.THREE，则不需要import * as THREE from 'three';。

这是我registerComponent的一个例子

AFRAME.registerComponent('box', {
  schema: {
    width: {type: 'number', default: 1},
    height: {type: 'number', default: 1},
    depth: {type: 'number', default: 1},
    color: {type: 'color', default: '#AAA'}
  },
  init() {
    const data = this.data;
    const el = this.el;
    // Extract THREE
    const {THREE} = AFRAME;

    // Create geometry.
    this.geometry = new THREE.BoxBufferGeometry(data.width, data.height, data.depth);

    // Create material.
    this.material = new THREE.MeshStandardMaterial({color: data.color});

    // Create mesh.
    this.mesh = new THREE.Mesh(this.geometry, this.material);

    // Set mesh on entity.
    el.setObject3D('mesh', this.mesh);
  }
});

【讨论】：

【解决方案3】：

对我来说，通过安装以下内容，我成功地将它与 Angular 13 应用程序一起使用-

npm install aframe
npm install -D @types/aframe
npm install -D @types/three

然后将其导入我的一个组件中-

import * as AFRAME from 'aframe';

然后使用它-

AFRAME.registerComponent('test-obj', {
    init: function () {
    }
});

【讨论】：