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)

新建一个平行光

有了环境光之后，发现层次还不明显，由此，我们需要添加一个平行光

const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0)
scene.add(directionalLight)

这样我们发现，层次感就有了

当然，我们可以让他更加有层次感

directionalLight.position.set(150,300,600)

这样就比较接近于真实的物体了

完整代码：

const scene = new THREE.Scene();  // 场景
const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 2000);// 透视相机
const renderer = new THREE.WebGLRenderer();   // 渲染器
renderer.setSize(500, 500);    // 设置渲染器的大小为窗口的内宽度，也就是内容区的宽度
// 将物体放入场景中
const geometry = new THREE.BoxGeometry(100, 100, 100);
const material = new THREE.MeshLambertMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// 创建一个环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4)
scene.add(ambientLight)
camera.position.set(200, 200, 200)
camera.lookAt(0,0,0)

const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0)
scene.add(directionalLight)
directionalLight.position.set(150,300,600)
// 执行渲染程序
renderer.render(scene, camera)
document.body.appendChild(renderer.domElement);