react-three-fiber是针对Web和react-ative上的threejs的React渲染器。
特点
使用可重用的组件以声明方式构建动态场景图，使Threejs的处理变得更加轻松，并使代码库更加整洁。这些组件对状态变化做出反应，具有开箱即用的交互性。
在threejs中工作的所有内容都将在这里工作。它不针对特定的Threejs版本，也不需要更新以修改，添加或删除上游功能。
渲染性能与threejs和GPU相仿。组件参与React之外的rederloop时，没有任何额外开销。
使用示例
importReactDOMfrom'react-dom'importReact,{useRef,useState}from'react'import{Cavas,useFrame}from'react-three-fiber'fuctioBox(props){//Thisreferecewillgiveusdirectaccesstothemeshcostmesh=useRef()//Setupstateforthehoveredadactivestatecost[hovered,setHover]=useState(false)cost[active,setActive]=useState(false)//Rotatemesheveryframe,thisisoutsideofReactwithoutoverheaduseFrame(()=>{mesh.curret.rotatio.x=mesh.curret.rotatio.y+=0.01})retur(<mesh{...props}ref={mesh}scale={active?[1.5,1.5,1.5]:[1,1,1]}oClick={(evet)=>setActive(!active)}oPoiterOver={(evet)=>setHover(true)}oPoiterOut={(evet)=>setHover(false)}><boxBufferGeometryargs={[1,1,1]}/><meshStadardMaterialcolor={hovered?'hotpik':'orage'}/></mesh>)}ReactDOM.reder(<Cavas><ambietLight/><poitLightpositio={[10,10,10]}/><Boxpositio={[-1.2,0,0]}/><Boxpositio={[1.2,0,0]}/></Cavas>,documet.getElemetById('root'))
评论