three.js初探

Three.js 中，要渲染物体到网页中，必备3个组件：场景 scene、相机 camera、渲染器 renderer。

场景 scene

场景组件包括：
* 相机 — 决定哪些东西要渲染到屏幕上
* 光源 — 对材质如何显示，及阴影生成产生影响
* 物体 — Mesh对象，在相机视图里主要的渲染对象，如方块、球体等

相机 camera

相机就是在场景组件中的相机，相机决定了场景中哪个角度的景色会被渲染出来。主要有：
* 正交相机 OrthographicCamera
* 透视相机 PerspectiveCamera

 

渲染器 renderer

渲染器决定了渲染的结果应该画在元素的什么元素上面，并且以怎样的方式来绘制。 Threejs中提供了很多的渲染方式，主要是 CanvasRenderer 、WebGLRenderer两种。

物体 Object

在three.js中，我们使用Mesh模型，Mesh的构造函数是这样的：Mesh( geometry, material ) geometry是它的形状，material是它的材质（会反光的、金属光泽的等等）。

可以用纹理texture来构建新的material，也可以用默认的material。

每个物体有自己的大小，默认情况下都是很小的，如果你不放大，基本是看不到的。所以物体新建后都要setSize或者setScale。

raycaster定位鼠标

raycaster可以获取到鼠标的位置点投射在物体上的位置点

渲染canvas
通过canvas新建一个CanvasTexture，再通过texture新建一个物体，把它添加到场景中。修改canvas的内容，物体会跟着改变。