65.Three.js案例-使用 MeshNormalMaterial 和 MeshDepthMaterial 創建 3D 圖形
實現效果
在該案例中，Three.js 被用來創建一個包含多個 3D 對象的場景。其中包括：
- 圓環結（TorusKnot）
- 立方體（Box）
- 球體（Sphere）
這些對象使用 MeshNormalMaterial 來渲染，并且整個場景背景為白色，所有對象位于一個居中的容器中。
知識點
WebGLRenderer (WebGL 渲染器)
構造器
THREE.WebGLRenderer(parameters)
| 參數 | 類型 | 描述 |
|---|---|---|
| parameters | Object | 包含渲染器選項的對象 |
常用參數：
antialias：布爾值，啟用抗鋸齒以獲得更平滑的渲染結果。alpha：布爾值，是否支持透明背景（默認為黑色）。precision：字符串，著色器精度 (highp,mediump,lowp)。
方法
setSize(width, height, updateStyle)
設置渲染器的尺寸。
width：渲染器的寬度（像素）。height：渲染器的高度（像素）。updateStyle：是否更新 canvas 的樣式尺寸（可選，默認為true）。
setClearColor(color, opacity)
設置渲染器的清除顏色。
color：十六進制顏色值或 CSS 字符串表示的顏色。opacity：透明度（0.0 到 1.0）。
PerspectiveCamera (透視相機)
構造器
THREE.PerspectiveCamera(fov, aspect, near, far)
| 參數 | 類型 | 描述 |
|---|---|---|
| fov | Number | 視野角度（單位是度），即垂直視角范圍 |
| aspect | Number | 渲染區域的寬高比（通常用窗口寬度除以高度） |
| near | Number | 近裁剪面（相機視圖可見范圍的最近距離） |
| far | Number | 遠裁剪面（相機視圖可見范圍的最遠距離） |
方法
position.set(x, y, z)
設置相機的位置坐標。
lookAt(vector)
讓相機朝向指定的三維坐標點。
Scene (場景)
構造器
THREE.Scene()
用于創建一個空的場景對象，之后可以將相機、燈光、幾何體等添加到場景中。
屬性
overrideMaterial : Material
如果被賦值，則場景中的所有物體都會使用這個材質進行渲染，常用于調試。
translateX(value)
沿 X 軸移動整個場景。
MeshNormalMaterial (法線材質)
構造器
THREE.MeshNormalMaterial(options)
| 參數 | 類型 | 描述 |
|---|---|---|
| options | Object | 可選參數對象 |
常見參數：
wireframe：布爾值，是否顯示線框模式。flatShading：布爾值，是否使用平面著色。visible：布爾值，控制材質是否可見。
說明：此材質會根據物體表面的法線方向映射成 RGB 顏色，用于調試模型的表面方向。
TorusKnotGeometry (圓環結幾何體)
構造器
THREE.TorusKnotGeometry(radius, tube, tubularSegments, radialSegments, p, q)
| 參數 | 類型 | 描述 |
|---|---|---|
| radius | Number | 圓環結的主半徑 |
| tube | Number | 管道的半徑 |
| tubularSegments | Number | 管道分段數（越高越光滑） |
| radialSegments | Number | 徑向分段數（越高越光滑） |
| p | Number | 扭轉因子（控制打結的方式） |
| q | Number | 扭曲因子（控制打結的方式） |
BoxGeometry (立方體幾何體)
構造器
THREE.BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)
| 參數 | 類型 | 描述 |
|---|---|---|
| width | Number | 立方體寬度 |
| height | Number | 立方體高度 |
| depth | Number | 立方體深度 |
| widthSegments | Number | 寬度方向上的分段數 |
| heightSegments | Number | 高度方向上的分段數 |
| depthSegments | Number | 深度方向上的分段數 |
SphereGeometry (球體幾何體)
構造器
THREE.SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)
| 參數 | 類型 | 描述 |
|---|---|---|
| radius | Number | 球體半徑 |
| widthSegments | Number | 經線數量（越高越光滑） |
| heightSegments | Number | 緯線數量（越高越光滑） |
| phiStart | Number | 起始經度角（弧度） |
| phiLength | Number | 經度跨度（弧度） |
| thetaStart | Number | 起始緯度角（弧度） |
| thetaLength | Number | 緯度跨度（弧度） |
Mesh (網格模型)
構造器
THREE.Mesh(geometry, material)
| 參數 | 類型 | 描述 |
|---|---|---|
| geometry | Geometry | 幾何體對象 |
| material | Material | 材質對象 |
方法
translateX(value)
沿 X 軸方向移動模型。
代碼
<!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 type="text/javascript">// 創建渲染器并開啟抗鋸齒var myRenderer = new THREE.WebGLRenderer({antialias: true});myRenderer.setSize(window.innerWidth, window.innerHeight);myRenderer.setClearColor('white', 1.0);$('#myContainer')[0].appendChild(myRenderer.domElement);// 創建透視相機var myCamera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 30, 1000);myCamera.position.set(-76.03, 30.40, -48.87);myCamera.lookAt(new THREE.Vector3(0, 0, 0));// 創建場景var myScene = new THREE.Scene();myScene.overrideMaterial = new THREE.MeshDepthMaterial();myScene.translateX(30);// 創建法向量材質var myMaterial = new THREE.MeshNormalMaterial();// 創建圓環結var myTorusKnotGeometry = new THREE.TorusKnotGeometry(8, 3, 200, 60);var myTorusKnotMesh = new THREE.Mesh(myTorusKnotGeometry, myMaterial);myTorusKnotMesh.translateX(-62);myScene.add(myTorusKnotMesh);// 創建立方體var myBoxGeometry = new THREE.BoxGeometry(20, 20, 20);var myBoxMesh = new THREE.Mesh(myBoxGeometry, myMaterial);myBoxMesh.translateX(-20);myScene.add(myBoxMesh);// 創建球體var mySphereGeometry = new THREE.SphereGeometry(20, 60, 60);var mySphereMesh = new THREE.Mesh(mySphereGeometry, myMaterial);mySphereMesh.translateX(70);myScene.add(mySphereMesh);// 渲染場景myRenderer.render(myScene, myCamera);
</script>
</body>
</html>
演示鏈接
演示效果
)
![[Java實戰]Spring Boot 靜態資源配置（十三）](http://pic.xiahunao.cn/[Java實戰]Spring Boot 靜態資源配置（十三）)
 - 函數的定義與調用 (def, return))
