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(): 更新控制器狀態。
代碼
<!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>
演示鏈接
示例鏈接
)
