WebGL - 交互式立方体

你好，有抱负的程序员们！今天，我们将踏上一段激动人心的旅程，进入 WebGL 的世界。我们将创建一个可以让你用鼠标旋转的交互式立方体。如果你以前从未编写过代码，也不用担心——我会像耐心十足的老乌龟一样，一步一步地引导你。让我们开始吧！

WebGL - Interactive Cube

理解基础知识

在我们开始绘制立方体之前，让我们快速了解一下一些基本概念。

什么是 WebGL？

WebGL（Web 图形库）是一个 JavaScript API，它允许我们在网页浏览器中渲染 3D 图形。它就像给你的网页赋予了超能力，以创建令人惊叹的视觉效果！

我们需要什么

一个文本编辑器（如 Notepad++ 或 Visual Studio Code）
一个网页浏览器（Chrome、Firefox 或任何现代浏览器）
一点好奇心和一点坚持不懈！

示例 - 绘制一个交互式立方体

第一步：设置 HTML

首先，让我们创建我们的网页框架。打开文本编辑器，创建一个名为 interactive_cube.html 的新文件。复制并粘贴以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebGL 交互式立方体</title>
<style>
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// 我们的 WebGL 代码将放在这里
</script>
</body>
</html>

这设置了我们的 HTML 结构并包含了 Three.js 库，这将使我们的 WebGL 工作变得更加简单。

第二步：创建场景

现在，让我们添加一些 JavaScript 代码来创建我们的 3D 场景。将脚本标签中的注释替换为以下代码：

// 设置场景、相机和渲染器
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.getElementById('myCanvas') });
renderer.setSize(window.innerWidth, window.innerHeight);

// 创建一个立方体
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;

让我们分解一下：

我们创建了一个场景，就像是我们 3D 对象的舞台。
相机定义了我们的视角。
渲染器负责绘制我们的场景。
我们使用 BoxGeometry 创建了一个立方体，并给它一个绿色。
最后，我们将相机放置在中心向外 5 个单位的位置。

第三步：动画立方体

为了让我们的立方体旋转，我们需要添加一个动画循环。在之前的代码块之后添加以下代码：

function animate() {
requestAnimationFrame(animate);

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

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

这个函数将会被反复调用，每次都会稍微旋转立方体，并重新渲染场景。

第四步：使其交互

现在，让我们添加交互性，以便我们可以用鼠标旋转立方体。在 animate() 函数之前添加以下代码：

let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };

document.addEventListener('mousedown', () => isDragging = true);
document.addEventListener('mouseup', () => isDragging = false);
document.addEventListener('mousemove', (e) => {
if (isDragging) {
const deltaMove = {
x: e.offsetX - previousMousePosition.x,
y: e.offsetY - previousMousePosition.y
};

cube.rotation.y += deltaMove.x * 0.01;
cube.rotation.x += deltaMove.y * 0.01;
}

previousMousePosition = {
x: e.offsetX,
y: e.offsetY
};
});

这段代码为鼠标动作添加了事件监听器，允许我们通过点击和拖动来旋转立方体。

第五步：增加一些花哨的东西

让我们使我们的立方体更有趣，给它的每个面赋予不同的颜色。将材质创建行替换为以下代码：

const materials = [
new THREE.MeshBasicMaterial({ color: 0xff0000 }), // 红色
new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // 绿色
new THREE.MeshBasicMaterial({ color: 0x0000ff }), // 蓝色
new THREE.MeshBasicMaterial({ color: 0xffff00 }), // 黄色
new THREE.MeshBasicMaterial({ color: 0xff00ff }), // 品红色
new THREE.MeshBasicMaterial({ color: 0x00ffff })  // 青色
];
const cube = new THREE.Mesh(geometry, materials);

现在我们的立方体的每个面都将有不同的颜色！

结论

恭喜你！你刚刚使用 WebGL 创建了一个交互式 3D 立方体。这仅仅是 3D 图形编程的冰山一角。在你继续你的旅程时，你会发现更多令人惊叹的东西你可以创造。

记住，学习编码就像学习骑自行车。一开始可能会有些摇摇晃晃，但随着练习，你很快就能自如地骑行！

以下是我们使用的主要方法的总结表格：

方法	描述
`THREE.Scene()`	创建一个新的 3D 场景
`THREE.PerspectiveCamera()`	设置相机视角
`THREE.WebGLRenderer()`	处理场景的渲染
`THREE.BoxGeometry()`	创建立方体几何
`THREE.MeshBasicMaterial()`	定义立方体材质
`THREE.Mesh()`	结合几何和材质
`requestAnimationFrame()`	调用动画循环

继续尝试，继续学习，最重要的是，玩得开心！WebGL 的世界属于你，你现在已经有能力开始探索它了。快乐编码！

Credits: Image by storyset

上一教程:

WebGL - 立方体旋转