Question

你好我试图在我的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版本，但我有同样的问题

Answer 1

最后我解决了这个问题而没有直接包含threejs库。

我的导入部分是这个

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

我删除了第一次导入，现在一切都没问题。现在我可以在这种模式下创建一个3d对象

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

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

通过查看已编译的代码，我们看到三个的导入是一个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的模块（因为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

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

因此，如果您使用的是import * as THREE from 'three';，则不需要AFRAME.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);
  }
});

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

2 个答案: