如何将对象添加到 componentDidMount 之外的 React-Three？答案

【问题标题】：How do I add an object to React-Three outside componentDidMount?如何将对象添加到 componentDidMount 之外的 React-Three？
【发布时间】：2019-07-30 19:53:25
【问题描述】：

我已经运行了 Three.js 的 React 示例，但似乎无法弄清楚如何在 componentDidMount 之外添加对象（网格、几何）。

我尝试添加新对象、处理以前的对象、更新 bufferGeometry

componentDidMount() {
  const width = this.mount.clientWidth
  const height = this.mount.clientHeight
  //ADD SCENE
  this.scene = new THREE.Scene()
  //ADD CAMERA
  this.camera = new THREE.PerspectiveCamera(
    75,
    width / height,
    0.1,
    1000
  )
  this.camera.position.z = 4
  //ADD RENDERER
  this.renderer = new THREE.WebGLRenderer({ antialias: true })
  this.renderer.setClearColor('#000000')
  this.renderer.setSize(width, height)
  this.mount.appendChild(this.renderer.domElement)
  //ADD CUBE
  const geometry = new THREE.BoxGeometry(12, 1, 1)
  const material = new THREE.MeshBasicMaterial({ color: '#FFFF81'     })
  this.cube = new THREE.Mesh(geometry, material)
  this.scene.add(this.cube)

  this.start()
}

---------------------------------------------
addIT(){
  const geometry3 = new THREE.BoxBufferGeometry(2,3, 1)
  const material3 = new THREE.MeshBasicMaterial({ color: '#00FF81'     })
  this.cube3 = new THREE.Mesh(geometry3, material3)
  this.scene.add(this.cube3)
  this.start()
}

我想要的是让反应事件能够在场景中添加或删除对象。

目前，我什么也得不到。

任何想法都将不胜感激。

【问题讨论】：

标签： reactjs three.js

【解决方案1】：

我最终弄清楚了发生了什么。未添加 Cube3 并引发错误。我在 addIt 中放置了一个停止渲染，添加了对象，然后再次开始渲染。

【讨论】：