61. Three.js案例-彩色旋转立方体创建与材质应用
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