Three.js 學習(1): react-three-fiber入門

要說Three.js要先提一下WebGl:javascript

WebGl是openGl的前端實現，Three.js是WebGl的進一步封裝，react-three-fiber是Three.js進一步封裝用於react.js前端架構。前端
WebGL能夠爲HTML5 Canvas提供硬件3D加速渲染，這樣Web開發人員就能夠藉助系統顯卡來在瀏覽器裏更流暢地展現3D場景和模型了，還能建立複雜的導航和數據視覺化。java

1. react-three-fiber

只用reactjs時更方便的使用threejs，有一些封裝好的組建直接就能夠用。react

項目地址git

1.1 threejs的基本構造

網格模型就是咱們看到的東西
光源就是打光位置以及強度方向等
相機就是觀察狀況
顯然器就是設置的渲染圖形模式

2. 簡單實踐

簡單的寫了一個小栗子，實現以下功能：github

一個立方體模型，一個平面模型，平面模型用於投放陰影
點擊變形
點擊變顏色
旋轉觀察
陰影顯示

2.1 效果

2.2 內容

建立Canvas

<Canvas
    colorManagement  // 適用於全部顏色和紋理的自動sRGB編碼
    shadowMap  // gl.shadowMap
    camera={{position: [0, 2, 10], fov: 70}}
>

光源狀況

{/*pointLight 光源*/}
<pointLight position={[10, 10, 10]}/>
{/*環境光源 調節點光源*/}
<ambientLight intensity={0.1}/>
{/*平行光， 設置陰影*/}
<directionalLight
    castShadow
    position={[0, 10, 0]}
    intensity={1.5}
    shadow-mapSize-width={1024}
    shadow-mapSize-height={1024}
    shadow-camera-far={50}
    shadow-camera-left={-10}
    shadow-camera-right={10}
    shadow-camera-top={10}
    shadow-camera-bottom={-10}
/>

平面幾何圖形

<a.mesh
    rotation={[-Math.PI / 2, 0, 0]}
    position={[0, -3, 0]}
    receiveShadow // 接收陰影
>
    {/*添加平面幾何，用於投射陰影*/}
    <planeBufferGeometry attach='geometry' args={[100, 100]} />
    <shadowMaterial attach='material' opacity={0.3} />
</a.mesh>

立方體幾何圖形

<a.mesh
    ref={meshRef}
    onClick={() => setExpand(!expand)}
    rotation={[Math.PI / 2, 0, 0]}
    scale={props.scale}
    castShadow  // 產生陰影
>
    {/*xxxBufferGeometry 幾何體對象*/}
    <boxBufferGeometry attach="geometry"/>
    {/*Material 材質設定*/}
    <MeshWobbleMaterial
        color={expand?'hotpink':'orange'}
        speed={3}
        factor={0.3}
    />
</a.mesh>

旋轉

{/*用於旋轉觀察*/}
<OrbitControls />

3.源碼

github
gitee
spring