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);
相关推荐
rzl022 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang3 分钟前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼6 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿8 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再10 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55515 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录19 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空000020 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl21 分钟前
深度剖析Kafka读写机制
前端
FogLetter22 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css