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

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

它给我一个错误，显然我的代码无法正常工作。这是下面的错误

错误

Cannot read property 'set' of undefined

错误线

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

这是我的状态

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

所以有人可以帮助我如何在 setState 内部创建新对象吗？

Answer 1

我建议您将相机放在this.state之外，因为当以每秒60帧的速度对其进行动画处理时，React会尝试跟踪所有这些状态变化并导致过多的开销。

为简化起见，您应该执行this.camera = new THREE.PerspectiveCamera()，然后可以使用this.camera.position.set(x, y, z)随意对其进行修改，并使React的状态跟踪不受影响。