Question

我想在我的反应应用程序中获得三个js。在复制我现有的三个js代码后做出反应它起初不起作用。我提出了here的问题。现在我已经将问题简化为在反应组件中制作一个非常简单的场景。

然而，在我用三个js chrome扩展开发工具触摸相机之前，这不会呈现任何内容。只有在触摸相机（缩放，移动，旋转，切换布尔值）后，场景才会开始正常渲染。例如，使用setTimeout在代码中触摸相机不起作用。

当我在动画循环中记录一些值时，它会更新值但不会渲染到屏幕上。

这是来自另一个SO question的代码，成功将多维数据集呈现到屏幕上。

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

这是我非常简化的版本不起作用，直到我在镀铬扩展程序中触摸相机。

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

Answer 1

我找到了破碎的代码。出于某种原因，camera.lookAt(scene)将一切都搞砸了。当这被删除时，一切都很好。

我正在移动的代码是从Threejs r84非反应应用程序到带有Threejs r89 app的React 16.2。

这意味着这可能是一个升级错误，camera.lookAt(scene)在旧应用中运行。查看threejs文档，lookAt采用Vector，因此将代码更改为camera.lookAt(scene.position)也可以解决问题。

React三个js场景不会渲染，直到在chrome检查器扩展中操作

1 个答案: