Three.js提供了多种类型的灯光

Three.js提供了多种类型的灯光,包括环境光、点光源、平行光源和聚光灯。这些灯光可以用来照亮场景中的物体,使其看起来更加真实。

  1. 环境光(AmbientLight):环境光会均匀地照亮场景中的所有物体,没有方向,不能用来投射阴影。创建环境光的代码如下:
html 复制代码
var ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 光的颜色为白色,强度为0.5 
scene.add(ambientLight); // 将环境光添加到场景中
  1. 点光源(PointLight):点光源是从一个点向四面八方发射光线的光源,可以用来模拟灯泡或者火炬等光源。创建点光源的代码如下:
html 复制代码
var pointLight = new THREE.PointLight(0xffffff, 1, 100); // 光的颜色为白色,强度为1,距离为100 
pointLight.position.set(0, 10, 0); // 设置光源的位置 scene.add(pointLight); // 将点光源添加到场景中
  1. 平行光源(DirectionalLight):平行光源是从一个方向发射的光线,可以用来模拟太阳等光源。创建平行光源的代码如下:
html 复制代码
var directionalLight = new THREE.DirectionalLight(0xffffff, 1); // 光的颜色为白色,强度为1 
directionalLight.position.set(0, 1, 0); // 设置光源的方向 
scene.add(directionalLight); // 将平行光源添加到场景中
  1. 聚光灯(SpotLight):聚光灯是从一个点向一个方向发射的光线,可以用来模拟手电筒等光源。创建聚光灯的代码如下:
html 复制代码
 var spotLight = new THREE.SpotLight(0xffffff, 1, 100); // 光的颜色为白色,强度为1,距离为100
 spotLight.position.set(0, 10, 0); // 设置光源的位置 
 spotLight.target.position.set(0, 0, 0); // 设置光源的目标位置 
 scene.add(spotLight); // 将聚光灯添加到场景中
相关推荐
小小龙学IT5 天前
第一节 QML 背景介绍
c++·qt·js
rockey6276 天前
C#脚本引擎之AScript与Jurassic、Jint对比
javascript·c#·.net·js·script·动态脚本
breeze jiang14 天前
NestJS MVC 实战:用 hello 项目 7 个文件讲清分层、装饰器、依赖注入与错误处理
node.js·mvc·js
weixin_4316004416 天前
前端数据埋点(1):一次点击如何变成一条埋点
前端·js·数据埋点
記億揺晃着的那天17 天前
NAS 内网域名访问为什么需要浏览器授权
网络·nginx·js·nas
—Qeyser17 天前
html 可视化海报模板编辑器
css·html·js
我命由我1234518 天前
CesiumJS 笔记 - 获取容器中心点、Cartesian3 clone 方法、修改 Cartesian3 对象的高度
前端·javascript·css·前端框架·html·html5·js
其美杰布-富贵-李24 天前
第 8 篇:Three.js 材质系统
javascript·three.js·js
. . . . .1 个月前
EJS模板引擎
js
shawxlee1 个月前
vue3在public下封装config.js自定义配置动态数据,可在打包后直接修改,方便后端部署及后续维护
前端·javascript·经验分享·vue·团队开发·js·项目优化