ThreeJs入门11-光的初体验-光基类

2022-02-01 1,105 阅读2分钟

「这是我参与2022首次更文挑战的第15天，活动详情查看：2022首次更文挑战」

示例代码采用three.js-r73版本: cdnjs.cloudflare.com/ajax/libs/t…

世界是光的世界

宇宙间的物体有的是发光的，有的是不发光的，我们把发光的物体叫做光源。太阳、电灯、燃烧着的蜡烛等都是光源。
光是地球生命的来源之一。光是人类生活的依据。光是人类认识外部世界的工具。光是信息的理想载体或传播媒质。
简言之，在均匀的介质里，光是沿射线传播的，光的传播也不需要任何介质。

光的方向-小孔成像

用一个带有小孔的板遮挡在墙体与物之间，墙体上就会形成物的倒立的实像，我们把这样的一种现象叫小孔成像。前后移动中间的板，墙体上像的大小也会随之发生变化。
上述现象说明，光在同种均匀介质中沿直线传播，通常简称光的直线传播

threejs中的各种光源

在Threejs的世界里，有了光，就不会在黑暗。
threejs非常注重3D渲染效果真实性，对渲染真实来说，光源的使用技巧是其中必不可少的一部分。threejs在光源上提供了多种类。
THREE.Light 光源的基类
- THREE.AmbientLight 环境光
- THREE.DirectionalLight 平行光(方向光)
- THREE.SpotLight 聚灯光
- THREE.PointLight 点光源
- THREE.AreaLight 区域光

从上图可以看出，所有的具体光源都继承与THREE.Light类

光源基类

在Threejs中，光源用Light表示，它是所有光源的基类。

THREE.Light = function(color)

在计算机图形学里，光的最主要的一个属性是颜色。(在物理学里是波长～～),它有一个参数color，接受一个16进制的颜色值。例如要定义一种红色的光源，我们可以这样来定义：

Var redLight = new THREE.Light(0xFF0000);

在场景中不添加光源

我们在场景中不加任何光是什么样呢？请看下下面的代码

var cube;
function initObject() {
    var geometry = new THREE.CubeGeometry(200, 100, 50, 4, 4);
    // 定义材质为白色
    var material = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
    var mesh = new THREE.Mesh(geometry, material);
    mesh.position = new THREE.Vector3(0, 0, 0);
    scene.add(mesh);
}

我们只添加一个立方体，材质设置为白色的，不添加灯光，显示在页面上是黑色的，这个时候无论我们怎么改变材质颜色，它都是黑色的。

codepen示例代码： 结论：没有任何光的情况下，任何物体都是黑色的

总结

这一节我们主要讲了以下内容：

光的方向-小孔成像
光的分类
光源的基类
在场景中不添加光源效果展示

友情链接：