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>

演示链接

示例链接

相关推荐
刘皇叔code4 小时前
记一次用Three.js展示360°全景图的折腾
webgl·three.js
世伟爱吗喽2 天前
threejs入门学习日记
前端·javascript·three.js
拜无忧3 天前
three.js纸飞机飞行撞建筑
前端·three.js
拜无忧3 天前
three/文字爆裂效果
three.js
前端人类学4 天前
构筑数字夜空:Three.js 建筑群灯光特效全解析
javascript·three.js
xhload3d6 天前
场景切换 × 流畅过渡动画实现方案 | 图扑软件
物联网·3d·智慧城市·html5·动画·webgl·数字孪生·可视化·虚拟现实·工业互联网·工控·工业·2d·轻量化·过渡动画
柳杉7 天前
使用three.js搭建3d隧道监测-3
前端·javascript·three.js
三维搬砖者7 天前
06Threejs电影拍摄角度-第三章:搭建场景 - 初始化环境
three.js
sixgod_h8 天前
Threejs源码系列- renderer/webgl
three.js
陈小峰_iefreer10 天前
使用Stone 3D快速制作第一人称视角在线小游戏
游戏引擎·元宇宙·three.js·web3d