threejs 和react-three-fiber

现在的前端框架一般都具有高度的可扩展性，无论是vue，react在编译阶段都是基于AST生成目标平台的执行文件，据此使用react方式组织threejs的代码也就不奇怪了，将组件标签化还提高了效率，而且react16引入的fiber也是基于动画帧的定时扫描，我们使用threejs也是基于动画帧实现canvas渲染，这两者也存在一定关系，具体需要探究react-three-fiber源码

该项目的社区关注度也是相当高的，说明处于蓬勃发展期 本文也就根据threejs和react-three-fiber做一个横向的编写对比。

1. 场景创建

threejs

import {PerspectiveCamera, Scene, WebGLRenderer} from 'three'

const scene = new Scene()
const camera = new PerspecitiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
// 背景透明
const render = new WebGLRenderer({alpha:true})
renderer.setSize(window.innerWidth,window.innerHeight)
function animation() {
    window.requestAnimationFargment(animation);
}

react-three-fiber

export default function App {
    return <>
    	<Canvas> // 场景自带相机
        <></>
    	</Canvas>
    </>
}

2 添加模型

const geometry = new BoxGeometry()
const material = new MeshBasicMaterial({color:0xff0000})
const box = new Mesh(geometry,material)
sence.add(box)

function App(){
    return <>
    	<Canvas>
    		<mesh>
        		<boxGeometry />
                <meshBasicMaterial />
        	</mesh>
    	</Canvas>
    </>
}

3 添加相机

const camera = new PerspectiveCamera(,,,)
scene.add(camera)

<Canvas camera={{xxx}}>
	<PerspectiveCamera />
</Canvas>

4 元素属性

const geometry = new BoxGeometry()
const material = new MeshBasicMaterial({color:0xff0000})
const mesh = new Mesh()
// 将元素作为属性添加到对象中
mesh.geometry = geometry
mesh.material = material

<mesh>
    <boxGeometry attach="geometry"/>
    <meshBasicMaterial attach="material"/>
</mesh>

更新

这个仓库应该是对fiber进行的扩展，确实是基于requestAnimationFrame实现的异步渲染