给我五分钟带你打开3D世界的大门🤖-Three.js入门

介绍

在当今的数字世界中，Web技术变得非常强大。我们已经达到了一个新阶段，你可以在Web浏览器中体验到令人着迷的3D图形。想象一下，无需插件或外部工具，所有这些都在纯粹的Web内容领域内实现。猜猜是什么推动了这一令人激动的变革呢？那就是WebGL，一种使2D和3D图形渲染成为可能的奇妙技术。但是，实话实说，对于刚开始的人来说，它可能会有些棘手。这就是Three.js作为超级英雄登场的地方！Three.js就像是你可靠的助手，它简化了复杂的部分，并为你提供了一条进入迷人的3D Web图形世界的友好路径。在本文中，让我们踏上一段探索使用WebGL和Three.js的神奇力量将3D图形栩栩如生的旅程，了解一些基础知识。

WebGL 和 Three.js 的完美搭配

WebGL 是一个底层、复杂的 API。虽然它提供了巨大的功能和灵活性，但它也具有陡峭的学习曲线。另一方面，Three.js 提供了更高级别的抽象，使开发人员能够创建 3D 场景，而无需深入研究 WebGL 的复杂性。

从简单开始：旋转立方体

让我们使用 Three.js 制作 3D 立方体的动画，以说明入门是多么容易。

1. 设置

首先，在项目中引入 Three.js 库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

2. 创建一个简单的场景

需要三个主要组件：场景、相机和渲染器。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

3. 添加带有纹理的立方体

要显示立方体，我们需要一个盒子几何体和覆盖它的材质。

const geometry = new THREE.BoxGeometry();
  const textureLoader = new THREE.TextureLoader();
  const materials = [
    new THREE.MeshBasicMaterial({ map: textureLoader.load('https://threejs.org/examples/textures/crate.gif') }),
    new THREE.MeshBasicMaterial({ map: textureLoader.load('https://threejs.org/examples/textures/crate.gif') }),
    new THREE.MeshBasicMaterial({ map: textureLoader.load('https://threejs.org/examples/textures/crate.gif') }),
    new THREE.MeshBasicMaterial({ map: textureLoader.load('https://threejs.org/examples/textures/crate.gif') }),
    new THREE.MeshBasicMaterial({ map: textureLoader.load('https://threejs.org/examples/textures/crate.gif') }),
    new THREE.MeshBasicMaterial({ map: textureLoader.load('https://threejs.org/examples/textures/crate.gif') })
  ];
  const cube = new THREE.Mesh(geometry, materials);
  scene.add(cube);

4. 立方体动画

将创建一个旋转立方体的动画循环。

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

5. 放置相机

最后，需要将相机稍微向外放置，以便它可以看到立方体：

camera.position.z = 5;

现在，将在空白画布上看到一个旋转的立方体。这个场景的设置非常简单，展示了 Three.js 的强大功能。

结论

只需几行代码，我们就深入研究了网络上的 3D 图形世界。WebGL 的渲染能力和 Three.js 的抽象能力相结合，使开发人员可以直接在浏览器中创建令人惊叹的视觉内容。当你深入探索这个领域时，你会发现从复杂的游戏世界到详细的模拟的可能性几乎是无限的。