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); // 将聚光灯添加到场景中
相关推荐
EterNity_TiMe_1 天前
上手 Rokid JSAR:新手也能快速入门的 AR 开发之旅
ar·js·rokid
TeleostNaCl3 天前
实战 | 使用 Chrome 开发者工具修改网页源码跳过前端校验
前端·chrome·经验分享·后端·js
吹晚风吧8 天前
什么是跨域?跨域怎么解决?跨域解决的是什么问题?
java·vue.js·js·cors
~无忧花开~10 天前
JavaScript学习笔记(十五):ES6模板字符串使用指南
开发语言·前端·javascript·vue.js·学习·es6·js
~无忧花开~10 天前
JavaScript学习笔记(十七):ES6生成器函数详解
开发语言·前端·javascript·笔记·学习·es6·js
一粒马豆15 天前
excel表格通过前端fetch上传至后端flask处理流程示例
前端·python·flask·excel·h5·js·fetch
恶猫25 天前
javascript文本长度检测与自动截取,用于标题长度检测
javascript·css·css3·js·自动检测·文本长度
闲人编程1 个月前
前端形态与样式风格:从古典到现代的视觉语言演进
前端·css·状态模式·组件·js·风格·响应式
走,板砖去1 个月前
WeakMap 应用场景与示例
js
Yvonne爱编码1 个月前
AJAX入门-AJAX 概念和 axios 使用
前端·javascript·ajax·html·js