ThreeJs学习笔记【day12】光照【2】

思乡码农
229 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情 >>

前言

借助上一篇构建的平面和球体立方体，这篇来添加不同的光源去查看效果

环境光

可以在场景内点击和拖拽鼠标来改变相机的位置，观察场景。

可以看到场景内的物体看起来没有立体感。环境光 AmbientLight只是简单地将材质的颜色与光照颜色进行叠加（PhotoShop 里的正片叠底模式），再乘以光照强度。

这就是环境光，它没有方向，无法产生阴影，场景内任何一点受到的光照强度都是相同的，除了改变场景内所有物体的颜色以外，不会使物体产生明暗的变化，看起来并不像真正意义上的光照。通常的作用是提亮场景，让暗部不要太暗。

半球光

半球光的颜色是从天空到地面两个颜色之间的渐变，与物体材质的颜色作叠加后得到最终的颜色效果。一个点受到的光照颜色是由所在平面的朝向（法向量）决定的 —— 面向正上方就受到天空的光照颜色，面向正下方就受到地面的光照颜色，其他角度则是两个颜色渐变区间的颜色。

相当于是一个径向渐变色，从天空到地面是渐变，再叠加物体材质本身的颜色，得到的就是半球光照射的颜色

const skyColor = 0xB1E1FF;  // light blue
const groundColor = 0xB97A20;  // brownish orange
const intensity = 1;
const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
// const light = new THREE.AmbientLight(color, intensity);
scene.add(light);

参数分别是 天空色，地面色，还有光照强度，效果是这样的

image.png

可以看到场景基本上也没有太大的立体感。半球光与其他类型光照结合使用，可以很好地表现天空和地面颜色照射到物体上时的效果。所以最好的使用场景就是与其他光照结合使用，或者作为环境光的一种替代方案

方向光

方向光通常是用来表示太阳照射在物体上的效果

 {
    const color = 0xFFFFFF;
    const intensity = 1;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(0, 10, 0);
    light.target.position.set(-5, 0, 0);
    scene.add(light);
    scene.add(light.target);
    const gui = new GUI();
    gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
    gui.add(light, 'intensity', 0, 2, 0.01);
    gui.add(light.target.position, 'x', -10, 10);
    gui.add(light.target.position, 'z', -10, 10);
    gui.add(light.target.position, 'y', 0, 10);
}

这里需要注意的是方向光的position和target属性，方向光也叫平行光，可以看做是无限远的地方射过来的平行光，因为太阳足够的远，所以射过来的光可以看做是平行的，position就是太阳的位置，tartget就是我们要照射的位置，这里我们上面可以看到，光源在Y轴正上方，tart设置为了X轴偏左，再加上我们上一章，球体的位置是 (-sphereRadius - 1, sphereRadius + 2, 0) 也就是X轴偏左，Y轴偏上的位置，那么，添加的方向光将会照射在球体偏右偏上的部分，像这样 / 照射进来的

image.png 为了更好的理解，我在代码片段中加入了有关光源postion和target控制的controls，大家可以点开代码片段调整尝试帮助理解

avatar
文章
阅读
粉丝