为了账号安全,请及时绑定邮箱和手机立即绑定

ThreeJs 认识光和影

标签:
Html5

一、前言

这一篇文章我们主要来了解一下 ThreeJs 中关于光和影的相关知识点。通过给 3D 场景以及物体加上光照和阴影的效果使其能更真实的模拟现实从而也能使整个效果看起来更加的具有质感。

二、概述

ThreeJs 中给我们提供了多种光源下面请看类图以及相应的概述。

图片描述

光的基类是 Light其是继承自 Object3D 的。它作为一个对象被添加进了 Scene 中从而进行渲染的。影的基类是 LightShadow它是作为光的内部类供光照在内部进行阴影计算的我们不能直接构造它。如图并不是所有的光照都会产生阴影是否会产生阴影与光照所具备的特性有关。

三、认识光和影

下面我们来全面的认识一下 Three Js 中的光照和阴影对它们的相关特性以及使用的场景来做一个归纳。

3.1 Light

图片描述

3.2 AmbientLight

图片描述

图片描述

3.3 DirectionalLight

图片描述

图片描述

3.4 HemisphereLight

图片描述

图片描述

3.5 PointLight

图片描述

图片描述

3.6 RectAreaLight

图片描述

图片描述

3.7 SpotLight

图片描述

图片描述

四、总结

最后简单来总结一下

图片描述

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
移动开发工程师
手记
粉丝
4
获赞与收藏
29

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消