three.js光源的应用

最新推荐文章于 2024-10-23 16:57:41 发布

置顶

coder_路远

最新推荐文章于 2024-10-23 16:57:41 发布

阅读量1.3k

点赞数 2

分类专栏： Three.js入门 Three.js开发文章标签： THREE.AmbientLight THREE.PointLight THREE.SpotLight THREE.DirectionalLig

本文链接：https://blog.csdn.net/qq_37338983/article/details/78827015

版权

本文介绍了three.js中的四种基本光源：AmbientLight、PointLight、SpotLight和DirectionalLight，强调了AmbientLight在配合其他光源使用时的作用，并通过示例展示了不同光源的效果。此外，还提供了一个带有交互工具条的Demo来切换光源类型。

摘要由CSDN通过智能技术生成

学习交流欢迎加群：789723098，博主会将一些demo整理共享

three.js中定义了不同种类的光源，本节主要讲四种基本光源的应用：THREE.AmbientLight、THREE.PointLight、THREE.SpotLight和THREE.DirectionalLight。它们的介绍如下表：

THREE.AmbientLight	自然光源，该光源的颜色会叠加到场景现有物体的颜色上，不产生阴影
THREE.PointLight	点光源，从空间一点向所有方向射出光线，像太阳。不产生阴影
THREE.SpotLight	聚光灯光源，类似手电筒，台灯。可以产生阴影
THREE.DirectionalLight	平行光源，从这种光源发出的光线可以看作平行的，可创建阴影

从上表我们可以知道一些光源可一产生阴影，关于场景中阴影的创建可一参考：点击打开链接。值得注意的是，这几个光源中的THREE.AmbientLight要配合其他的光使用，才能达到弱化阴影或者给场景添加其他颜色的效果，如果单独使用，场景中的物体不管是什么颜色，都会被这个光源给覆盖。在接下来的Demo会做演示。为了展示这几种光源的效果，编写了一个小Demo，其运行效果如下：

自然光源：点光源：