three.js新手入门教程( 三 )


圆环
THREE.TorusGeometry(radius,tube,radialSegments,tubularSegments,arc)
其中 , radius是圆环半径;tube是管道半径;radialSegments与tubularSegments分
别是两个分段数 , 详见上图;arc是圆环面的弧度 , 默认为Math.PI*2 。
three.js新手入门教程
文章图片
材质
材质(Material)是与渲染效果相关的属性 。 通过设置材质可以改变物体的颜色、纹理贴图、光照模式等 。 材质的共有属性包括:
基础属性
id:用来标识材质 。
name:赋予材质名称 。
opacity:定义物体透明度 , 取值范围0~1
side:设定在几何体的哪个面应用材质 , 默认值为THREE.FrontSide , 即外面 。 也可以设置为THREE.BackSide(内面)或THREE.DoubleSide(双面) 。
基本材质
用基本材质(BasicMaterial)的物体渲染后的颜色始终为该材质的颜色 , 不会由于光照产生明暗、阴影效果 。 如果没有指定材质的颜色 , 则颜色是随机的 。
THREE.MeshBasicMaterial(opt)
其中 , opt为包含各属性的值 。 如新建一个不透明度为0.75的黄色材质:
newTHREE.MeshBasicMaterial({
color:0xffff00,
opacity:0.75
});
常用的属性包括:visible:是否可见 , 默认为true2.side:渲染面片正面或是反面 , 默认为正面THREE.FrontSide , 可设置为反面THREE.BackSide , 或双面THREE.DoubleSidewireframe:是否渲染线而非面 , 默认为falsecolor:十六进制RGB颜色 , 如红色表示为0xff00005.map:使用纹理贴图
Lambert材质
Lambert光照模型的主要特点是只考虑漫反射而不考虑镜面反射的效果 , 因而对于金属、镜子等需要镜面反射效果的物体就不适应 , 对于其他大部分物体的漫反射效果都是适用的 。
newTHREE.MeshLambertMaterial(opt)
color是用来表现材质对散射光的反射能力 , 也是最常用来设置材质颜色的属性 。 除此之外 , 还可以用ambient和emissive控制材质的颜色 。
ambient表示对环境光的反射能力 , 只有当设置了AmbientLight后 , 该值才是有效的 , 材质对环境光的反射能力与环境光强相乘后得到材质实际表现的颜色 。
emissive是材质的自发光颜色 , 可以用来表现光源的颜色 。
如果同时使用红色的自发光与黄色的散射光:
newTHREE.MeshLambertMaterial({
color:0xffff00,
emissive:0xff0000
})
three.js新手入门教程
文章图片
Phong材质
Phong模型考虑了镜面反射的效果 , 因此对于金属、镜面的表现尤为适合 。
newTHREE.MeshPhongMaterial(opt);
可以通过shininess属性控制光照模型中的n值 , 当shininess值越大时 , 高光的光斑越小 , 默认值为30 。
使用黄色的镜面光 , 红色的散射光:
material=newTHREE.MeshPhongMaterial({
color:0xff0000,
specular:0xffff00,
shininess:100});
three.js新手入门教程
文章图片
Depth材质
这种材质的特点在于 , 不控制物体的渲染效果 , 外观根据物体到相机的距离变化 。 一般与其他材质结合形成远处逐渐消失的效果 。
联合材质
vardepthMaterial=newnewTHREE.MeshDepthMaterial;
varbasicMaterial=newnewTHREE.MeshBasicMaterial(opt);
varcube=newTHREE.SceneUtils.createMaterialObject(cubeGeometry,[depthMaterial,basicMaterial]);
cube.children[1].scale.set(0.99,0.99,0.99);
对于要进行融合的材质 , 需要添加属性transparent:true开启融合模式 。
createMaterialObject()创建网格时 , 几何体·会被复制 , 返回一个网格组 , 内部的网格完全一样 。 渲染时画面会闪烁 。 所以需要最后一行代码来缩小带有depth材质的网格 , 避免出现闪烁 。