網(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>
演示鏈接
示例鏈接