網(wǎng)站掛馬解決自動點擊器
33. Three.js案例-創(chuàng)建帶陰影的球體與平面
實現(xiàn)效果
知識點
WebGLRenderer (WebGL渲染器)
WebGLRenderer 是 Three.js 中用于渲染 3D 場景的核心類。它負責將場景中的對象繪制到畫布上。
構(gòu)造器
new THREE.WebGLRenderer(parameters)
| 參數(shù) | 類型 | 描述 |
|---|---|---|
| parameters | Object | 可選參數(shù)對象，用于配置渲染器的各種屬性。 |
常用參數(shù)：
antialias：布爾值，是否開啟抗鋸齒，默認為false。alpha：布爾值，是否允許透明背景，默認為false。premultipliedAlpha：布爾值，是否使用預(yù)乘 alpha，默認為true。preserveDrawingBuffer：布爾值，是否保留繪圖緩沖區(qū)，默認為false。depth：布爾值，是否創(chuàng)建深度緩沖區(qū)，默認為true。stencil：布爾值，是否創(chuàng)建模板緩沖區(qū)，默認為true。logarithmicDepthBuffer：布爾值，是否使用對數(shù)深度緩沖區(qū)，默認為false。powerPreference：字符串，指定 GPU 的性能偏好，可選值為default、high-performance或low-power。
方法
setPixelRatio(value)：設(shè)置設(shè)備像素比。setSize(width, height, updateStyle)：設(shè)置渲染器的尺寸。setClearColor(color, alpha)：設(shè)置渲染器的背景顏色。render(scene, camera)：渲染場景。
Scene (場景)
Scene 是 Three.js 中用于存儲和管理所有 3D 對象的容器。
構(gòu)造器
new THREE.Scene()
PerspectiveCamera (透視相機)
PerspectiveCamera 是 Three.js 中用于創(chuàng)建透視投影的相機。
構(gòu)造器
new THREE.PerspectiveCamera(fov, aspect, near, far)
| 參數(shù) | 類型 | 描述 |
|---|---|---|
| fov | Number | 視野角度，以度為單位。 |
| aspect | Number | 相機的寬高比。 |
| near | Number | 近裁剪面距離，小于該距離的對象不會被渲染。 |
| far | Number | 遠裁剪面距離，大于該距離的對象不會被渲染。 |
方法
position.set(x, y, z)：設(shè)置相機的位置。lookAt(vector)：使相機看向指定的點。
SpotLight (聚光燈)
SpotLight 是 Three.js 中用于創(chuàng)建聚光燈的光源。
構(gòu)造器
new THREE.SpotLight(color, intensity, distance, angle, penumbra, decay)
| 參數(shù) | 類型 | 描述 |
|---|---|---|
| color | Color | 光源的顏色。 |
| intensity | Number | 光源的強度，默認為 1。 |
| distance | Number | 光源的最大影響距離，默認為 0（無限遠）。 |
| angle | Number | 光源的光照角度，默認為 Math.PI/3。 |
| penumbra | Number | 光源的半影區(qū)域，默認為 0。 |
| decay | Number | 光源的衰減，默認為 1。 |
屬性
castShadow：布爾值，是否投射陰影，默認為false。
Mesh (網(wǎng)格)
Mesh 是 Three.js 中用于創(chuàng)建 3D 對象的基本類。
構(gòu)造器
new THREE.Mesh(geometry, material)
| 參數(shù) | 類型 | 描述 |
|---|---|---|
| geometry | Geometry | 網(wǎng)格的幾何體。 |
| material | Material | 網(wǎng)格的材質(zhì)。 |
屬性
castShadow：布爾值，是否投射陰影，默認為false。receiveShadow：布爾值，是否接收陰影，默認為false。
SphereBufferGeometry (球體幾何體)
SphereBufferGeometry 是 Three.js 中用于創(chuàng)建球體幾何體的類。
構(gòu)造器
new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)
| 參數(shù) | 類型 | 描述 |
|---|---|---|
| radius | Number | 球體的半徑。 |
| widthSegments | Number | 經(jīng)度方向上的分段數(shù)，默認為 8。 |
| heightSegments | Number | 緯度方向上的分段數(shù)，默認為 6。 |
| phiStart | Number | 經(jīng)度起始角度，默認為 0。 |
| phiLength | Number | 經(jīng)度范圍，默認為 2 * Math.PI。 |
| thetaStart | Number | 緯度起始角度，默認為 0。 |
| thetaLength | Number | 緯度范圍，默認為 Math.PI。 |
PlaneGeometry (平面幾何體)
PlaneGeometry 是 Three.js 中用于創(chuàng)建平面幾何體的類。
構(gòu)造器
new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
| 參數(shù) | 類型 | 描述 |
|---|---|---|
| width | Number | 平面的寬度。 |
| height | Number | 平面的高度。 |
| widthSegments | Number | 寬度方向上的分段數(shù)，默認為 1。 |
| heightSegments | Number | 高度方向上的分段數(shù)，默認為 1。 |
MeshNormalMaterial (網(wǎng)格法線材質(zhì))
MeshNormalMaterial 是 Three.js 中用于顯示網(wǎng)格法線的材質(zhì)。
構(gòu)造器
new THREE.MeshNormalMaterial(parameters)
| 參數(shù) | 類型 | 描述 |
|---|---|---|
| parameters | Object | 可選參數(shù)對象，用于配置材質(zhì)的各種屬性。 |
常用參數(shù)：
wireframe：布爾值，是否以線框模式顯示，默認為false。transparent：布爾值，是否允許透明，默認為false。
MeshStandardMaterial (網(wǎng)格標準材質(zhì))
MeshStandardMaterial 是 Three.js 中用于創(chuàng)建物理上準確的標準材質(zhì)。
構(gòu)造器
new THREE.MeshStandardMaterial(parameters)
| 參數(shù) | 類型 | 描述 |
|---|---|---|
| parameters | Object | 可選參數(shù)對象，用于配置材質(zhì)的各種屬性。 |
常用參數(shù)：
color：顏色值，材質(zhì)的顏色。metalness：浮點數(shù)，金屬度，默認為 0。roughness：浮點數(shù)，粗糙度，默認為 1。
Vector3 (三維向量)
Vector3 是 Three.js 中用于表示三維向量的類。
構(gòu)造器
new THREE.Vector3(x, y, z)
| 參數(shù) | 類型 | 描述 |
|---|---|---|
| x | Number | 向量的 x 分量。 |
| y | Number | 向量的 y 分量。 |
| z | Number | 向量的 z 分量。 |
方法
set(x, y, z)：設(shè)置向量的各個分量。multiplyScalar(scalar)：將向量的各個分量乘以一個標量。
ShadowMap (陰影映射)
ShadowMap 是 Three.js 中用于啟用和配置陰影映射的功能。
屬性
enabled：布爾值，是否啟用陰影映射，默認為false。
代碼
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><script src="ThreeJS/three.js"></script><script src="ThreeJS/jquery.js"></script>
</head>
<body>
<div id="myContainer"></div>
<script>// 創(chuàng)建渲染器var myRenderer = new THREE.WebGLRenderer();myRenderer.setPixelRatio(window.devicePixelRatio);myRenderer.setSize(480, 320);myRenderer.setClearColor('white', 1);// 創(chuàng)建場景var myScene = new THREE.Scene();// 創(chuàng)建相機var myCamera = new THREE.PerspectiveCamera(45, 480 / 320, 0.1, 1000);myCamera.position.set(4, 4, 2);myCamera.position.multiplyScalar(2);myCamera.lookAt(new THREE.Vector3(0, 0, 0));// 啟用陰影映射myRenderer.shadowMap.enabled = true;// 添加渲染器到容器$("#myContainer").append(myRenderer.domElement);// 創(chuàng)建聚光燈var mySpotLight = new THREE.SpotLight('white');mySpotLight.position.set(-3, 46, -1);mySpotLight.distance = 80;mySpotLight.angle = Math.PI / 50;mySpotLight.castShadow = true;myScene.add(mySpotLight);// 創(chuàng)建球體var mySphereGeometry = new THREE.SphereBufferGeometry(2, 36, 36);var mySphereMaterial = new THREE.MeshNormalMaterial({wireframe: true,transparent: true});var mySphereMesh = new THREE.Mesh(mySphereGeometry, mySphereMaterial);mySphereMesh.position.set(0, 2.5, 0);mySphereMesh.castShadow = true;myScene.add(mySphereMesh);// 創(chuàng)建平面var myPlaneGeometry = new THREE.PlaneGeometry(120, 120, 1, 1);var myPlaneMaterial = new THREE.MeshStandardMaterial({color: 'white'});var myPlaneMesh = new THREE.Mesh(myPlaneGeometry, myPlaneMaterial);myPlaneMesh.rotateX(-Math.PI / 2);myPlaneMesh.rotateZ(-Math.PI / 7);myPlaneMesh.position.set(0, -3.5, 0);myPlaneMesh.receiveShadow = true;myScene.add(myPlaneMesh);// 渲染場景myRenderer.render(myScene, myCamera);
</script>
</body>
</html>
演示鏈接
示例鏈接