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);
相关推荐
To_OC21 小时前
面试被问了三回三栏布局,这次我终于把 BFC 那层窗户纸捅破了
前端·css·面试
To_OC21 小时前
啃完 TS 工具类型我发现:Pick 和 Omit 原来就是一层窗户纸
前端·面试·typescript
风月说与山鬼1 天前
三、大括号语法
前端·react.js
kyriewen1 天前
我把最常踩的8个CORS跨域报错整理了一遍——第8个去年还不存在
前端·javascript
Csvn1 天前
🕰️ 闭包 + setTimeout 的 5 个经典陷阱:为什么定时器看到的永远不是最新的值?
前端
lilian2331 天前
Harmony os 技术实战|拼豆制图27:用单字符编码承载 50 张 70×70 图纸
前端·数据库·华为·harmonyos
CarIise1 天前
CSS选择器与样式关联
前端·css·tensorflow
里欧跑得慢1 天前
CSS 模块化架构的演进:BEM、CSS Modules 到 CSS-in-JS 的反思
前端·css·flutter·web·css-in-js
IT_陈寒1 天前
Vue的computed属性把我坑惨了,原来我一直用错姿势
前端·人工智能·后端