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); // 将聚光灯添加到场景中
相关推荐
万水千山走遍TML17 小时前
JavaScript性能优化
开发语言·前端·javascript·性能优化·js·js性能
90后小陈老师1 天前
WebXR教学 05 项目3 太空飞船小游戏
windows·3d·web·js
小壮哥哥2 天前
axios 取消上次重复请求
vue.js·react.js·js
Edward.W4 天前
模型上下文协议(MCP)详解
python·网络协议·go·js
CrawlerCracker9 天前
小程序逆向|六六找房|请求头Authorization
javascript·爬虫·python·小程序·网络爬虫·js
前端_yu小白9 天前
js原型和原型链
javascript·原型·js·原型链·重写原型·function与object
爱因斯坦乐10 天前
【HTML】动态背景效果前端页面
前端·javascript·css·html·js
zooKevin13 天前
vue2基于video.js,v8.21.0自己设计一个视频播放器
音视频·js
upp14 天前
[bug]解决vscode+cline使用mcp服务报错spawn npx enoent spawn npx enoent
ide·vscode·bug·js
小熊不忙15 天前
如何实现一个无缝无限轮播时间轴...
vue·js