threejs 光源和漫反射材质解析

根据上一篇文章threejs入门了解到threejs的三要素：场景、相机和渲染器，我们也通过这三要素渲染了一个简单的立方体，但是这个立方体整体没有什么质感，不接近现实中的物体，接下来我们开始优化这个三维画面

漫反射材质

为了更贴近于现实，我们需要将物体材质从基础材质切换为漫反射材质

const material = new THREE.MeshLambertMaterial({ color: 0xff0000 });

再跟我们上一篇的创建物体和创建网格结合起来

const geometry = new THREE.BoxGeometry(100, 100, 100);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

光源

切换到漫反射材质之后，发现界面上黑乎乎一片，什么都没有了，那是因为我们现实生活中需要光源，没有光源什么也看不到，在three3d的世界里同样不能缺少光源

新建一个环境光

const ambientLight = new THREE.AmbientLight(0xffffff, 0.4)

AmbientLight构造函数有两个参数，颜色和光强

• color 颜色rgb数值，默认 0xffffff
• intensity 光照强度，默认 1

然后将我们初始化的光源添加到场景中

scene.add(ambientLight)

新建一个平行光