基本要素:场景,相机,光源,物体(几何体+材质),渲染器;
1.场景:var scene = new THREE.Scene();
2.相机:相机分为两种,一种是正交投影相机(THREE.OrthographicCamera()),使用正交相机适合的场景有制图,建模等场景,因为它不受相机距离的影响,也就是相机的距离如何变化,我们的模型都不会变大或者缩小;一种是透视投影相机(THREE.PerspectiveCamera()),使用透视投影相机,要把它想象成人的眼睛,会有近大远小的效果,所以根据这个特性,大部分场景都是适合使用透视投影相机的;
相机的参数含义:正交相机有6个参数THREE.OrthographicCamera(left,right,top,bottom,near,far);正如参数表面的含义一样;它渲染的就是一个设置了左右上下边界的空间,near和far表示相机可以渲染的最近和最远的距离,如果超出了这个范围,我们所要渲染的模型便会消失;透视相机有4个参数,THREE.PerspectiveCamera(fov,aspect,near,far),fov代表的是相机在竖直方向的张角,也可以理解为人眼睛张开的角度,一般设置为45度,这样更符合人类的正常观察视角,aspect代表的是宽高比(通常设置为画布的宽高比),near和far和正交相机的含义一样;
3.光源:光源我就只介绍一下我在项目中用到的光源;
环境光:所有角度看到的亮度一样,通常用来为整个场景指定一个基础的亮度,没有明确光源位置;也就是说,我们渲染的模型不管你是如何的旋转或者翻转,都不会出现阴影,你看到的每一个面都是一样的效果;
点光源:顾名思义,它是一个点发出的光源,它是一个点朝四面八方发射的光源。照到不同物体表面的亮度线性递减,第一次看到这个其实很多人会把它当作手电筒类似的去看,其实不是的,因为使用点光源不能用来创建阴影,当然,在新版本中,点光源也可以创建阴影了;
聚光灯:投射出类似于圆锥型的光线,这个可以类比于我们用的手电筒,它也是可以创建阴影的;
平行光:亮度与光源和模型之间的距离无关,至于平行光的角度和物体所在平面有关,聚光灯也是可以创建阴影的;
4.物体:专业上称为网格对象(THREE.Mesh()),也可以是我们通过第三方导进来的模型,如果网格对象是我们自己去创建,那么我们需要使用THREE.SphereGeometry定义物体的形状(注意,此处我用的是球体,物体的不同形状由不同的实例对象来创建的,具体可以在官网上查),使用THREE.MeshBasicMaterial定义物体的外观和材质,并将它们合成能够添加到场景中的网格;
示例创建一个球体:
var sphereGeometry = new THREE.SphereGeometry(4,20,20);
var sphereMaterial = new THREE.MeshBasicMaterial({color:0x7777ff});
var sphere = new THREE.Mesh(sphereGeometry ,sphereMaterial );
材质这一块,常用漫反射,镜面反射两种材质,还可以引入外部图片,贴到物体表面,成为纹理贴图;还有,添加材质不止可以添加一种,随心所欲,想添加多少就添加多少;
5.渲染器:
var renderer = new THREE.WebGLRenderer(); //创建渲染器
//创建控件对象 相机对象camera作为参数 控件可以监听鼠标的变化,改变相机对象的属性
var controls = new THREE.OrbitControls(camera, renderer.domElement);
renderer.setSize(width, height); //设置渲染区域尺寸
renderer.setClearColor(0xFFFFFF, 1); //设置背景颜色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
// 渲染函数
function render() {
controls.update(); //更新控件对象
renderer.render(scene, camera); //执行渲染操作
requestAnimationFrame(render); //请求再次执行渲染函数render,渲染下一帧
}
总结:通过以上步骤可以简单的了解到创建一个3D场景其实并不难,但其实,上述的每一个对象都有很多的属性,需要去设置实现你想实现的效果,相关属性根据自己的需求在官方文档可以查到。