理解three.js的各种材质

前言

相对于之前的图表类的大屏可视化开发，现在可能运用到更多的是三维的开发。一般我们用的比较多的都是three。three内呢又多种材质，针对于不同的材质我们创建出来的物体可能效果也不一样。例如我们需要的磨砂质感和高光质感肯定用到的不是同一种材质，下面我们就看一下three中都有那些材质。

MeshBasicMaterial

MeshBasicMaterial是 three.js 中最基础的材质之一。它不受光照影响，始终保持固定的颜色和纹理。这个材质比较适合用于简单颜色填充的对象，或者在没有光照的场景中使用。因为比较单一简单，所以渲染的速度性能也是比较号的

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 绿色材质
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

MeshLambertMaterial

MeshLambertMaterial呢是一种半光泽材质，他会受到光照的影响，但不会产生反射效果。这个材质可以模拟非反光表面的光照行为，例如木头，纸张等物体。且可以通过调整光源的位置和强度，使得增强立体感

const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshLambertMaterial({ color: 0xff0000 }); // 红色材质
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

// 添加光源
const light = new THREE.PointLight(0xffffff);
light.position.set(5, 5, 5);
scene.add(light);

MeshPhongMaterial

MeshPhongMaterial 相当于是扩展了 MeshLambertMaterial 的功能，它不仅可以接收光照，还可以模拟表面的高光反射效果。这个才是可以使用与金属和塑料等物体。通过设置高光强度和反射度，可以控制表面的光泽程度。

const geometry = new THREE.CylinderGeometry(0.5, 0.5, 2, 32);
const material = new THREE.MeshPhongMaterial({ color: 0x0000ff, shininess: 100 }); // 蓝色材质
const cylinder = new THREE.Mesh(geometry, material);
scene.add(cylinder);

// 添加光源
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 5, 5);
scene.add(light);

MeshStandardMaterial

MeshStandardMaterial 我们日常开发用的可能就比较多了，他是基于物理的材质，能够给我们提供更真真实的光照效果，能够模拟金属材质和非金属材质的反射和折射。我们可以通过调整金属度和粗糙度实现我们需要的材质效果

const geometry = new THREE.IcosahedronGeometry(1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ffff, roughness: 0.5, metalness: 0.5 }); // 青色材质
const icosahedron = new THREE.Mesh(geometry, material);
scene.add(icosahedron);

// 添加环境光
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

MeshPhysicalMaterial

MeshPhysicalMaterial 是基于MeshStandardMaterial进行了拓展，增加了更细致的属性，例如透明度，反射折射等，这个材质适用与玻璃，水面等，我们可以通过调整光泽度和透明度实现更好的效果

const geometry = new THREE.PlaneGeometry(5, 5);
const material = new THREE.MeshPhysicalMaterial({ color: 0xff00ff, roughness: 0.2, clearcoat: 1.0 }); // 紫色材质
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

ShaderMaterial

ShaderMaterial 呢就是我们的一个着色器了，他允许我们自定义顶点着色器和片元着色器，来实现一些比较更好的效果，但是也是需要一些图形学的东西,近而实现一些我们想要的动态效果。

const geometry = new THREE.PlaneGeometry(5, 5);
const material = new THREE.ShaderMaterial({
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    varying vec2 vUv;
    void main() {
      gl_FragColor = vec4(vUv.x, vUv.y, 0.5, 1.0); // 渐变效果
    }
  `,
});
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

结尾

以上就是我们针对three中的一些物体的理解和用法了，了解这个主要是在我们进行开发的时候可以针对物体来使用不同的材质，从而可以展现出更好的视觉效果