【threejs实战教程一】初识Three.js，场景Scene、相机Camera、渲染器Renderer

Three.js是一个基于WebGL的JavaScript 3D图形库，用于在浏览器中创建和显示3D内容

Three.js中最基础的三个关键要素就是 场景Scene 、 相机Camera 、 渲染器Renderer

通俗一点理解，场景就是我们生活中一个具体的场景，比如自然环境中的一栋建筑，环境和内容构成了一个场景，相机就类比于人类的眼睛，渲染器就好比我们的中枢神经视觉处理器

那我们的一个网页端3D场景就是把人类观察自然界的场景的几个要素搬到了WEB端

场景Scene

那接下来详细介绍网页中的场景要素Scene

利用threejs创建一个三维场景

const scene = new THREE.Scene();

就是这么简单，我们实例化了一个虚拟世界的三维场景

接下来我们用我们web世界的眼睛来观察这个场景

相机Camera

Threejs提供了正投影相机OrthographicCamera (opens new window)和透视投影相机PerspectiveCamera

const camera = new THREE.PerspectiveCamera(95, con_width / con_height, 0.1, 4000);//参数1，视场角  2.宽高比  3，近裁界面  4，远裁界面

我们这里使用的是模拟人眼的透视投影相机，遵循我们近大远小的一个规律

实例化中传入的参数就是我们这个视锥体中的几个参数

视场角 ：视场角越大，近大远小的视觉效果越明显

宽高比 ：宽高比我们一般以屏幕的宽高比进行设置

近裁面 ：近裁截面我们可以想象成我们人眼能看到的最近距离

远裁面 ：同样的，远裁截面我们可以想象成我们人眼能看到的最远距离

渲染器Renderer

渲染器就好比我们的相机按下咔后成像的一个过程，也好比我们人类的视觉中枢，主要是用来将成像的

const renderer = new THREE.WebGLRenderer();

我们可以调用我们渲染器的render()方法生成一张图像canvas,传入的参数就是我们的场景实例和相机实例

renderer.render(scene, camera)

接下来我们将渲染完成的图像放置到我们的网页元素中

document.body.appendChild(renderer.domElement)

完成这一步，一个最基本的三维网页你就搭建完成了！！！