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的内容,物体会跟着改变。