乐趣区

关于three.js:Threejs教程光源对物体表面影响

举荐:将 NSDT 场景编辑器退出你的 3D 工具链
其余系列工具:NSDT 简石数字孪生

光源对物体外表影响

理论生存中物体外表的明暗成果是会受到光照的影响,threejs 中同样也要模仿光照 Light 对网格模型 Mesh 外表的影响。

你能够关上课件中案例源码,比照有光照和无光照两种状况,网格模型 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);

光源地位

你把点光源设想为一个电灯泡,你在 3D 空间中,放的地位不同,模型的渲染成果就不一样。

留神光源地位尺寸大小:如果你心愿光源照在模型的外外表,那你就须要把光源放在模型的里面。

// 点光源地位
pointLight.position.set(400, 0, 0);// 点光源放在 x 轴上

扭转光源地位,察看网格模型外表的明暗变动。

directionalLight.position.set(100, 60, 50); 

光源增加到场景

光源和网格模型 Mesh 对应一样是三维场景的一部分,天然须要增加到三维场景中能力起作用。

scene.add(directionalLight); // 点光源增加到场景中

3D 建模学习工作室

退出移动版