定向光Three.js - JavaScript

Three.js是一款JavaScript的3D库，提供了强大的WebGL渲染器及种类繁多的3D对象和工具，特别适合于构建互动的3D动画、可视化应用和游戏。其中，定向光是Three.js中常用的一种光。它仅沿着一个确定方向，将场景中所有物体投射的阴影都拉成一条带，呈现出高度明暗对比的场景效果。

定向光的原理

定向光是一种只有方向，没有位置的光源。它可以设置一个方向向量，它所照明到的所有物体（包括阴影）都是相对于方向向量产生的。下面是一个简化的示意图：

如图所示，定向光是一束平行光线，它从指定的位置出发，以指定的方向传播。对于每个受到定向光照射的物体，都会计算出这个物体表面的法向量与光线方向之间的夹角，并根据夹角来计算出这个物体表面的明暗程度，从而呈现出高度明暗对比的场景效果。

如何添加定向光

在Three.js中，添加定向光非常简单。只需要在场景中创建一个定向光对象，并设置它的方向、颜色等属性即可。

// 创建一个定向光对象
var light = new THREE.DirectionalLight(0xffffff, 1);

// 设置光源的方向
light.position.set(1, 1, 1);

// 添加到场景中
scene.add(light);

上面的代码创建了一个白色的定向光对象，将光源方向设置为（1，1，1），也就是从场景的右上方照射过来。在将光源添加到场景中之后，所有的物体都将按照这个光源产生明暗效果。

如何使用定向光产生阴影

要在Three.js中使用定向光产生阴影，我们需要在定向光对象上设置接收阴影和产生阴影的属性：

// 创建一个定向光对象
var light = new THREE.DirectionalLight(0xffffff, 1);

// 设置光源的方向
light.position.set(1, 1, 1);

// 设置光源产生阴影
light.castShadow = true;

// 设置阴影的相关属性
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
light.shadow.camera.near = 0.1;
light.shadow.camera.far = 1000;
light.shadow.camera.left = -10;
light.shadow.camera.right = 10;
light.shadow.camera.top = 10;
light.shadow.camera.bottom = -10;

// 添加到场景中
scene.add(light);

上述代码中，我们将castShadow属性设置为true，表示该定向光对象可以产生阴影；然后设置阴影地图的大小和光源位置，以及阴影相机左、右、上、下面板的大小和位置。这样，我们就可以在场景中看到定向光产生的阴影效果了。

完整示例代码

下面是一个完整的示例代码，展示了如何创建一个带有定向光的场景，并产生阴影效果。

var scene = new THREE.Scene();

// 创建一个透视相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建一个渲染器
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);

// 创建一个定向光对象
var light = new THREE.DirectionalLight(0xffffff, 1);

// 设置光源的方向
light.position.set(1, 1, 1);

// 设置光源产生阴影
light.castShadow = true;

// 设置阴影的相关属性
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
light.shadow.camera.near = 0.1;
light.shadow.camera.far = 1000;
light.shadow.camera.left = -10;
light.shadow.camera.right = 10;
light.shadow.camera.top = 10;
light.shadow.camera.bottom = -10;

// 添加到场景中
scene.add(light);

// 创建一个立方体
var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
var cubeMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

// 设置立方体产生阴影
cube.castShadow = true;
cube.receiveShadow = true;

// 将立方体添加到场景中
scene.add(cube);

// 渲染循环
function animate() {
    requestAnimationFrame(animate);

    // 旋转立方体
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}
animate();

总结

通过上面的介绍，我们可以看到，Three.js提供了一个非常简单的方式来添加定向光，并通过调整光源的属性和阴影相关属性，可以轻松地产生高度明暗对比的场景效果。复杂的3D应用离不开优秀的三维库，而Three.js就是其中的佼佼者之一。如果想要深入了解Three.js更多的功能和用法，可以访问它的官方文档。