0

0

Three.js源码阅读笔记(光照部分)_基础知识

php中文网

php中文网

发布时间:2016-05-16 17:45:21

|

1490人浏览过

|

来源于php中文网

原创

天气越来越冷了,人也越来越懒怠,越来越像呆在温暖的寝室里看小说或者打游戏,也好久没看three.js源码了。今天天气不错,接着看!

这次从光照部分看起:光照模型,从光线本身角度来看包括环境光、平行光、点光源,从物体表面材质角度看又包括漫反射和镜面反射。

lights:light

复制代码 代码如下:

THREE.Light = function ( hex ) {
THREE.Object3D.call( this );
this.color = new THREE.Color( hex );
};

该对象是其他光照对象的原型/基类,本身继承自Object3D对象/类型。它自身只有一个THREE.Color类型的color属性,就是颜色,这很好理解。

在Three.js中,光照作为一种Object3D对象,是经过Scene.add()方法加入到场景中的,渲染器会自动渲染所加入的光照效果。
Light::AmbientLight

复制代码 代码如下:

THREE.AmbientLight = function ( hex ) {
THREE.Light.call( this, hex );
};

无方向的环境光,并没有比Light类型多一个属性或方法,而仅仅为了语义上的继承而继承自Light,它甚至没有必要是Object3D对象。

Light::DirectionalLight

复制代码 代码如下:

THREE.DirectionalLight = function ( hex, intensity ) {
THREE.Light.call( this, hex );
this.position = new THREE.Vector3( 0, 1, 0 );
this.target = new THREE.Object3D();
this.intensity = ( intensity !== undefined ) ? intensity : 1;
this.castShadow = false;
this.onlyShadow = false;
// more settings about shadow ......
};

平行光(有方向的光),使用new运算符构造该函数时需传入颜色hex和光线的“密度”intensity。这个类有这样一些属性:
position:一个位置,以该位置为起点,原点为终点的方向是光线的方向。
intensity:光线的密度,默认为1。因为RGB的三个值均在0~255之间,不能反映出光照的强度变化,光照越强,物体表面就更明亮。
distance:衰减距离,默认值为0,光照无衰减;如果是非0值,光照会从position位置(实际上是position所处的那个平面)开始衰减,衰减到distance距离之后,光照强度intensity为0。
castShadow:布尔值,控制是否产生阴影,默认为false。如果设为true,对于所有表面都会逐像元地计算其在光照方向上是否被遮挡,这会消耗大量的计算。
onlyShadow:布尔值,控制是否只产生阴影而不“照亮”物体,默认为false。这种模式也许有什么特殊应用吧。
shadowCameraLeft,shadowCameraRight……系列,以position点为中心控制产生阴影的范围?
shadowBias:阴影偏心,默认为0。
shadowDarkness:阴影对物体亮度的影响,在0~1之间,默认为0.5。
还有不少属性暂时猜不出含义(真该去补补计算机图形学啊,硬着头皮继续看吧)。

Light::PointLight

复制代码 代码如下:

THREE.PointLight = function ( hex, intensity, distance ) {
THREE.Light.call( this, hex );
this.position = new THREE.Vector3( 0, 0, 0 );
this.intensity = ( intensity !== undefined ) ? intensity : 1;
this.distance = ( distance !== undefined ) ? distance : 0;
};

点光源,position那肯定就是光源点了。注意点光源的position和平行光的position的区别,前者默认在原点,而后者默认在点(0,1,1),这使得默认的平行光方向和相机的默认朝向一致。
其他两个属性和平行光中一样。PointLight点光源没有关于如何产生阴影的设定。

Light::SpotLight

MedPeer
MedPeer

AI驱动的一站式科研服务平台

下载
复制代码 代码如下:

