29. Three.js案例-自定义平面图形
实现效果
知识点
WebGLRenderer
WebGLRenderer 是 Three.js 中用于渲染 3D 场景的核心类。它利用 WebGL 技术在浏览器中渲染 3D 图形。
构造器
THREE.WebGLRenderer(parameters : object)
| 参数 | 类型 | 描述 |
|---|---|---|
| parameters | object | 可选参数对象，用于配置渲染器的各种属性。 |
常用参数：
antialias：布尔值，是否开启抗锯齿，默认为false。alpha：布尔值，是否允许透明背景，默认为false。preserveDrawingBuffer：布尔值，是否保留绘图缓冲区，默认为false。
方法
setSize(width : integer, height : integer): 设置渲染器的尺寸。setClearColor(color : Color, alpha : float): 设置渲染器的背景颜色。
Scene
Scene 是 Three.js 中用于存储和管理所有 3D 对象的容器。
构造器
THREE.Scene()
PointLight
PointLight 是 Three.js 中的一种光源，模拟点光源的效果。
构造器
THREE.PointLight(color : Color, intensity : float, distance : float, decay : float)
| 参数 | 类型 | 描述 |
|---|---|---|
| color | Color | 光源的颜色。 |
| intensity | float | 光源的强度，默认为 1。 |
| distance | float | 光源影响的最大距离，默认为 0，表示无限远。 |
| decay | float | 光源衰减系数，默认为 1。 |
PerspectiveCamera
PerspectiveCamera 是 Three.js 中的一种透视相机，用于模拟人眼的透视效果。
构造器
THREE.PerspectiveCamera(fov : float, aspect : float, near : float, far : float)
| 参数 | 类型 | 描述 |
|---|---|---|
| fov | float | 视野角度，单位为度。 |
| aspect | float | 相机的宽高比。 |
| near | float | 近裁剪面距离。 |
| far | float | 远裁剪面距离。 |
Shape
Shape 是 Three.js 中用于创建自定义平面图形的类。
构造器
THREE.Shape(points : Array)
| 参数 | 类型 | 描述 |
|---|---|---|
| points | Array | 一系列 Vector2 对象，表示图形的路径点。 |
方法
moveTo(x : float, y : float): 移动到指定的起始点。lineTo(x : float, y : float): 从当前点绘制直线到指定点。bezierCurveTo(cp1x : float, cp1y : float, cp2x : float, cp2y : float, x : float, y : float): 绘制三次贝塞尔曲线。quadraticCurveTo(cpx : float, cpy : float, x : float, y : float): 绘制二次贝塞尔曲线。splineThru(pts : Array): 绘制通过指定点的样条曲线。absarc(x : float, y : float, radius : float, startAngle : float, endAngle : float, clockwise : boolean): 绘制椭圆或圆弧。
Path
Path 是 Three.js 中用于创建路径的类，常用于绘制复杂的图形。
构造器
THREE.Path(points : Array)
| 参数 | 类型 | 描述 |
|---|---|---|
| points | Array | 一系列 Vector2 对象，表示路径的点。 |
方法
absellipse(x : float, y : float, xRadius : float, yRadius : float, startAngle : float, endAngle : float, anticlockwise : boolean):
绘制椭圆。
ExtrudeGeometry
ExtrudeGeometry 是 Three.js 中用于创建拉伸几何体的类。
构造器
THREE.ExtrudeGeometry(shapes : Shape or Array, options : object)
| 参数 | 类型 | 描述 |
|---|---|---|
| shapes | Shape or Array | 一个或多个 Shape 对象。 |
| options | object | 配置选项对象。 |
常用选项：
depth: 拉伸深度，默认为100。bevelEnabled: 是否启用倒角，默认为true。bevelThickness: 倒角厚度，默认为6。bevelSize: 倒角大小，默认为2。bevelOffset: 倒角偏移，默认为0。bevelSegments: 倒角段数，默认为3。extrudePath: 拉伸路径，可以是一个Curve对象。
Mesh
Mesh 是 Three.js 中用于创建网格对象的类，通常由几何体和材质组成。
构造器
THREE.Mesh(geometry : Geometry, material : Material)
| 参数 | 类型 | 描述 |
|---|---|---|
| geometry | Geometry | 几何体对象。 |
| material | Material | 材质对象。 |
方法
translateX(amount : float): 沿 X 轴移动指定距离。translateY(amount : float): 沿 Y 轴移动指定距离。translateZ(amount : float): 沿 Z 轴移动指定距离。scale(x : float, y : float, z : float): 缩放对象。
OrbitControls
OrbitControls 是 Three.js 中用于控制相机旋转、缩放和平移的控件。
构造器
THREE.OrbitControls(object : Camera, domElement : HTMLElement)
| 参数 | 类型 | 描述 |
|---|---|---|
| object | Camera | 控制的相机对象。 |
| domElement | HTMLElement | 控件绑定的 DOM 元素。 |
动画
requestAnimationFrame 是浏览器提供的用于请求动画帧的方法，常用于实现平滑的动画效果。
方法
requestAnimationFrame(callback : function): 请求下一个动画帧。
代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="ThreeJS/three.js"></script>
<script src="ThreeJS/jquery.js"></script>
<script src="ThreeJS/OrbitControls.js"></script>
</head>
<body>
<center id="myContainer"></center>
<script>
// 创建渲染器
var myRenderer = new THREE.WebGLRenderer({antialias: true});
myRenderer.setSize(window.innerWidth, window.innerHeight);
myRenderer.setClearColor('white', 1.0);
$("#myContainer").append(myRenderer.domElement);
// 创建场景
var myScene = new THREE.Scene();
// 创建点光源
var myPointLight = new THREE.PointLight('white');
myPointLight.position.set(320, 200, 400);
myScene.add(myPointLight);
// 创建相机
var myCamera = new THREE.PerspectiveCamera(45, 1, 1, 1000);
myCamera.position.set(200, 200, 200);
myCamera.up.x = -1;
myCamera.up.y = 1;
myCamera.up.z = -1;
myCamera.lookAt({x: 0, y: 0, z: 0});
// 绘制自定义平面图形
var myShape = new THREE.Shape();
myShape.moveTo(20, 10);
myShape.lineTo(20, 40);
myShape.bezierCurveTo(15, 25, -5, 25, -30, 40);
myShape.splineThru([new THREE.Vector2(-22, 30), new THREE.Vector2(-18, 20), new THREE.Vector2(-20, 10)]);
myShape.quadraticCurveTo(0, -15, 20, 10);
// 绘制椭圆（眼睛）
var myAbsellipse1 = new THREE.Path();
myAbsellipse1.absellipse(6, 20, 2, 3, 0, Math.PI * 2, true);
myShape.holes.push(myAbsellipse1);
var myAbsellipse2 = new THREE.Path();
myAbsellipse2.absellipse(-10, 20, 2, 3, 0, Math.PI * 2, true);
myShape.holes.push(myAbsellipse2);
// 绘制半圆弧（嘴巴）
var myAbsarc = new THREE.Path();
myAbsarc.absarc(0, 5, 2, 0, Math.PI, true);
myShape.holes.push(myAbsarc);
// 设置在 y 轴方向拉伸图形
var myCurve = new THREE.CatmullRomCurve3([
new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 1, 0)
]);
// 创建拉伸之后的平面图形
var myGeometry = new THREE.ExtrudeGeometry(myShape, {extrudePath: myCurve});
var myMaterial = new THREE.MeshPhongMaterial({color: 'cyan'});
var myMesh = new THREE.Mesh(myGeometry, myMaterial);
myMesh.translateX(-50);
myMesh.translateZ(-200);
myMesh.translateY(-150);
myMesh.scale.y = 6;
myMesh.scale.x = 6;
myMesh.scale.z = 6;
myScene.add(myMesh);
// 渲染自定义平面图形
animate();
function animate() {
myRenderer.render(myScene, myCamera);
requestAnimationFrame(animate);
}
// 创建轨道控制器
var myOrbitControls = new THREE.OrbitControls(myCamera);
</script>
</body>
</html>