Three.js 学习(1): react-three-fiber入门

要说Three.js要先提一下WebGl:

• WebGl是openGl的前端实现，Three.js是WebGl的进一步封装，react-three-fiber是Three.js进一步封装用于react.js前端架构。

• WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

1. react-three-fiber

只用reactjs时更方便的使用threejs，有一些封装好的组建直接就可以用。

项目地址

1.1 threejs的基本构造

• 网格模型就是我们看到的东西
• 光源就是打光位置以及强度方向等
• 相机就是观察情况
• 显然器就是设置的渲染图形模式

2. 简单实践

简单的写了一个小栗子，实现如下功能：

• 一个立方体模型，一个平面模型，平面模型用于投放阴影
• 点击变形
• 点击变颜色
• 旋转观察
• 阴影显示

2.1 效果

2.2 内容

• 创建Canvas

<Canvas
    colorManagement  // 适用于所有颜色和纹理的自动sRGB编码
    shadowMap  // gl.shadowMap
    camera={
   
   {
   
   position: [0, 2, 10], fov: 70}}
>

• 光源情况

{
   
   /*pointLight 光源*/}
<pointLight position={
   
   <