61. Three.js案例-彩色旋转立方体创建与材质应用

实现效果

知识点

WebGLRenderer（WebGL渲染器）

构造器

WebGLRenderer( parameters : Object )

参数	类型	描述
antialias	Boolean	是否执行抗锯齿（默认false）
alpha	Boolean	是否包含alpha通道（默认false）

方法

setSize( width : Integer, height : Integer )
设置输出canvas尺寸，参数接受像素单位整数

PerspectiveCamera（透视相机）

构造器

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )

参数	类型	描述
fov	Number	垂直视野角度（40-85度最佳）
aspect	Number	长宽比（通常设为窗口宽高比）
near	Number	近裁剪面距离（>0）
far	Number	远裁剪面距离（必须>near）

BoxGeometry（立方几何体）

构造器

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

参数	类型	默认值	描述
width	Float	1	X轴方向宽度
height	Float	1	Y轴方向高度
depth	Float	1	Z轴方向深度
widthSegments	Integer	1	宽度方向面片划分数
heightSegments	Integer	1	高度方向面片划分数
depthSegments	Integer	1	深度方向面片划分数

MeshBasicMaterial（基础网格材质）

构造参数

{ color: Color, wireframe: Boolean, transparent: Boolean }

参数	类型	描述
color	Color	材质颜色（支持十六进制/颜色名）
wireframe	Boolean	是否显示线框（默认false）
transparent	Boolean	是否启用透明度（默认false）

特性

• 不受光照影响的平面着色材质
• 支持颜色动画过渡
• 可设置opacity属性控制透明度（需开启transp