当前位置：首页 > article >正文

33. Three.js案例-创建带阴影的球体与平面

article 2025/3/6 14:29:43

33. Three.js案例-创建带阴影的球体与平面

实现效果

知识点

WebGLRenderer (WebGL渲染器)

WebGLRenderer 是 Three.js 中用于渲染 3D 场景的核心类。它负责将场景中的对象绘制到画布上。

构造器

new THREE.WebGLRenderer(parameters)

参数	类型	描述
parameters	Object	可选参数对象，用于配置渲染器的各种属性。

常用参数：

antialias：布尔值，是否开启抗锯齿，默认为 false。
alpha：布尔值，是否允许透明背景，默认为 false。
premultipliedAlpha：布尔值，是否使用预乘 alpha，默认为 true。
preserveDrawingBuffer：布尔值，是否保留绘图缓冲区，默认为 false。
depth：布尔值，是否创建深度缓冲区，默认为 true。
stencil：布尔值，是否创建模板缓冲区，默认为 true。
logarithmicDepthBuffer：布尔值，是否使用对数深度缓冲区，默认为 false。
powerPreference：字符串，指定 GPU 的性能偏好，可选值为 default、high-performance 或 low-power。

方法

setPixelRatio(value)：设置设备像素比。
setSize(width, height, updateStyle)：设置渲染器的尺寸。
setClearColor(color, alpha)：设置渲染器的背景颜色。
render(scene, camera)：渲染场景。

Scene (场景)

Scene 是 Three.js 中用于存储和管理所有 3D 对象的容器。

构造器

new THREE.Scene()

PerspectiveCamera (透视相机)

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)：使相机看向指定的点。

SpotLight (聚光灯)

SpotLight 是 Three.js 中用于创建聚光灯的光源。

构造器

new THREE.SpotLight(color, intensity, distance, angle, penumbra, decay)

参数	类型	描述
color	Color	光源的颜色。
intensity	Number	光源的强度，默认为 1。
distance	Number	光源的最大影响距离，默认为 0（无限远）。
angle	Number	光源的光照角度，默认为 Math.PI/3。
penumbra	Number	光源的半影区域，默认为 0。
decay	Number	光源的衰减，默认为 1。

属性

castShadow：布尔值，是否投射阴影，默认为 false。

Mesh (网格)

Mesh 是 Three.js 中用于创建 3D 对象的基本类。

构造器

new THREE.Mesh(geometry, material)

参数	类型	描述
geometry	Geometry	网格的几何体。
material	Material	网格的材质。

属性

castShadow：布尔值，是否投射阴影，默认为 false。
receiveShadow：布尔值，是否接收阴影，默认为 false。

SphereBufferGeometry (球体几何体)

SphereBufferGeometry 是 Three.js 中用于创建球体几何体的类。

构造器

new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)

参数	类型	描述
radius	Number	球体的半径。
widthSegments	Number	经度方向上的分段数，默认为 8。
heightSegments	Number	纬度方向上的分段数，默认为 6。
phiStart	Number	经度起始角度，默认为 0。
phiLength	Number	经度范围，默认为 2 * Math.PI。
thetaStart	Number	纬度起始角度，默认为 0。
thetaLength	Number	纬度范围，默认为 Math.PI。

PlaneGeometry (平面几何体)

PlaneGeometry 是 Three.js 中用于创建平面几何体的类。

构造器

new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)

参数	类型	描述
width	Number	平面的宽度。
height	Number	平面的高度。
widthSegments	Number	宽度方向上的分段数，默认为 1。
heightSegments	Number	高度方向上的分段数，默认为 1。

MeshNormalMaterial (网格法线材质)

MeshNormalMaterial 是 Three.js 中用于显示网格法线的材质。

构造器

new THREE.MeshNormalMaterial(parameters)

参数	类型	描述
parameters	Object	可选参数对象，用于配置材质的各种属性。

常用参数：

wireframe：布尔值，是否以线框模式显示，默认为 false。
transparent：布尔值，是否允许透明，默认为 false。

MeshStandardMaterial (网格标准材质)

MeshStandardMaterial 是 Three.js 中用于创建物理上准确的标准材质。

构造器

new THREE.MeshStandardMaterial(parameters)

参数	类型	描述
parameters	Object	可选参数对象，用于配置材质的各种属性。

常用参数：

color：颜色值，材质的颜色。
metalness：浮点数，金属度，默认为 0。
roughness：浮点数，粗糙度，默认为 1。

Vector3 (三维向量)

Vector3 是 Three.js 中用于表示三维向量的类。

构造器

new THREE.Vector3(x, y, z)

参数	类型	描述
x	Number	向量的 x 分量。
y	Number	向量的 y 分量。
z	Number	向量的 z 分量。

方法

set(x, y, z)：设置向量的各个分量。
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>
    // 创建渲染器
    var myRenderer = new THREE.WebGLRenderer();
    myRenderer.setPixelRatio(window.devicePixelRatio);
    myRenderer.setSize(480, 320);
    myRenderer.setClearColor('white', 1);

    // 创建场景
    var myScene = new THREE.Scene();

    // 创建相机
    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);

    // 创建聚光灯
    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);

    // 创建球体
    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);

    // 创建平面
    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>