WebGL 的毕业作业：绚丽渐变的汽车

引言

WebGL 是一种强大的 JavaScript API，用于在网页上渲染交互式 3D 图形。通过 WebGL，开发者可以创建复杂的视觉效果，如渐变色、动画和粒子系统等。本文将介绍如何使用 WebGL 技术制作一个绚丽渐变的汽车模型，并分享一些最佳实践和解决方案。

准备工作

创建 WebGL 画布

首先，我们需要创建一个 WebGL 画布。这是一个特殊的 HTML 元素，用于渲染 3D 图形。以下是创建 WebGL 画布的代码示例：

<canvas id="webgl-canvas" width="600" height="400"></canvas>

初始化 Three.js

Three.js 是一个流行的 WebGL 框架，提供了丰富的 API，可以帮助我们快速创建各种 3D 模型。以下是初始化 Three.js 的代码示例：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector("#webgl-canvas") });

创建汽车模型

接下来，我们需要创建一个汽车模型。我们可以使用 Three.js 提供的几何体来创建一个简单的汽车模型。以下是创建汽车模型的代码示例：

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshLambertMaterial({ color: 0xffffff });
const car = new THREE.Mesh(geometry, material);
scene.add(car);

添加渐变色

为了为汽车模型添加渐变色，我们需要使用顶点着色器和片元着色器。顶点着色器用于计算每个顶点的颜色，片元着色器用于计算每个像素的颜色。以下是编写顶点着色器和片元着色器的代码示例：

顶点着色器

attribute vec3 position;
attribute vec3 normal;
uniform mat4 modelMatrix;
uniform mat4 viewMatrix;
uniform mat4 projectionMatrix;
void main() {
  gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
  vNormal = normalize(normal);
}

片元着色器

precision mediump float;
uniform vec3 color1;
uniform vec3 color2;
varying vec3 vNormal;
void main() {
  gl_FragColor = vec4(mix(color1, color2, abs(dot(vNormal, vec3(0.0, 1.0, 0.0)))), 1.0);
}

将着色器添加到材质中

我们将顶点着色器和片元着色器添加到材质中，并将材质应用到汽车模型上。以下是完整的代码示例：

const vertexShader = `
attribute vec3 position;
attribute vec3 normal;
uniform mat4 modelMatrix;
uniform mat4 viewMatrix;
uniform mat4 projectionMatrix;
void main() {
  gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
  vNormal = normalize(normal);
}
`;

const fragmentShader = `
precision mediump float;
uniform vec3 color1;
uniform vec3 color2;
varying vec3 vNormal;
void main() {
  gl_FragColor = vec4(mix(color1, color2, abs(dot(vNormal, vec3(0.0, 1.0, 0.0)))), 1.0);
}
`;

const material = new THREE.ShaderMaterial({
  vertexShader,
  fragmentShader,
  uniforms: {
    color1: { value: new THREE.Color(0xff0000) },
    color2: { value: new THREE.Color(0x00ff00) },
  },
});

car.material = material;

渲染场景

最后，我们需要渲染场景。以下是渲染场景的代码示例：

function animate() {
  requestAnimationFrame(animate);

  car.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();

总结

通过以上步骤，我们成功地使用 WebGL 技术实现了一个绚丽渐变的汽车模型。这个示例展示了如何利用 Three.js 和着色器语言（GLSL）来实现复杂的视觉效果。希望本文能够帮助大家更好地理解和应用 WebGL 技术。