简单了解three.js 着色器材质

了解three.js中着色器材质需要掌握一些基础知识，包括WebGL和着色器语言，以下是简要介绍：

• WebGL是一种基于浏览器的图形技术，使用GPU加速渲染三维图形，支持多种着色器材质。
• 着色器是一种程序，用于定制渲染模型的外观和行为，通过GPU进行加速渲染，包括片元着色器和顶点着色器两种类型。
• three.js是WebGL的一个库，提供了主流的三维图形渲染技术和API，包括了着色器材质。

在了解这些基础知识后，我们可以开始学习three.js中的着色器材质。首先需要导入渲染器、相机、场景和灯光等对象，然后定义着色器代码，并创建着色器材质并传递着色器。

添加着色器材质

下面是一个简单的示例，展示了如何创建一个着色器材质。在这个示例中，我们将创建一个蓝色的立方体，使用了固定管线渲染技术（fixed pipeline rendering）。

import * as THREE from 'three';

const width = 640;
const height = 480;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1); // 创建立方体模型
const material = new THREE.MeshBasicMaterial({ color: 0x0000ff }); // 实例化着色器材质
const cube = new THREE.Mesh(geometry, material); // 创建网格模型
scene.add(cube);

camera.position.z = 5;
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
}
animate();

在上面的代码中，我们首先创建了场景、相机和渲染器，然后使用 BoxGeometry 函数创建了一个立方体模型，使用 MeshBasicMaterial 函数创建了一个简单的材质，最后创建了一个网格模型。然后将网格模型添加到场景中，并设置相机位置和动画。运行代码，我们将看到一个旋转的蓝色立方体。

使用自定义着色器

除了使用内置材质之外，我们还可以创建自定义着色器并将其传递给着色器材质。下面是一个简单的示例，展示如何创建一个自定义着色器，并将其应用于一个红色平面。

import * as THREE from 'three';

const width = 640;
const height = 480;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.PlaneGeometry(1, 1, 1, 1); // 创建平面模型
const material = new THREE.ShaderMaterial({
  uniforms: {
    color: { value: new THREE.Color(0xff0000) }
  },
  vertexShader: `
    void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform vec3 color;
    void main() {
      gl_FragColor = vec4(color, 1.0);
    }
  `
}); // 创建着色器材质
const plane = new THREE.Mesh(geometry, material); // 创建网格模型
scene.add(plane);

camera.position.z = 5;
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  plane.rotation.x += 0.01;
  plane.rotation.y += 0.01;
}
animate();

在上面的代码中，我们首先使用 PlaneGeometry 函数创建一个平面模型，然后使用 ShaderMaterial 函数创建了一个自定义着色器材质，并设置了着色器代码和Uniforms。Uniforms 是一种在顶点着色器和片元着色器之间共享数据的方式。最后我们将平面模型与着色器材质创建为网格模型，并添加到场景中。运行代码，我们将看到一个旋转的红色平面。

在three.js中使用着色器材质需要对WebGL和着色器语言有一定的掌握，并且需要理解three.js的渲染流程和API。以上是一个简单的介绍。