THREE.SpotLight = function ( hex, intensity, distance, angle, exponent ) {
THREE.Light.call( this, hex );
this.position = new THREE.Vector3( 0, 1, 0 );
this.target = new THREE.Object3D();
this.intensity = ( intensity !== undefined ) ? intensity : 1;
this.distance = ( distance !== undefined ) ? distance : 0;
this.angle = ( angle !== undefined ) ? angle : Math.PI / 2;
this.exponent = ( exponent !== undefined ) ? exponent : 10; // more settings about shadow...
};

一种可以在某个方向上产生阴影的点光源,影响MeshLamberMaterial和MeshPhongMaterial类型材质的表面。对阴影如何处理的设定和DirectionLight一致。
总之,光照对象并不承担渲染光照的任务,而仅仅是定义如何渲染光照。
Object::Partical

复制代码 代码如下:
 
THREE.Particle = function ( material ) {
THREE.Object3D.call( this );
this.material = material;
};

粒子就是一个由材质的Object3D,这很好理解。Object3D对象提供一个坐标(就是粒子的坐标),负责粒子的运动,粒子只需要指定表现它的材质即可。

Object::ParticalSystem

复制代码 代码如下:

THREE.ParticleSystem = function ( geometry, material ) {
THREE.Object3D.call( this );
this.geometry = geometry;
this.material = ( material !== undefined ) ? material : new THREE.ParticleBasicMaterial( { color: Math.random() * 0xffffff } );
this.sortParticles = false;
if ( this.geometry ) {
if( this.geometry.boundingSphere === null ) {
this.geometry.computeBoundingSphere();
}
this.boundRadius = geometry.boundingSphere.radius;
}
this.frustumCulled = false;
};

粒子系统表现多个粒子的运动,粒子系统本身继承自是Object3D对象。有这样几个属性:
geometry属性,每一个节点都是一个粒子,这些共享一个材质。
material属性,即这些节点的材质。

frustumCulled属性,布尔值,如果设定为真,那么在相机视界之外的会被踢出,但还没弄清楚是粒子系统中心坐标在视界外就踢出整个粒子系统还是单个粒子出去了就剔除,猜测多半是后者。

其实这几篇都是涉及怎么定义场景的,至于怎么渲染场景很难有深入。我准备接下来去看Demo的代码,结合者看看WebGLRenderer类的源代码(几千行OMG)。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

797

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

272

2026.02.13

Flutter跨平台开发与状态管理实战
Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

144

2026.02.13

TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

25

2026.02.13

Redis高可用架构与分布式缓存实战
Redis高可用架构与分布式缓存实战

本专题围绕 Redis 在高并发系统中的应用展开,系统讲解主从复制、哨兵机制、Cluster 集群模式及数据分片原理。内容涵盖缓存穿透与雪崩解决方案、分布式锁实现、热点数据优化及持久化策略。通过真实业务场景演示,帮助开发者构建高可用、可扩展的分布式缓存系统。

92

2026.02.13

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

53

2026.02.12

雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法
雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法

本专题系统整理雨课堂网页版官方入口及在线登录方式,涵盖账号登录流程、官方直连入口及平台访问方法说明,帮助师生用户快速进入雨课堂在线教学平台,实现便捷、高效的课程学习与教学管理体验。

15

2026.02.12

豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法
豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法

本专题汇总豆包AI官方网页版入口及在线使用方式,涵盖智能写作工具、图片生成体验入口和官网登录方法,帮助用户快速直达豆包AI平台,高效完成文本创作与AI生图任务,实现便捷智能创作体验。

717

2026.02.12

PostgreSQL性能优化与索引调优实战
PostgreSQL性能优化与索引调优实战

本专题面向后端开发与数据库工程师,深入讲解 PostgreSQL 查询优化原理与索引机制。内容包括执行计划分析、常见索引类型对比、慢查询优化策略、事务隔离级别以及高并发场景下的性能调优技巧。通过实战案例解析,帮助开发者提升数据库响应速度与系统稳定性。

64

2026.02.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
光速学会docker容器
光速学会docker容器

共33课时 | 2万人学习

10分钟--Midjourney创作自己的漫画
10分钟--Midjourney创作自己的漫画

共1课时 | 0.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号