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>

演示链接

示例链接

相关推荐
小桥风满袖4 小时前
Three.js-硬要自学系列15 (圆弧顶点、几何体方法、曲线简介、圆、椭圆、样条曲线、贝塞尔曲线)
前端·css·three.js
supermapsupport7 小时前
SuperMap GIS基础产品FAQ集锦(20250421)
服务器·webgl·supermap·idesktop
zhu_zhu_xia7 小时前
JS通过GetCapabilities获取wms服务元数据信息并在SuperMap iClient3D for WebGL进行叠加显示
javascript·3d·webgl
伶俜monster8 小时前
光影编程师:Threejs Shader 基础全攻略
前端·webgl·three.js
小桥风满袖8 小时前
Three.js-硬要自学系列14 (PBR材质、环境贴图、清漆层、物理材质透光率)
前端·css·three.js
Mintopia8 小时前
Three.js 物体碰撞试验学习指南
前端·javascript·three.js
烛阴19 小时前
Swizzling--OpenGL的向量的灵活组合
前端·webgl
小桥风满袖1 天前
Three.js-硬要自学系列13 (加载gltf外部模型、加载大模型)
前端·css·three.js
前端小崔1 天前
从零开始学习three.js(14):一文详解three.js中的场景Scene
webgl·three.js·数据可视化
小桥风满袖1 天前
Three.js-硬要自学系列12 (各种贴图的综合应用)
前端·css·three.js