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>

演示链接

示例链接

相关推荐
xhload3d9 分钟前
智能网联汽车云控平台 | 图扑数字孪生
3d·gis·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·车联网·智慧交通·智能网联·汽车云控
Mintopia1 天前
Three.js高效几何体创建指南:BufferGeometry深度解析
前端·javascript·three.js
贵州数擎科技有限公司1 天前
Threejs实现极坐标和平滑过渡特效
前端·three.js
答案answer1 天前
在失业的这一个多月里,我写了一个3D模型场景编辑器
vue.js·three.js·indexeddb
三木前端1 天前
像设计师一样处理图像,只需几行 JavaScript 代码!
前端·javascript·webgl
linweidong2 天前
前端Three.js面试题及参考答案
前端·javascript·vue.js·typescript·前端框架·three.js·前端面经
伶俜monster4 天前
模型苏醒计划:Threejs 让静态模型「叛逆」起来
前端·webgl·three.js
DragonBallSuper6 天前
在Cesium中使用ThreeJs材质(不是场景融合哦)
webgl·材质·threejs·cesium·可视化渲染
前端付杰6 天前
轻松搞定 TIFF:基于 Three.js 和 Cesium 的渲染技巧分享
前端·three.js·cesium
伶俜monster7 天前
Threejs 物理引擎高阶:作用力、休眠与组合体奥秘
前端·three.js