从零开始：手把手教你打造WebGL案例工程文件全攻略

了解WebGL

WebGL（Web Graphics Library）是一个JavaScript API，它允许你使用HTML5 canvas元素在网页上创建3D图形。WebGL利用了现代浏览器的图形处理单元（GPU）来渲染图形，这使得在网页上实现复杂的3D效果成为可能。

准备工作

在开始之前，你需要以下准备工作：

安装Node.js和npm：Node.js是一个JavaScript运行时环境，npm是Node.js的包管理器。
安装WebGL开发工具：你可以使用像Three.js这样的库来简化WebGL的开发过程。
了解HTML和JavaScript：WebGL是基于HTML5和JavaScript的，因此你需要对这些技术有一定的了解。

创建项目结构

首先，我们需要创建一个项目目录。在这个目录中，我们将放置所有的项目文件。

mkdir my-webgl-project
cd my-webgl-project

接下来，创建以下文件和目录：

index.html：这是我们的主HTML文件。
src/：这个目录将包含我们的JavaScript代码。
assets/：这个目录将用于存放我们的3D模型、纹理和其他资源。

编写HTML文件

打开index.html文件，并添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的WebGL项目</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <canvas id="webgl-canvas"></canvas>
    <script src="src/main.js"></script>
</body>
</html>

编写JavaScript代码

在src/目录下创建一个名为main.js的文件。这个文件将包含我们的WebGL代码。

import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('webgl-canvas').appendChild(renderer.domElement);

// 创建一个立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 设置相机位置
camera.position.z = 5;

// 渲染场景
function animate() {
    requestAnimationFrame(animate);

    // 立方体旋转
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}
animate();

运行项目

在终端中运行以下命令来启动本地服务器：

npx http-server .

然后在浏览器中打开http://localhost:8080，你应该能看到一个旋转的绿色立方体。

总结

通过以上步骤，你已经成功创建了一个简单的WebGL项目。你可以通过添加更多的3D对象、纹理和动画来扩展你的项目。WebGL是一个强大的工具，可以让你在网页上创建令人惊叹的3D图形。继续探索和学习，你将能够创造出更多令人印象深刻的WebGL项目。