019-各种灯光和常用helper(一)

该系类文章主要用于记录学习three.js的过程,包括做的一些demo,笔记,以及个人思考;主要学习的课程是 神光的小册《three.js通关秘籍》,感兴趣的可以购买学习,质量还是可以的

DirectionalLight平行灯

说明

光线是平行的,一般用来实现太阳光,太阳光从很远的地方射过来,可以理解为就是平行光

用法和效果

ini 复制代码
const light = new THREE.DirectionalLight(0xffffff);
light.position.set(400, 500, 300);
light.lookAt(0, 0, 0);

PointLight 点光源

说明

从一个发射出来的光,类似于灯泡的灯光

用法和效果

ini 复制代码
const light = new THREE.PointLight(0xffffff, 1000000);
light.position.set(400, 500, 300);
light.lookAt(0, 0, 0);

AmbientLight 环境光

说明

均匀照射到物体上,用来照亮整个场景

用法和效果

ini 复制代码
const ambientLight = new THREE.AmbientLight(0xffffff);
mesh.add(ambientLight);

SpotLight 聚光灯

说明

比较聚拢的灯光,类似于手电筒的灯光效果,或则舞台的灯光效果

用法和效果

ini 复制代码
const light = new THREE.SpotLight(0xffffff, 1000000);
light.distance = 1000;
light.angle = Math.PI / 6;
light.position.set(400, 500, 300);
light.lookAt(0, 0, 0);
相关推荐
工业3D_大熊1 分钟前
3D Web轻量化引擎HOOPS Communicator赋能一线场景,支持本地化与动态展示?
前端·3d
某人的小眼睛5 分钟前
vue3 element-plus 大文件切片上传
前端·vue.js
东坡白菜8 分钟前
最快实现的前端灰度方案
前端
curdcv_po11 分钟前
🔴 你老说拿下 react,真的 拿下 了吗
前端
魔都吴所谓12 分钟前
[前端]HTML模拟实现一个基于摄像头的手势识别交互页面
前端·html·交互
来自星星的猫教授14 分钟前
Vue 3.6前瞻:响应式性能革命与Vapor模式展望
前端·javascript·vue.js
涵信18 分钟前
第九节 高频代码题-实现Sleep函数(异步控制)
前端·javascript·typescript
Kusunoki_D33 分钟前
Python 实现 Web 静态服务器(HTTP 协议)
服务器·前端·python
爱学习的茄子42 分钟前
【前端实战】三分钟掌握原生JS电影搜索应用,从此告别框架依赖
前端·javascript·深度学习
林太白44 分钟前
Next.js超简洁完整篇
前端·后端·react.js