Three.js光影渲染：揭秘三原色背后的色彩世界

前端

2023-04-22 23:28:22

Three.js 光源和色彩模式：为虚拟世界注入生机

在 Three.js 中，光源是营造逼真场景的关键。恰当的光源设置可以赋予场景深度、质感和氛围。而光的三原色——红、绿、蓝（RGB）——在光源渲染中扮演着至关重要的角色。

光的三原色：红、绿、蓝

红、绿、蓝是光的三原色，它们可以混合出各种色彩。在 Three.js 中，光源的三原色对应着三个分量：Red、Green 和 Blue。这些分量的值介于 0 到 1 之间，值越大，光源强度越大。

当这三个分量相等时（即 Red、Green 和 Blue 都为 1），则光源为白色。当某一分量为 0 时，则光源为黑色。通过调整这三个分量，我们可以混合出各种各样的颜色。

色彩模式：HSL、HSV

Three.js 中有两种常用的色彩模式：HSL 和 HSV。

HSL ：色相（Hue）、饱和度（Saturation）和亮度（Lightness）。色相是色彩的种类（例如红色、绿色），饱和度是色彩的纯度，亮度是色彩的明暗程度。
HSV ：色相（Hue）、饱和度（Saturation）和明度（Value）。明度是色彩的深浅程度，其他属性与 HSL 相同。

色相、饱和度、亮度、明度

在 Three.js 中，可以通过设置材质的 color 属性来指定颜色。color 属性的类型为 Color 对象，它包含了色相、饱和度和亮度（或明度）三个属性。

色相（Hue） ：一个介于 0 到 360 度之间的角度，决定了色彩的种类。
饱和度（Saturation） ：一个介于 0 到 1 之间的数值，决定了色彩的纯度。
亮度（Lightness） 或 明度（Value） ：一个介于 0 到 1 之间的数值，决定了色彩的明暗程度或深浅程度。

通过调整这三个属性，我们可以混合出各种各样的颜色。

Three.js 光源渲染实例

以下是一个使用 Three.js 光源和色彩模式创建逼真场景的示例：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 10, 0);
scene.add(light);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

renderer.render(scene, camera);