36. Three.js案例-创建带光照和阴影的球体与平面

36. Three.js案例-创建带光照和阴影的球体与平面

实现效果

知识点

Three.js基础

WebGLRenderer

WebGLRenderer 是Three.js中最常用的渲染器,用于将场景渲染到网页上。

构造器

javascript 复制代码
new THREE.WebGLRenderer(parameters)
参数 类型 描述
parameters object 可选参数,用于配置渲染器。包括但不限于 antialias(抗锯齿)、alpha(透明度)等。

方法

  • setPixelRatio(value): 设置设备像素比。
  • setSize(width, height): 设置渲染器的尺寸。
  • setClearColor(color, alpha): 设置渲染器的背景颜色。
  • shadowMap.enabled: 启用或禁用阴影映射。
  • render(scene, camera): 渲染场景。

Scene

Scene 是Three.js中的场景对象,用于存储所有需要渲染的对象。

构造器

javascript 复制代码
new THREE.Scene()

Camera

PerspectiveCamera 是Three.js中的一种透视相机,用于模拟人眼的视觉效果。

构造器

javascript 复制代码
new THREE.PerspectiveCamera(fov, aspect, near, far)
参数 类型 描述
fov float 视野角度,单位为度。
aspect float 相机宽高比。
near float 近裁剪面距离。
far float 远裁剪面距离。

方法

  • position.set(x, y, z): 设置相机的位置。
  • lookAt(vector): 设置相机的朝向。

PointLight

PointLight 是Three.js中的点光源,用于模拟从一个点发出的光。

构造器

javascript 复制代码
new THREE.PointLight(color, intensity, distance, decay)
参数 类型 描述
color color 光源颜色。
intensity float 光源强度。
distance float 光源的最大影响距离。如果为0,则表示无限远。
decay float 光源衰减系数。默认值为1。

属性

  • castShadow: 是否投射阴影。
  • distance: 光源的最大影响距离。
  • intensity: 光源强度。

SphereBufferGeometry

SphereBufferGeometry 用于创建一个球体几何体。

构造器

javascript 复制代码
new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)
参数 类型 描述
radius float 球体半径。
widthSegments int 经度方向上的分段数。默认值为8。
heightSegments int 纬度方向上的分段数。默认值为6。
phiStart float 球体起始经度。默认值为0。
phiLength float 球体经度范围。默认值为2π。
thetaStart float 球体起始纬度。默认值为0。
thetaLength float 球体纬度范围。默认值为π。

Mesh

Mesh 是Three.js中的网格对象,用于将几何体和材质组合在一起。

构造器

javascript 复制代码
new THREE.Mesh(geometry, material)
参数 类型 描述
geometry Geometry 几何体对象。
material Material 材质对象。

属性

  • castShadow: 是否投射阴影。
  • receiveShadow: 是否接收阴影。

PlaneGeometry

PlaneGeometry 用于创建一个平面几何体。

构造器

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

MeshStandardMaterial

MeshStandardMaterial 是Three.js中的一种标准材质,支持物理光照模型。

构造器

javascript 复制代码
new THREE.MeshStandardMaterial(parameters)
参数 类型 描述
parameters object 可选参数,用于配置材质。包括但不限于 color(颜色)、roughness(粗糙度)、metalness(金属度)等。

代码

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 myPointLight = new THREE.PointLight('white');
    myPointLight.position.set(0, 6, 0);
    myPointLight.distance = 380;
    myPointLight.castShadow = true;
    myScene.add(myPointLight);

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

演示链接

示例链接

相关推荐
刘皇叔code9 小时前
如何给Three.js中ExtrudeGeometry的不同面设置不同材质
webgl·three.js
vivo互联网技术17 小时前
拥抱新一代 Web 3D 引擎,Three.js 项目快速升级 Galacean 指南
前端·three.js
Nicander3 天前
上帝视角看 GPU 学习笔记
webgl·gpu
你真的可爱呀5 天前
5.Three.js 学习(基础+实践)
学习·three.js
平行云5 天前
赋能数字孪生:Paraverse平行云实时云渲染平台LarkXR,提供强大的API与SDK用于二次开发和深度集成
3d·unity·ue5·webgl·实时云渲染·云xr
战场小包7 天前
弟弟想看恐龙,用文心快码3.5S快速打造恐龙乐园,让弟弟看个够
前端·three.js·文心快码
入秋7 天前
Three.js后期处理实战:镜头颜色、色差、点阵与颜色管道的深度解析
前端·three.js
Becauseofyou1378 天前
如果你刚入门Three.js,这几个开源项目值得你去学习
前端·three.js