Question

我想用TorusGeometry在Group上放一个SphereGeometry

我使用Reactjs，所以我创建了一个组件 orbtit.js

/** ******** Imports ********* */
import { PureComponent } from 'react'
import * as THREE from 'three'

export class Orbit extends PureComponent {
  constructor(props) {
    super(props)

    const { scene } = this.props
    const {
      x, y, z, r
    } = this.props

    this.scene = scene

    // orbit
    this.orbit = new THREE.TorusGeometry(200, 1.1, 6.3, 24)

    // satellite
    this.geometry = new THREE.SphereGeometry(r, 32, 32)
    this.material = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff })
    this.sphere = new THREE.Mesh(this.geometry, this.material)
    this.sphere.position.set(x, y, z)
  }

  componentWillMount() {
    this.group = new THREE.Group()
    this.group.add(this.orbit)
    this.group.add(this.sphere)
    this.scene.add(this.group)
  }

  render() {
    return null
  }
}

然后将这个组件导入我的index.js <Orbit scene={this.scene} />

我有一个错误： THREE.Object3D.add: object not an instance of THREE.Object3D

我在StackOverflow上搜索，但找不到我的问题的答案。

感谢帮助！

Answer 1

每当您使用group.add()时，都必须确保传递Object3D作为参数as outlined in the docs。您现在正在做的是传递TorusGeometry，因此该库抱怨它“不是THREE.Object3D的实例”。

您需要使用环面几何形状创建一个Mesh，然后使用该网格将其添加到组中（就像您对this.sphere所做的那样），如下所示：

const torusGeom = new THREE.TorusGeometry(200, 1.1, 6.3, 24);
const torusMat = new THREE.MeshBasicMaterial();
this.orbit = new THREE.Mesh(torusGeom, torusMat);

//...


componentWillMount() {
    this.group = new THREE.Group();
    this.group.add(this.orbit);

    //...
}

Threejs TorusGeometry组错误：THREE.Object3D

1 个答案: