1

I am trying to get three js in my react app. After copying my existing three js code to react it did not work at first. I made a question for that here. Right now I have simplified the problem to just a making a very simple scene in a react component.

However this does not render anything until I touch the camera in the three js chrome extension devtools. Only after touching the camera ( scaling, moving, rotating, toggling booleans ) does the scene start rendering as normal. Touching the camera in code with a setTimeout for example does not do the trick.

When I log some values in the animation cycle it is updating values but not rendering to the screen.

This is code from another SO question that will successfully render a cube to the screen. 

import React, { Component } from 'react'
import * as THREE from 'three'

class Scene extends Component {
  constructor(props) {
    super(props)

    this.start = this.start.bind(this)
    this.stop = this.stop.bind(this)
    this.animate = this.animate.bind(this)
  }

  componentDidMount() {
    const width = this.mount.clientWidth
    const height = this.mount.clientHeight

    const scene = new THREE.Scene()
    const camera = new THREE.PerspectiveCamera(
      75,
      width / height,
      0.1,
      1000
    )
    const renderer = new THREE.WebGLRenderer({ antialias: true })
    const geometry = new THREE.BoxGeometry(1, 1, 1)
    const material = new THREE.MeshBasicMaterial({ color: '#433F81' })
    const cube = new THREE.Mesh(geometry, material)

    camera.position.z = 4
    scene.add(cube)
    renderer.setClearColor('#000000')
    renderer.setSize(width, height)

    this.scene = scene
    this.camera = camera
    this.renderer = renderer
    this.material = material
    this.cube = cube

    this.mount.appendChild(this.renderer.domElement)
    this.start()
  }

  componentWillUnmount() {
    this.stop()
    this.mount.removeChild(this.renderer.domElement)
  }

  start() {
    if (!this.frameId) {
      this.frameId = requestAnimationFrame(this.animate)
    }
  }

  stop() {
    cancelAnimationFrame(this.frameId)
  }

  animate() {
    this.cube.rotation.x += 0.01
    this.cube.rotation.y += 0.01

    this.renderScene()
    this.frameId = window.requestAnimationFrame(this.animate)
  }

  renderScene() {
    this.renderer.render(this.scene, this.camera)
  }

  render() {
    return (
      <div
        style={{ width: '400px', height: '400px' }}
        ref={(mount) => { this.mount = mount }}
      />
    )
  }
}

export default Scene

This is my extremely simplified version which does not work until I touch the camera in the chrome extension.

import React, { Component } from 'react'
import * as THREE from 'three'

class Visualizer extends Component {
  constructor(props) {
    super(props)

    this.start = this.start.bind(this)
    this.stop = this.stop.bind(this)
    this.animate = this.animate.bind(this)
  }

  componentDidMount() {

    //3D SCENE
    const scene = new THREE.Scene()
    const camera = new THREE.PerspectiveCamera(70, 800 / 600, 1, 3000)
    camera.position.z = 1000
    camera.name = "camera"
    camera.lookAt(scene)
    scene.add(camera)
    const renderer = new THREE.WebGLRenderer({ antialias: true })
    renderer.setSize(800, 600)

    window.scene = scene
    window.THREE = THREE

    const material = new THREE.MeshBasicMaterial({
      color: 0xEEEEEE,
    })

    const radius = 900
    const gap = radius * .66
    const geometry = new THREE.RingGeometry(gap , radius, 4, 1, 0, Math.PI * 2)
    const mesh = new THREE.Mesh(geometry, material)
    scene.add(mesh)
    this.mesh = mesh

    this.renderer = renderer
    this.camera = camera
    this.scene = scene
    this.mount.appendChild(this.renderer.domElement)
    this.start()
  }

  componentWillUnmount() {
    this.stop()
    this.mount.removeChild(this.renderer.domElement)
  }

  start() {
    if (!this.frameId) {
      this.frameId = requestAnimationFrame(this.animate)
    }
  }

  stop() {
    cancelAnimationFrame(this.frameId)
  }

  animate() {
    this.mesh.rotation.z -= 0.2 * 0.03 + 0.002
    this.renderScene()
    this.frameId = window.requestAnimationFrame(this.animate)
  }


  renderScene(){
    this.renderer.render(this.scene, this.camera)
  }

  render() {
    return (
      <div
        // style={{width:'400px', height: '400px', left: '0', top:'0' }}
        ref={(mount) => { this.mount = mount }}
      />
    )
  }
}

export default Visualizer
HermanChan
  • 65
  • 1
  • 8

1 Answers1

3

I found the breaking piece of code. For some reason camera.lookAt(scene) messes everything up. When this is removed everything renders fine.

The code I was moving was from a Threejs r84 non react app to a React 16.2 with Threejs r89 app.

Which means this was probably an upgrading error as camera.lookAt(scene) worked in the old app. Looking at the threejs docs, lookAt takes a Vector so changing the code to camera.lookAt(scene.position) also fixes the problem.

HermanChan
  • 65
  • 1
  • 8