Three.js 入门指南：打造交互式3D Web体验

最新推荐文章于 2024-06-25 17:52:54 发布

Cicada-S

最新推荐文章于 2024-06-25 17:52:54 发布

阅读量687

点赞数 1

分类专栏： Three.js 文章标签：前端 javascript 3d

本文链接：https://blog.csdn.net/South_ink/article/details/132020148

版权

Three.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Three.js 入门指南：打造交互式3D Web体验

介绍

Three.js 是一个强大的 JavaScript 3D 图形库，它可以帮助开发者在 Web 上轻松构建交互式的 3D 应用和游戏。本篇博客将带你从零开始学习 Three.js，涵盖基本概念、环境设置、创建场景、添加对象、交互与动画等方面。无需担心你的 WebGL 知识，我们将一步步引导你掌握 Three.js。

准备工作

在开始之前，请确保你已经具备以下知识与工具：

基本的 HTML、CSS 和 JavaScript 编程知识。
最新版本的浏览器（建议使用 Chrome 或 Firefox）。
一个文本编辑器，例如 Visual Studio Code。

第一步：环境搭建

创建一个新的项目文件夹，命名为 “threejs-starter”。
在项目文件夹中创建以下文件：
- index.html：用于加载 Three.js 库和显示 3D 场景的页面。
- app.js：用于编写 Three.js 代码的主要 JavaScript 文件。
在 index.html 中添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three.js 入门指南</title>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

现在，我们需要下载 Three.js 库。在 <head> 标签中添加以下链接：

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

创建 app.js 文件，并在 index.html 中引用它。此文件将包含我们的 Three.js 代码。

第二步：创建场景与相机

在 app.js 中开始编写 Three.js 代码。

创建场景（Scene）：

const scene = new THREE.Scene();

创建相机（Camera）：

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

这里我们使用透视相机（PerspectiveCamera），设置视野角度为 75 度，纵横比为窗口的纵横比，可视范围从 0.1 到 1000 个单位。

创建渲染器（Renderer）并添加到页面中：

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

第三步：添加几何体

我们来添加一个简单的立方体到场景中。

创建立方体（BoxGeometry）：

const geometry = new THREE.BoxGeometry();

创建材质（Material）并设置颜色：

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

创建网格（Mesh）并将几何体和材质绑定：

const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

第四步：动画与渲染

创建动画循环函数：

function animate() {
  requestAnimationFrame(animate);

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

  renderer.render(scene, camera);
}

调用动画循环函数启动动画：

animate();

第五步：交互

我们可以在场景中添加一些交互元素，比如鼠标控制。

在 index.html 中添加以下 CSS 样式：

<style>
  body { margin: 0; }
  canvas { display: block; }
</style>

在 app.js 中导入 OrbitControls：

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

创建 OrbitControls 实例：

const controls = new OrbitControls(camera, renderer.domElement);

在动画循环中更新 controls：

function animate() {
  requestAnimationFrame(animate);
  controls.update();

  // 其他动画代码...
}

结语

恭喜！你已经完成了 Three.js 的入门指南。现在你已经具备了构建基本 3D 场景和交互式元素的知识，希望这篇博客能够激发你进一步探索 Three.js 的兴趣。祝你在 3D Web 开发中取得更多成功！

如有疑问或需要更多学习资源，请查阅 Three.js 官方文档以及社区教程。Happy coding！

Cicada-S

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Three.js 入门指南：打造交互式3D Web体验

现在你已经具备了构建基本 3D 场景和交互式元素的知识，希望这篇博客能够激发你进一步探索 Three.js 的兴趣。祝你在 3D Web 开发中取得更多成功！如有疑问或需要更多学习资源，请查阅 Three.js 官方文档以及社区教程。
复制链接

扫一扫

专栏目录