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

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

实现效果

知识点

WebGLRenderer (WebGL渲染器)

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

构造器
javascript 复制代码
new THREE.WebGLRenderer(parameters)
参数 类型 描述
parameters Object 可选参数对象,用于配置渲染器的各种属性。

常用参数:

  • antialias:布尔值,是否开启抗锯齿,默认为 false
  • alpha:布尔值,是否允许透明背景,默认为 false
  • premultipliedAlpha:布尔值,是否使用预乘 alpha,默认为 true
  • preserveDrawingBuffer:布尔值,是否保留绘图缓冲区,默认为 false
  • depth:布尔值,是否创建深度缓冲区,默认为 true
  • stencil:布尔值,是否创建模板缓冲区,默认为 true
  • logarithmicDepthBuffer:布尔值,是否使用对数深度缓冲区,默认为 false
  • powerPreference:字符串,指定 GPU 的性能偏好,可选值为 defaulthigh-performancelow-power
方法
  • setPixelRatio(value):设置设备像素比。
  • setSize(width, height, updateStyle):设置渲染器的尺寸。
  • setClearColor(color, alpha):设置渲染器的背景颜色。
  • render(scene, camera):渲染场景。

Scene (场景)

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

构造器
javascript 复制代码
new THREE.Scene()

PerspectiveCamera (透视相机)

PerspectiveCamera 是 Three.js 中用于创建透视投影的相机。

构造器
javascript 复制代码
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 中用于创建聚光灯的光源。

构造器
javascript 复制代码
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 对象的基本类。

构造器
javascript 复制代码
new THREE.Mesh(geometry, material)
参数 类型 描述
geometry Geometry 网格的几何体。
material Material 网格的材质。
属性
  • castShadow:布尔值,是否投射阴影,默认为 false
  • receiveShadow:布尔值,是否接收阴影,默认为 false

SphereBufferGeometry (球体几何体)

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

构造器
javascript 复制代码
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 中用于创建平面几何体的类。

构造器
javascript 复制代码
new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
参数 类型 描述
width Number 平面的宽度。
height Number 平面的高度。
widthSegments Number 宽度方向上的分段数,默认为 1。
heightSegments Number 高度方向上的分段数,默认为 1。

MeshNormalMaterial (网格法线材质)

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

构造器
javascript 复制代码
new THREE.MeshNormalMaterial(parameters)
参数 类型 描述
parameters Object 可选参数对象,用于配置材质的各种属性。

常用参数:

  • wireframe:布尔值,是否以线框模式显示,默认为 false
  • transparent:布尔值,是否允许透明,默认为 false

MeshStandardMaterial (网格标准材质)

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

构造器
javascript 复制代码
new THREE.MeshStandardMaterial(parameters)
参数 类型 描述
parameters Object 可选参数对象,用于配置材质的各种属性。

常用参数:

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

Vector3 (三维向量)

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

构造器
javascript 复制代码
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

代码

html 复制代码
<!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>

演示链接

示例链接

相关推荐
爱看书的小沐15 小时前
【小沐学Web3D】three.js 加载三维模型(React Three Fiber)
javascript·react.js·webgl·three.js·opengl·web3d·reactthreefiber
爱看书的小沐2 天前
【小沐杂货铺】基于Three.JS绘制太阳系Solar System(GIS 、WebGL、vue、react)
javascript·vue.js·webgl·three.js·地球·太阳系·三维地球
Mintopia2 天前
深入理解 Three.js 中的 Mesh:构建 3D 世界的基石
前端·javascript·three.js
Mintopia3 天前
深入理解 Three.js 中的 PerspectiveCamera
前端·javascript·three.js
飞哥数智坊3 天前
AI编程实战:30分钟实现Web 3D船舶航行效果
人工智能·three.js
Mintopia4 天前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js
大松鼠君4 天前
轿车3D展示
前端·webgl·three.js
Mintopia4 天前
Three.js粒子系统开发实战:从基础到性能优化
前端·javascript·three.js
Mintopia4 天前
Three.js进阶实战:打造动态光影交互场景 ——结合环境光、聚光灯与相机控制的沉浸式体验
前端·javascript·three.js
伶俜monster5 天前
UV 法向量实验室:Threejs 纹理与光照炼金术
前端·webgl·three.js