Reactjs Threejs TorusGeometry组错误：THREE.Object3D

我想把球墨仪放在一个有

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

/**********导入***********/
从“react”导入{PureComponent}
将*从“三”导入为三
导出类扩展PureComponent{
建造师（道具）{
超级（道具）
const{scene}=this.props
常数{
x、 y，z，r
}=这是道具
这个场景
//轨道
this.orbit=新的三个圆环几何体（200,1.1,6.3,24）
//卫星
this.geometry=新的三种球面测量法（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）
}
组件willmount（）{
this.group=new THREE.group（）
this.group.add（this.orbit）
this.group.add（this.sphere）
this.scene.add（this.group）
}
render（）{
返回空
}
}

无论何时使用

group.add（）

都必须确保将

Object3D

作为参数传递。您现在正在做的是传递一个

TorusGeometry

，因此库抱怨它“不是THREE.Object3D的实例”

您需要使用圆环体几何体创建

网格

，然后使用该网格添加到组中（就像您使用

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);

    //...
}