react-three-fiber是针对Web和react-native上的threejs的React渲染器。
特点
使用可重用的组件以声明方式构建动态场景图，使Threejs的处理变得更加轻松，并使代码库更加整洁。这些组件对状态变化做出反应，具有开箱即用的交互性。
在threejs中工作的所有内容都将在这里工作。它不针对特定的Threejs版本，也不需要更新以修改，添加或删除上游功能。
渲染性能与threejs和GPU相仿。组件参与React之外的renderloop时，没有任何额外开销。
使用示例
importReactDOMfrom'react-dom'importReact,{useRef,useState}from'react'import{Canvas,useFrame}from'react-three-fiber'functionBox(props){//Thisreferencewillgiveusdirectaccesstothemeshconstmesh=useRef()//Setupstateforthehoveredandactivestateconst[hovered,setHover]=useState(false)const[active,setActive]=useState(false)//Rotatemesheveryframe,thisisoutsideofReactwithoutoverheaduseFrame(()=>{mesh.current.rotation.x=mesh.current.rotation.y+=0.01})return(<mesh{...props}ref={mesh}scale={active?[1.5,1.5,1.5]:[1,1,1]}onClick={(event)=>setActive(!active)}onPointerOver={(event)=>setHover(true)}onPointerOut={(event)=>setHover(false)}><boxBufferGeometryargs={[1,1,1]}/><meshStandardMaterialcolor={hovered?'hotpink':'orange'}/></mesh>)}ReactDOM.render(<Canvas><ambientLight/><pointLightposition={[10,10,10]}/><Boxposition={[-1.2,0,0]}/><Boxposition={[1.2,0,0]}/></Canvas>,document.getElementById('root'))
评论