22. Three.js案例-創建旋轉的圓環面
實現效果
知識點
WebGLRenderer (WebGL渲染器)
THREE.WebGLRenderer 是Three.js中最常用的渲染器，用于將場景渲染到WebGL畫布上。
構造器
new THREE.WebGLRenderer(parameters)
| 參數 | 類型 | 描述 |
|---|---|---|
| parameters | Object | 可選參數對象，用于配置渲染器。 |
常用參數：
antialias：布爾值，是否開啟抗鋸齒，默認為false。canvas：HTMLCanvasElement，指定渲染器使用的畫布，默認為自動創建。context：WebGLRenderingContext，指定渲染器使用的WebGL上下文，默認為自動創建。precision：字符串，指定著色器精度，可選值為"low","mediump","highp"，默認為"mediump"。alpha：布爾值，是否透明，默認為false。premultipliedAlpha：布爾值，是否使用預乘Alpha，默認為true。preserveDrawingBuffer：布爾值，是否保留繪制緩沖區，默認為false。depth：布爾值，是否啟用深度測試，默認為true。stencil：布爾值，是否啟用模板測試，默認為true。logarithmicDepthBuffer：布爾值，是否啟用對數深度緩沖，默認為false。failIfMajorPerformanceCaveat：布爾值，如果性能不佳則失敗，默認為false。
方法
setSize(width, height, updateStyle)：設置渲染器的尺寸。setClearColor(color, alpha)：設置渲染器的背景顏色。render(scene, camera)：渲染場景。
PerspectiveCamera (透視相機)
THREE.PerspectiveCamera 是Three.js中常用的透視相機，用于模擬人眼的透視效果。
構造器
new THREE.PerspectiveCamera(fov, aspect, near, far)
| 參數 | 類型 | 描述 |
|---|---|---|
| fov | Number | 視野角度，以度為單位。 |
| aspect | Number | 相機的寬高比。 |
| near | Number | 近裁剪面距離。 |
| far | Number | 遠裁剪面距離。 |
方法
position.set(x, y, z)：設置相機的位置。lookAt(vector)：使相機看向指定的點。
Scene (場景)
THREE.Scene 是Three.js中的場景對象，用于存儲所有的物體、光源和相機。
構造器
new THREE.Scene()
方法
add(object)：將物體添加到場景中。remove(object)：從場景中移除物體。
AmbientLight (環境光)
THREE.AmbientLight 是Three.js中的環境光源，用于模擬環境光。
構造器
new THREE.AmbientLight(color, intensity)
| 參數 | 類型 | 描述 |
|---|---|---|
| color | Color | 光源顏色。 |
| intensity | Number | 光源強度，默認為 1。 |
DirectionalLight (方向光)
THREE.DirectionalLight 是Three.js中的方向光源，用于模擬太陽光。
構造器
new THREE.DirectionalLight(color, intensity)
| 參數 | 類型 | 描述 |
|---|---|---|
| color | Color | 光源顏色。 |
| intensity | Number | 光源強度，默認為 1。 |
方法
position.set(x, y, z)：設置光源的位置。
TextureLoader (紋理加載器)
THREE.TextureLoader 用于加載紋理貼圖。
構造器
new THREE.TextureLoader(manager)
| 參數 | 類型 | 描述 |
|---|---|---|
| manager | LoadingManager | 加載管理器，默認為 DefaultLoadingManager。 |
方法
load(url, onLoad, onProgress, onError)：加載紋理貼圖。setCrossOrigin(value)：設置跨域請求標志。
MeshLambertMaterial (網格Lambert材質)
THREE.MeshLambertMaterial 是一種簡單的漫反射材質，適用于不帶鏡面反射的表面。
構造器
new THREE.MeshLambertMaterial(parameters)
| 參數 | 類型 | 描述 |
|---|---|---|
| parameters | Object | 可選參數對象，用于配置材質。 |
常用參數：
color：材質顏色。map：紋理貼圖。side：渲染面，默認為THREE.FrontSide，可選值為THREE.BackSide和THREE.DoubleSide。
RingGeometry (圓環幾何體)
THREE.RingGeometry 用于創建一個圓環幾何體。
構造器
new THREE.RingGeometry(innerRadius, outerRadius, thetaSegments, phiSegments, thetaStart, thetaLength)
| 參數 | 類型 | 描述 |
|---|---|---|
| innerRadius | Number | 內半徑。 |
| outerRadius | Number | 外半徑。 |
| thetaSegments | Number | 圓周上的分段數。 |
| phiSegments | Number | 半徑上的分段數。 |
| thetaStart | Number | 開始角度，以弧度為單位。 |
| thetaLength | Number | 扇形的角度，以弧度為單位。 |
Mesh (網格)
THREE.Mesh 是Three.js中的網格對象，用于將幾何體和材質組合在一起。
構造器
new THREE.Mesh(geometry, material)
| 參數 | 類型 | 描述 |
|---|---|---|
| geometry | Geometry | 幾何體。 |
| material | Material | 材質。 |
方法
position.set(x, y, z)：設置網格的位置。rotation.set(x, y, z)：設置網格的旋轉角度。
動畫
requestAnimationFrame 用于請求瀏覽器在下一次重繪之前調用指定的函數。
方法
requestAnimationFrame(callback)：請求瀏覽器在下一次重繪之前調用指定的函數。
示例代碼
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><script src="ThreeJS/three.js"></script><script src="ThreeJS/jquery.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, window.innerWidth / window.innerHeight, 1, 1000);// 創建場景var myScene = new THREE.Scene();// 添加環境光myScene.add(new THREE.AmbientLight('yellow'));// 添加方向光var myLight = new THREE.DirectionalLight('white');myLight.position.set(0, 1, 0);myScene.add(myLight);// 加載紋理貼圖var myMap = new THREE.TextureLoader().load("images/img006.jpg");myMap.wrapS = myMap.wrapT = THREE.RepeatWrapping;myMap.anisotropy = 16;// 創建材質var myMaterial = new THREE.MeshLambertMaterial({map: myMap,side: THREE.DoubleSide});// 創建圓環幾何體var myGeometry = new THREE.RingGeometry(40, 180, 1000);// 創建網格var myMesh = new THREE.Mesh(myGeometry, myMaterial);myMesh.position.set(0, 0, 0);myScene.add(myMesh);// 渲染圓環面animate();function animate() {requestAnimationFrame(animate);var myTimer = Date.now() * 0.0001;myCamera.position.x = Math.cos(myTimer) * 400;myCamera.position.y = Math.cos(myTimer) * 400;myCamera.position.z = Math.sin(myTimer) * 400;myCamera.lookAt(myScene.position);myMesh.rotation.x = myTimer * 5;myMesh.rotation.y = myTimer * 3;myMesh.rotation.z = myTimer * 2;myRenderer.render(myScene, myCamera);}
</script>
</body>
</html>
演示鏈接
示例鏈接
![[ComfyUI]批量生成圖片的節點：輸入一個prompt列表批量生成圖像](http://pic.xiahunao.cn/[ComfyUI]批量生成圖片的節點：輸入一個prompt列表批量生成圖像)
 i18n國際化語言配置)
