CODEWITHSUNDEEP
reactjsthree.js
Solenne Daguerre
Solenne Daguerre

Reputation: 139

Threejs TorusGeometry Group error : THREE.Object3D

I would like to put a SphereGeometry on a TorusGeometry with Group

I use Reactjs so I create a component 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
  }
}

And I import this component on my index.js <Orbit scene={this.scene} />

I have an error : THREE.Object3D.add: object not an instance of THREE.Object3D

I search on StackOverflow but I don't find an answer to my question.

Thanks for help !

Upvotes: 0

Views: 115

Answers (1)

M -
M -

Reputation: 28502

Whenever you use group.add() you have to make sure you're passing an Object3D as parameter, as outlined in the docs. What you're doing right now is passing a TorusGeometry, so the library is complaining that it's "not an instance of THREE.Object3D".

You need to use your torus geometry to create a Mesh, and then use that mesh to add to the group (just like you're doing with this.sphere), as follows:

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

    //...
}

Upvotes: 1

Related Questions