34. Three.js案例-创建球体与模糊阴影

实现效果

知识点

WebGLRenderer

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

构造器

javascript 复制代码

new THREE.WebGLRenderer(parameters)

参数	类型	描述
parameters	Object	可选参数对象，包含以下属性：
antialias	Boolean	是否开启抗锯齿，默认为 `false`。
alpha	Boolean	是否透明，默认为 `false`。
premultipliedAlpha	Boolean	是否使用预乘 Alpha，默认为 `true`。
preserveDrawingBuffer	Boolean	是否保留绘图缓冲区，默认为 `false`。
stencil	Boolean	是否启用模板缓冲区，默认为 `true`。
depth	Boolean	是否启用深度缓冲区，默认为 `true`。

方法

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

Scene

Scene 是 Three.js 中用于存储场景中所有对象的容器。

构造器

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): 设置相机的朝向。

DirectionalLight

DirectionalLight 是 Three.js 中用于创建方向光的类。

构造器

javascript 复制代码

new THREE.DirectionalLight(color, intensity)

参数	类型	描述
color	Color	光源颜色。
intensity	Number	光源强度，默认为 `1`。

属性

castShadow: 是否投射阴影，默认为 false。
shadow.radius: 阴影半径，用于产生模糊效果。

SphereBufferGeometry

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

构造器

javascript 复制代码

new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments)

参数	类型	描述
radius	Number	球体半径。
widthSegments	Number	经度方向上的分段数，默认为 `8`。
heightSegments	Number	纬度方向上的分段数，默认为 `6`。

Mesh

Mesh 是 Three.js 中用于创建网格对象的类。

构造器

javascript 复制代码

new THREE.Mesh(geometry, material)

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

属性

castShadow: 是否投射阴影，默认为 false。
receiveShadow: 是否接收阴影，默认为 false。

PlaneGeometry

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

构造器

javascript 复制代码

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

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

MeshStandardMaterial

MeshStandardMaterial 是 Three.js 中用于创建标准材质的类。

构造器

javascript 复制代码

new THREE.MeshStandardMaterial(parameters)

参数	类型	描述
color	Color	材质颜色。
metalness	Number	金属度，默认为 `0`。
roughness	Number	粗糙度，默认为 `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): 设置向量的坐标。
rotateX(angle): 绕 X 轴旋转。
rotateY(angle): 绕 Y 轴旋转。
rotateZ(angle): 绕 Z 轴旋转。

代码

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);
    myRenderer.shadowMap.enabled = true;
    $("#myContainer").append(myRenderer.domElement);

    // 创建场景
    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));

    // 创建方向光
    var myLight = new THREE.DirectionalLight('white', 1);
    myLight.castShadow = true;
    myLight.position.set(0, 14, 0);
    myLight.shadow.radius = 16;
    myScene.add(myLight);

    // 创建球体
    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, -4.5, 0);
    myPlaneMesh.receiveShadow = true;
    myScene.add(myPlaneMesh);

    // 渲染场景
    myRenderer.render(myScene, myCamera);
</script>
</body>
</html>

演示链接

示例链接