上一章节讲了如何完整的创建一个three.js的简单例子,这一节,分别细说每个必要元素的类别及功能。
讲在前面的话:这一节主要是细说类别。那么我希望大家多去尝试每个功能,就像刚买了新手机一样,每个新鲜的功能都去试一下,
这样自己才能深刻得体会到,这个代码原来是这个效果,这个功能原来是这个代码实现的。让我们进入正题:
1.renderer(渲染器),用法及参数如下:
renderer=new THREE.WebGLRenderer({
antialias:true,//antialias:true/false是否开启反锯齿
precision:"highp",//precision:highp/mediump/lowp着色精度选择
alpha:true,//alpha:true/false是否可以设置背景色透明
premultipliedAlpha:false,//?
stencil:false,//?
preserveDrawingBuffer:true,//preserveDrawingBuffer:true/false是否保存绘图缓冲
maxLights:1//maxLights:最大灯光数
})
2.camera(相机)
a.正投影相机:THREE.OrthographicCamera(left, right, top, bottom, near, far) (远近高低比例都相同)
b.透视投影相机:THREE.PerspectiveCamera(fov, aspect, near, far) (远处的物体比近处的物体小)
fov相当于视角,当它为0的时候,相当于闭着眼。这里取值多为45左右,当然也可以自己设不同的值试一试效果;
near:可以认为是眼睛距离近处的距离;
far:表示你远处的裁面;
aspect:实际窗口的纵横比,即宽度除以高度
3.light(光源)
a.环境光THREE.AmbientLight(hex) // hex:16进制的颜色值
什么是环境光?
环境光是经过多次反射而来的光称为环境光,无法确定其最初的方向。环境光是一种无处不在的光。环境光源放出的光线被认为来自任何方向。
因此,当你仅为场景指定环境光时,所有的物体无论法向量如何,都将表现为同样的明暗程度。(这是因为,反射光可以从各个方向进入您的眼睛)
b.点光源:PointLight( color, intensity, distance )
Color:光的颜色;
Intensity:光的强度;
distance:光的距离
c.聚光灯:THREE.SpotLight( hex, intensity, distance, angle, exponent )
Angle:聚光灯着色的角度;
exponent:光源模型中,衰减的一个参数,越大衰减约快
d.平行光:THREE.DirectionalLight = function ( hex, intensity )
4.geometry(各种形状)
a.长方体:THREE.CubeGeometry(width, height, depth, widthSegments, heightSegments, depthSegments);
b.平面:THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
c.球体:THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength);
d.圆形:THREE.CircleGeometry(radius, segments, thetaStart, thetaLength);
e.圆柱体:THREE.CylinderGeometry(radiusTop, radiusBottom, height,radiusSegments, heightSegments, openEnded) //ps:当openEnded -> 为 true时,上下不封口。
f.正四面体:THREE.TetrahedronGeometry(radius, detail);
g.正八面体:THREE.OctahedronGeometry(radius, detail);
h.正十二面体:THREE.IcosahedronGeometry(radius, detail);
i.圆环:THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc);
j.圆环结:THREE.TorusKnotGeometry(radius, tube, radialSegments, tubularSegments, p, q, heightScale);
5.material(材质)
a.基本材质:THREE.MeshBasicMaterial(opt)
opt对象参数:
visible :是否可见,默认为 true
side :渲染面片正面或是反面,默认为正面 THREE.FrontSide ,可设置为反面THREE.BackSide ,或双面 THREE.DoubleSide
wireframe :是否渲染线而非面,默认为 false
color :十六进制 RGB 颜色
map :使用纹理贴图
b.Lambert 材质(MeshLambertMaterial)
opt参数:
color:设置材质颜色
ambient 表示对环境光的反射能力,只有当设置了 AmbientLight 后,该值才是有效的
emissive 是材质的自发光颜色,可以用来表现光源的颜色
c.Phong 材质(MeshPhongMaterial)
opt参数:
color,ambient,emissive: 同上;
specular: 镜面反射系数作说明
shininess: 当 shininess 值越大时,高光的光斑越小,默认值为 30
介绍到这里,大致的一些属性及种类就介绍到这里了。希望大家最好能一一尝试,这样看是看不出什么的,实际有什么不同的,当尝试之后,会茅塞顿开。