28. Three.js案例-创建圆角矩形并进行拉伸
实现效果
知识点
WebGLRenderer (WebGL渲染器)
WebGLRenderer 是 Three.js 中用于渲染 3D 场景的主要渲染器。
构造器
WebGLRenderer( parameters : Object )
| 参数 | 类型 | 描述 |
|---|---|---|
| parameters | Object | 渲染器的配置参数，可选。 |
常用参数：
antialias：布尔值，是否开启抗锯齿，默认为false。alpha：布尔值，是否允许透明，默认为false。precision：字符串，指定着色器的精度，可选值为low,medium,high。
方法
setSize(width, height): 设置渲染器的尺寸。setClearColor(color, alpha): 设置渲染器的背景颜色和透明度。
PerspectiveCamera (透视相机)
PerspectiveCamera 是 Three.js 中用于创建透视投影相机的对象。
构造器
PerspectiveCamera(fov, aspect, near, far)
| 参数 | 类型 | 描述 |
|---|---|---|
| fov | Number | 视野角度，单位为度。 |
| aspect | Number | 相机的宽高比。 |
| near | Number | 近裁剪面距离。 |
| far | Number | 远裁剪面距离。 |
方法
position.set(x, y, z): 设置相机的位置。lookAt(vector): 设置相机的朝向。
Scene (场景)
Scene 是 Three.js 中用于存储和管理所有 3D 对象的容器。
构造器
Scene()
方法
add(object): 向场景中添加对象。remove(object): 从场景中移除对象。
PointLight (点光源)
PointLight 是 Three.js 中用于创建点光源的对象。
构造器
PointLight(color, intensity, distance, decay)
| 参数 | 类型 | 描述 |
|---|---|---|
| color | Color | 光源的颜色。 |
| intensity | Number | 光源的强度，默认为 1。 |
| distance | Number | 光源的最大影响距离，默认为 0，表示无限远。 |
| decay | Number | 光源的衰减系数，默认为 1。 |
方法
position.set(x, y, z): 设置光源的位置。
Shape (形状)
Shape 是 Three.js 中用于创建自定义 2D 形状的对象。
构造器
Shape(points)
| 参数 | 类型 | 描述 |
|---|---|---|
| points | Array | 一系列 Vector2 点，用于定义形状的轮廓。 |
方法
moveTo(x, y): 移动到指定点。lineTo(x, y): 从当前点画直线到指定点。quadraticCurveTo(cpx, cpy, x, y): 从当前点画二次贝塞尔曲线到指定点。
ExtrudeGeometry (拉伸几何体)
ExtrudeGeometry 是 Three.js 中用于创建拉伸几何体的对象。
构造器
ExtrudeGeometry(shape, options)
| 参数 | 类型 | 描述 |
|---|---|---|
| shape | Shape | 要拉伸的 2D 形状。 |
| options | Object | 拉伸选项，可选。 |
常用选项：
depth: 拉伸深度，默认为100。bevelEnabled: 是否启用倒角，默认为true。bevelThickness: 倒角厚度，默认为6。bevelSize: 倒角大小，默认为1。bevelOffset: 倒角偏移，默认为0。bevelSegments: 倒角段数，默认为1。extrudePath: 拉伸路径，可以是一个Curve对象。
Mesh (网格)
Mesh 是 Three.js 中用于创建网格对象的类。
构造器
Mesh(geometry, material)
| 参数 | 类型 | 描述 |
|---|---|---|
| geometry | Geometry | 网格的几何体。 |
| material | Material | 网格的材质。 |
方法
translateX(amount): 沿 X 轴移动指定距离。translateY(amount): 沿 Y 轴移动指定距离。translateZ(amount): 沿 Z 轴移动指定距离。scale.set(x, y, z): 设置网格的缩放比例。
MeshPhongMaterial (网格Phong材质)
MeshPhongMaterial 是 Three.js 中用于创建 Phong 着色材质的对象。
构造器
MeshPhongMaterial(parameters)
| 参数 | 类型 | 描述 |
|---|---|---|
| parameters | Object | 材质的配置参数，可选。 |
常用参数：
color: 材质的颜色。specular: 高光颜色，默认为0x111111。shininess: 高光强度，默认为30。
OrbitControls (轨道控制器)
OrbitControls 是 Three.js 中用于控制相机旋转、缩放和平移的控制器。
构造器
OrbitControls(camera, domElement)
| 参数 | 类型 | 描述 |
|---|---|---|
| camera | Camera | 控制的相机对象。 |
| domElement | DOMElement | 控制器绑定的 DOM 元素。 |
方法
update(): 更新控制器状态。
代码
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 myCamera = new THREE.PerspectiveCamera(45, 1, 1, 1000);
myCamera.position.set(200, 200, 200);
myCamera.lookAt({x: 0, y: 0, z: 0});
// 创建场景
var myScene = new THREE.Scene();
// 创建点光源
var myPointLight = new THREE.PointLight('white');
myPointLight.position.set(320, 200, 400);
myScene.add(myPointLight);
// 创建圆角矩形
var myShape = new THREE.Shape();
var x = 0, y = 0, myWidth = 30, myHeight = 40, myRadius = 6;
myShape.moveTo(x, y + myRadius);
myShape.lineTo(x, y + myHeight - myRadius);
myShape.quadraticCurveTo(x, y + myHeight, x + myRadius, y + myHeight);
myShape.lineTo(x + myWidth - myRadius, y + myHeight);
myShape.quadraticCurveTo(x + myWidth, y + myHeight, x + myWidth, y + myHeight - myRadius);
myShape.lineTo(x + myWidth, y + myRadius);
myShape.quadraticCurveTo(x + myWidth, y, x + myWidth - myRadius, y);
myShape.lineTo(x + myRadius, y);
myShape.quadraticCurveTo(x, y, x, y + myRadius);
// 设置拉伸圆角矩形的路径
var myCurve = new THREE.CatmullRomCurve3([
new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 30, 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(100);
myMesh.translateZ(100);
myMesh.translateY(0);
myScene.add(myMesh);
// 渲染圆角矩形
animate();
var step = 0;
function animate() {
myRenderer.render(myScene, myCamera);
step = step + 0.01;
var myScale = 2 * Math.sin(step) + 2;
myMesh.scale.y = myScale;
myMesh.scale.x = 2;
myMesh.scale.z = 2;
requestAnimationFrame(animate);
}
// 创建轨道控制器
var myOrbitControls = new THREE.OrbitControls(myCamera);
</script>
</body>
</html>