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>

演示链接

示例链接

相关推荐
Mintopia4 小时前
🌌 渲染的秘密花园:Three.js 中 WebGLRenderer 的魔法之旅与自定义 RenderPass 技巧
前端·javascript·three.js
烛阴17 小时前
Tile Pattern
前端·webgl
Mintopia1 天前
🎨当艺术遇上算法:Three.js 里的 SVG 与文字魔法
前端·javascript·three.js
Mintopia2 天前
🧠 Three.js + Web Workers:让你的帧率飞起来!
前端·javascript·three.js
平行云2 天前
实时云渲染将UE像素流嵌入业务系统,实现二维管理系统与数字孪生三维可视化程序的无缝交互
unity·webgl·数字孪生·云渲染·虚幻引擎·实时云渲染·像素流送
Mintopia2 天前
🌍 Three.js × 地理坐标:在地球上画一条银河
前端·javascript·three.js
orangleLi3 天前
Three.js海量渲染模型
前端·three.js
火柴就是我3 天前
每日见闻之Three.js 给球体贴个纹理图
three.js
火柴就是我3 天前
每日见闻之Three.js 绘制 球体 两个球体
three.js
Mintopia4 天前
Three.js 性能优化三部曲:从懒加载到实例化的底层奥秘
前端·javascript·three.js