react-three-fiber源码相关

[cisen]

说明

在react里面使用three.js https://github.com/drcmda/react-three-fiber

好东西

在无状态组件里面安装pureComponent

//  React.memo
export const Canvas = React.memo(({ children, props, camera, style, ...rest }) => {
})

动画原理

useEffect(() => {
    state.current.gl = new THREE.WebGLRenderer({ canvas: canvas.current, antialias: true, alpha: true, ...props })
    state.current.gl.setPixelRatio((window.devicePixelRatio || 2) * 0.5)
    state.current.gl.setClearAlpha(0)
    state.current.canvas = canvas.current
    state.current.scene = new THREE.Scene()
    state.current.scene.__interaction = []

    const renderLoop = function() {
      if (!state.current.active) return
      requestAnimationFrame(renderLoop)
      if (state.current.ready) {
        state.current.subscribers.forEach(fn => fn(state.current))
        if (!state.current.manual && state.current.scene.children.length) {
          state.current.gl.render(state.current.scene, state.current.camera)
        }
      }
    }

    // Start render-loop
    requestAnimationFrame(renderLoop)

    // Clean-up
    return () => {
      state.current.active = false
      unmountComponentAtNode(state.current.scene)
      // TODO: Clean up and dispose scene ...
    }
  }, [])

通过不断在渲染空隙执行state.current.gl.render更新canvas里面的图像

问答

• 为什么会有isObject3D属性？ 因为动画使用的是react-spring/three库提供的组件，所以携带了这个属性

[linonetwo]

还以为是 react-three-fiber 源码解读