如何在THREE.PerspectiveCamera中setState中创建react.js对象

Question

我正在使用three.js和react.js。现在，我正在像这样创建THREE.PerspectiveCamera对象。

init = () => {
    this.state.camera = new THREE.PerspectiveCamera(25, window.innerWidth / window.innerHeight, 1, 10000);
// others code
}

它很好，但它给了我一个警告

Do not mutate state directly. Use setState()

如果我想这么做

this.setState({camera: new THREE.PerspectiveCamera(25, window.innerWidth / window.innerHeight, 1, 10000)})

它给了我一个错误，它无法创建THREE.PerspectiveCamera对象。这是下面的错误

错误

Cannot read property 'set' of undefined

误差线

this.state.camera.position.set(100, 0, 1000)

这是我的状态

this.state = {
    a: '',
    b: false,
    camera: {},
}

所以谁能帮我把THREE.PerspectiveCamera对象放在setState里面

Answer 1

我建议您不要让相机进入this.state，因为当您以每秒60帧的速度动画它时，React将试图跟踪所有这些状态的变化，并造成太多的开销。

为了简化事情，您应该做this.camera = new THREE.PerspectiveCamera()，然后您可以使用this.camera.position.set(x, y, z)随意修改它，并使React的状态跟踪远离方程。