视频讲解 (opens new window)
实际生活中物体表面的 明暗 效果是会受到 光照 的影响,比如晚上不开灯,你就看不到物体,灯光比较暗,物体也比较暗。在threejs中,咱们用网格模型 Mesh 模拟生活中物体,所以threejs中模拟光照 Light 对物体表面的影响,就是模拟光照 Light 对网格模型 Mesh 表面的影响。
Mesh
Light
你可以打开课件中案例源码,对比有光照和无光照两种情况,网格模型 Mesh 表面的差异。
threejs提供的网格材质,有的受光照影响,有的不受光照影响。
基础网格材质 MeshBasicMaterial (opens new window) 不会受到光照影响。
//MeshBasicMaterial不受光照影响 const material = new THREE.MeshBasicMaterial();
漫反射网格材质 MeshLambertMaterial (opens new window) 会受到光照影响,该材质也可以称为 Lambert网格材质 ,音译为兰伯特网格材质。
一个立方体长方体使用MeshLambertMaterial材质,不同面和光线夹角不同,立方体不同面就会呈现出来不同的明暗效果。
//MeshLambertMaterial受光照影响 const material = new THREE.MeshLambertMaterial();
Three.js提供了多种模拟生活中光源的API,文档搜索关键词light就可以看到。
点光源 PointLight (opens new window) 可以类比为一个发光点,就像生活中一个灯泡以灯泡为中心向四周发射光线。
//点光源:两个参数分别表示光源颜色和光照强度 // 参数1:0xffffff是纯白光,表示光源颜色 // 参数2:1.0,表示光照强度,可以根据需要调整 const pointLight = new THREE.PointLight(0xffffff, 1.0);
除了通过 THREE.PointLight 的参数2设置光照强度,你可以可以直接访问光照强度属性 .intensity 设置。
THREE.PointLight
.intensity
pointLight.intensity = 1.0;//光照强度
实际生活中点光源,比如比如一个灯泡,随机距离的改变,光线会衰减,越来越弱,光源衰减属性 .decay 默认值是2.0,如果你不希望衰减可以设置为 0.0 。
.decay
0.0
pointLight.decay = 0.0;//设置光源不随距离衰减
【扩展提醒】:如果使用默认衰减 2.0 ,不同版本可能有差异,对于部分threejs新版本,有时候你可能看不到光源效果,这时候可以把光照强度加强试试看,如果你的版本不影响,就不用加强光照强度(根据版本情况灵活对应)。
2.0
// 你可以对比不同光照强度明暗差异(传播同样距离) pointLight.intensity = 10000.0;//光照强度 pointLight.intensity = 50000.0;//光照强度
你把点光源想象为一个电灯泡,你在3D空间中,放的位置不同,模型的渲染效果就不一样。
注意光源位置尺寸大小:如果你希望光源照在模型的外表面,那你就需要把光源放在模型的外面。
//点光源位置 pointLight.position.set(400, 0, 0);//点光源放在x轴上
光源和网格模型Mesh对应一样是三维场景的一部分,自然需要添加到三维场景中才能起作用。
scene.add(pointLight); //点光源添加到场景中
设置好上面所有代码,你现在可以执行代码,用浏览器查看渲染效果。
pointLight.position.set(400, 200, 300);
7. 三维坐标系-加强三维空间认识 9. 相机控件OrbitControls → Theme by Vdoing 豫ICP备16004767号-2