Three.js教程：平行光与环境光

大家好，欢迎来到IT知识分享网。

推荐：将NSDT 编辑器加入你的3D工具链

其他系列工具：NSDT简石数字孪生

平行光与环境光

本节课通过平行光DirectionalLight (opens new window)和环境光AmbientLight (opens new window)进一步了解光照对应模型Mesh表面的影响。

点光源辅助观察PointLightHelper

通过点光源辅助观察对象PointLightHelper (opens new window)可视化点光源。

预览观察：可以借助相机控件OrbitControls旋转缩放三维场景便于预览点光源位置

// 光源辅助观察 const pointLightHelper = new THREE.PointLightHelper(pointLight, 10); scene.add(pointLightHelper); 

改变点光源位置，观察光照效果变化。

directionalLight.position.set(100, 60, 50); // 改变点光源位置，使用OrbitControls辅助观察 pointLight.position.set(-400, -200, -300); 

环境光设置

环境光AmbientLight (opens new window)没有特定方向，只是整体改变场景的光照明暗。

//环境光:没有特定方向，整体改变场景的光照明暗 const ambient = new THREE.AmbientLight(0xffffff, 0.4); scene.add(ambient); 

平行光

平行光DirectionalLight (opens new window)就是沿着特定方向发射。

// 平行光 const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // 设置光源的方向：通过光源position属性和目标指向对象的position属性计算 directionalLight.position.set(80, 100, 50); // 方向光指向对象网格模型mesh，可以不设置，默认的位置是0,0,0 directionalLight.target = mesh; scene.add(directionalLight); 

平行光辅助观察DirectionalLightHelper

通过点光源辅助观察对象DirectionalLightHelper (opens new window)可视化点光源。

// DirectionalLightHelper：可视化平行光 const dirLightHelper = new THREE.DirectionalLightHelper(directionalLight, 5,0xff0000); scene.add(dirLightHelper); 

平行光与Mesh表面光线反射规律

平行光照射到网格模型Mesh表面，光线和模型表面构成一个入射角度，入射角度不同，对光照的反射能力不同。

光线照射到漫反射网格材质MeshLambertMaterial (opens new window)对应Mesh表面，Mesh表面对光线反射程度与入射角大小有关。

// 对比不同入射角，mesh表面对光照的反射效果 directionalLight.position.set(100, 0, 0); directionalLight.position.set(0, 100, 0); directionalLight.position.set(100, 100, 100); directionalLight.position.set(100, 60, 50); //directionalLight.target默认指向坐标原点

3D建模学习工作室