徐州网站建设方案咨询做网站教程

63. Three.js案例-不同材质属性来增强3D对象的真实感

实现效果

知识点

WebGLRenderer (WebGL渲染器)

WebGLRenderer 是Three.js中最常用的渲染器之一，它允许开发者将3D图形渲染到网页上。构造函数如下：

new THREE.WebGLRenderer(parameters : Object)

参数	类型	描述
antialias	Boolean	是否开启抗锯齿，默认为false

PerspectiveCamera (透视相机)

用于模拟人眼观察世界的视角。构造函数如下：

new THREE.PerspectiveCamera(fov : Number, aspect : Number, near : Number, far : Number)

参数	类型	描述
fov	Number	视野角度
aspect	Number	宽高比
near	Number	近裁剪面距离
far	Number	远裁剪面距离

Scene (场景)

场景是所有物体、灯光等元素的容器。构造函数非常简单：

new THREE.Scene()

AmbientLight (环境光)

提供均匀的光照，没有方向性，适用于模拟自然光或背景光。构造函数如下：

new THREE.AmbientLight(color : Integer)

参数	类型	描述
color	Integer	光的颜色，使用十六进制表示

SpotLight (聚光灯)

模拟手电筒或舞台灯光的效果。构造函数如下：

new THREE.SpotLight(color : Integer, intensity : Float, distance : Float, angle : Radian, penumbra : Float, decay : Float)

参数	类型	描述
color	Integer	光的颜色，使用十六进制表示
intensity	Float	光强度，默认值为1
distance	Float	光的最大影响范围，默认无限远
angle	Radian	光锥的角度，默认π/3
penumbra	Float	半影区域的比例，默认为0
decay	Float	光衰减系数，默认为1

BoxGeometry (立方体几何体)

定义一个立方体的形状。构造函数如下：

new THREE.BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)

参数	类型	描述
width	Float	宽度
height	Float	高度
depth	Float	深度
widthSegments	Integer	宽度分段数，默认为1
heightSegments	Integer	高度分段数，默认为1
depthSegments	Integer	深度分段数，默认为1

MeshPhongMaterial (网格Phong材质)

基于Phong光照模型的材质，支持多种纹理映射。构造函数如下：

new THREE.MeshPhongMaterial(parameters : Object)

参数	类型	描述
color	Color	基础颜色，默认为白色
specular	Color	镜面反射颜色，默认为暗灰色
shininess	Float	高光强度，默认为30
map	Texture	普通贴图
normalMap	Texture	法向贴图
normalScale	Vector2	法向贴图缩放比例，默认为(1, 1)

TextureLoader (纹理加载器)

用于从文件加载纹理。构造函数如下：

new THREE.TextureLoader([manager : LoadingManager])

参数	类型	描述
manager	LoadingManager	加载管理器，默认为DefaultLoadingManager

animate() 函数

此函数实现了动画循环，不断请求下一帧并重新渲染场景。

<