React 三个 js 场景在 Chrome 检查器扩展中操作之前不会渲染 [英] React three js scene wont render until manipulated in chrome inspector extension
问题描述
我正在尝试在我的 React 应用程序中获取三个 js.复制我现有的三个 js 代码进行反应后，它起初不起作用.我提出了一个问题这里.现在我已经将问题简化为在反应组件中制作一个非常简单的场景.
但是，直到我在三个 js chrome 扩展 devtools 中触摸相机之前，这不会呈现任何内容.只有在触摸相机(缩放、移动、旋转、切换布尔值)后，场景才会开始正常渲染.例如，使用 setTimeout 在代码中触摸相机并不能解决问题.
当我在动画循环中记录一些值时，它会更新值但不会渲染到屏幕上.
这是来自另一个SO问题的代码，它将成功 将一个立方体渲染到屏幕上.
import React, { Component } from 'react'从三"导入 * 为三类场景扩展组件{构造函数(道具){超级(道具)this.start = this.start.bind(this)this.stop = this.stop.bind(this)this.animate = this.animate.bind(this)}componentDidMount() {const 宽度 = this.mount.clientWidthconst 高度 = this.mount.clientHeightconst 场景 = 新的 THREE.Scene()const camera = new THREE.PerspectiveCamera(75,宽度/高度，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)相机.位置.z = 4场景.添加(立方体)renderer.setClearColor('#000000')渲染器.setSize(宽度，高度)this.scene = 场景this.camera = 相机this.renderer = 渲染器this.material = 材料this.cube = 立方体this.mount.appendChild(this.renderer.domElement)this.start()}componentWillUnmount() {this.stop()this.mount.removeChild(this.renderer.domElement)}开始() {如果(！this.frameId){this.frameId = requestAnimationFrame(this.animate)}}停止() {取消动画帧(this.frameId)}动画(){this.cube.rotation.x += 0.01this.cube.rotation.y += 0.01this.renderScene()this.frameId = window.requestAnimationFrame(this.animate)}渲染场景(){this.renderer.render(this.scene, this.camera)}使成为() {返回 ({ this.mount = mount }}/>)}}导出默认场景 这是我极其简化的版本，在我触摸 chrome 扩展程序中的相机之前它不起作用.
import React, { Component } from 'react'从三"导入 * 为三class Visualizer 扩展组件 {构造函数(道具){超级(道具)this.start = this.start.bind(this)this.stop = this.stop.bind(this)this.animate = this.animate.bind(this)}componentDidMount() {//3D场景const 场景 = 新的 THREE.Scene()const camera = new THREE.PerspectiveCamera(70, 800/600, 1, 3000)相机.位置.z = 1000相机名称 = "相机"camera.lookAt(场景)场景.添加(相机)const renderer = new THREE.WebGLRenderer({ antialias: true })renderer.setSize(800, 600)window.scene = 场景窗口.三 = 三const material = new THREE.MeshBasicMaterial({颜色:0xEEEEEE，})常量半径 = 900常量间隙 = 半径 * .66const geometry = new THREE.RingGeometry(gap , radius, 4, 1, 0, Math.PI * 2)const mesh = new THREE.Mesh(几何，材质)场景.添加(网格)this.mesh = 网格this.renderer = 渲染器this.camera = 相机this.scene = 场景this.mount.appendChild(this.renderer.domElement)this.start()}componentWillUnmount() {this.stop()this.mount.removeChild(this.renderer.domElement)}开始() {如果(！this.frameId){this.frameId = requestAnimationFrame(this.animate)}}停止() {取消动画帧(this.frameId)}动画(){this.mesh.rotation.z -= 0.2 * 0.03 + 0.002this.renderScene()this.frameId = window.requestAnimationFrame(this.animate)}渲染场景(){this.renderer.render(this.scene, this.camera)}使成为() {返回 ({ this.mount = mount }}/>)}}导出默认可视化工具 解决方案 我发现了破坏性的一段代码.出于某种原因，camera.lookAt(scene) 把一切都搞砸了.当它被删除时，一切都会变得很好.
我要移动的代码是从 Threejs r84 非反应应用程序到带有 Threejs r89 应用程序的 React 16.2.
这意味着这可能是升级错误，因为 camera.lookAt(scene) 在旧应用中工作.查看 Threejs 文档，lookAt 需要一个 Vector，因此将代码更改为 camera.lookAt(scene.position) 也可以解决问题.
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
解决方案 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.
这篇关于React 三个 js 场景在 Chrome 检查器扩展中操作之前不会渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
