1.2开发环境搭建与基础代码

文档摘要

1.2开发环境搭建与基础代码 Three.js 基础入门：1.2 开发环境搭建与基础代码在开始使用 Three.js 构建令人惊叹的 3D 世界之前，我们需要先搭建一个合适的开发环境，并了解一些基础的代码结构。本文将详细介绍如何搭建 Three.js 开发环境，并编写一个简单的示例程序，帮助您快速入门。开发环境搭建搭建 Three.js 开发环境主要有两种方式：本地环境搭建：在本地计算机上安装必要的软件，并在本地运行 Three.js 代码。在线环境搭建：使用在线代码编辑器，无需安装任何软件，即可直接编写和运行 Three.js 代码。 1.

1.2开发环境搭建与基础代码

Three.js 基础入门：1.2 开发环境搭建与基础代码

在开始使用 Three.js 构建令人惊叹的 3D 世界之前，我们需要先搭建一个合适的开发环境，并了解一些基础的代码结构。本文将详细介绍如何搭建 Three.js 开发环境，并编写一个简单的示例程序，帮助您快速入门。

1. 开发环境搭建

搭建 Three.js 开发环境主要有两种方式：

本地环境搭建：在本地计算机上安装必要的软件，并在本地运行 Three.js 代码。
在线环境搭建：使用在线代码编辑器，无需安装任何软件，即可直接编写和运行 Three.js 代码。

1.1 本地环境搭建

本地环境搭建需要以下几个步骤：

安装代码编辑器：选择一款您喜欢的代码编辑器，例如 Visual Studio Code (VS Code)、Sublime Text、Atom 等。VS Code 拥有丰富的插件生态系统，是 Three.js 开发的常用选择。
安装 Web 服务器：由于浏览器的安全限制，Three.js 代码通常不能直接通过 file:// 协议打开。我们需要一个本地 Web 服务器来提供文件服务。常用的选择包括：
- Node.js + http-server：Node.js 是一个 JavaScript 运行环境，http-server 是一个简单的静态文件服务器。
  - 安装 Node.js：访问 https://nodejs.org/ 下载并安装 Node.js。
  - 安装 http-server：打开命令行终端，运行 npm install -g http-server。
  - 启动服务器：在包含 HTML 文件的目录下，运行 http-server。默认情况下，服务器会在 http://localhost:8080 启动。
- Python 简易服务器：如果您的计算机上已经安装了 Python，可以使用 Python 内置的 http.server 模块。
  - 启动服务器：在包含 HTML 文件的目录下，打开命令行终端，运行 python -m http.server (Python 3) 或 python -m SimpleHTTPServer (Python 2)。默认情况下，服务器会在 http://localhost:8000 启动。
下载 Three.js 库：访问 Three.js 的官方网站 https://threejs.org/，下载最新版本的 Three.js 库。您可以选择下载完整的库，或者只下载核心库。将下载的 Three.js 文件（例如 three.js 或 three.min.js）放置在您的项目目录中。

1.2 在线环境搭建

在线环境搭建更加简单，您只需要访问一个在线代码编辑器，例如：

CodePen：https://codepen.io/
JSFiddle：https://jsfiddle.net/
CodeSandbox：https://codesandbox.io/

这些在线编辑器都提供了 Three.js 的模板，您可以直接开始编写代码。

2. 基础代码

现在，我们来编写一个简单的 Three.js 程序，创建一个立方体并将其渲染到屏幕上。

2.1 HTML 结构

创建一个名为 index.html 的文件，并添加以下基本 HTML 结构：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Three.js 示例</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="three.js"></script>
    <script>
        // Three.js 代码将在这里编写
    </script>
</body>
</html>

<meta charset="utf-8">：设置字符编码为 UTF-8，以支持中文等字符。
<style>：设置页面样式，移除 body 的默认边距，并使 canvas 元素以块级元素显示。
<script src="three.js"></script>：引入 Three.js 库。请确保 three.js 文件与 index.html 文件在同一目录下，或者根据实际路径进行修改。

2.2 JavaScript 代码

在 <script> 标签中，添加以下 JavaScript 代码：


// 1. 创建场景
const scene = new THREE.Scene();
// 2. 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5; // 将相机向后移动 5 个单位
// 3. 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement); // 将渲染器的输出（canvas）添加到页面中
// 4. 创建立方体
const geometry = new THREE.BoxGeometry(1, 1, 1); // 创建一个长宽高均为 1 的立方体
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 创建一个绿色的材质
const cube = new THREE.Mesh(geometry, material); // 使用几何体和材质创建网格对象
scene.add(cube); // 将立方体添加到场景中
// 5. 渲染循环
function animate() {
    requestAnimationFrame(animate); // 循环调用 animate 函数
    cube.rotation.x += 0.01; // 旋转立方体
    cube.rotation.y += 0.01;
    renderer.render(scene, camera); // 渲染场景
}
animate(); // 启动渲染循环

这段代码完成了以下几个步骤：

创建场景 (Scene)：场景是所有 Three.js 对象的容器。
创建相机 (Camera)：相机定义了观察场景的视角。THREE.PerspectiveCamera 创建了一个透视相机，参数依次为：
- fov (Field of View)：视野角度，单位为度。
- aspect：宽高比，通常为窗口的宽度除以高度。
- near：近裁剪面，距离相机比这更近的物体将不会被渲染。
- far：远裁剪面，距离相机比这更远的物体将不会被渲染。
创建渲染器 (Renderer)：渲染器将场景和相机的内容渲染到屏幕上。THREE.WebGLRenderer 使用 WebGL 技术进行渲染。
- setSize：设置渲染器的大小，通常与窗口大小相同。
- document.body.appendChild(renderer.domElement)：将渲染器的输出（一个 canvas 元素）添加到 HTML 页面的 body 中。
创建立方体 (Cube)：
- THREE.BoxGeometry：创建一个立方体的几何体。
- THREE.MeshBasicMaterial：创建一个简单的材质，不受光照影响。
- THREE.Mesh：将几何体和材质组合成一个网格对象。
- scene.add(cube)：将立方体添加到场景中。
渲染循环 (Animation Loop)：
- requestAnimationFrame(animate)：告诉浏览器在下次重绘之前调用 animate 函数。这会创建一个循环，不断更新场景。
- cube.rotation.x += 0.01; cube.rotation.y += 0.01;：旋转立方体。
- renderer.render(scene, camera)：使用相机观察场景，并将结果渲染到屏幕上。

2.3 代码详解

让我们更详细地了解一下这段代码：

THREE.Scene(): 场景是 3D 世界的容器。所有物体、灯光和相机都添加到场景中。
THREE.PerspectiveCamera(fov, aspect, near, far): 透视相机模拟人眼的视觉效果。
- fov: 视野的角度（垂直方向）。
- aspect: 宽高比（通常是窗口的宽度除以高度）。
- near: 近裁剪面。比这个距离更近的物体不会被渲染。
- far: 远裁剪面。比这个距离更远的物体不会被渲染。
THREE.WebGLRenderer(): 使用 WebGL 渲染 3D 图形。
THREE.BoxGeometry(width, height, depth): 创建一个立方体的几何体。
THREE.MeshBasicMaterial({ color: color }): 创建一个简单的材质，不受光照影响。 color 可以是十六进制颜色值 (例如 0x00ff00)。
THREE.Mesh(geometry, material): 将几何体和材质组合成一个网格对象。
requestAnimationFrame(animate): 告诉浏览器在下次重绘之前调用 animate 函数。这会创建一个动画循环。
renderer.render(scene, camera): 使用相机观察场景，并将结果渲染到屏幕上。

2.4 运行代码

本地环境：将 index.html 和 three.js 文件放置在同一目录下，启动 Web 服务器，然后在浏览器中访问 http://localhost:8080 (或您设置的端口)。
在线环境：将代码复制到在线代码编辑器中，例如 CodePen。

您应该看到一个旋转的绿色立方体。

3. Mermaid 图表

我们可以使用 Mermaid 图表来可视化 Three.js 的基本结构：

这个图表展示了 Three.js 的核心概念：

Scene (场景)：所有对象的容器。
Camera (相机)：定义观察场景的视角。
Object3D (3D 对象)：所有 3D 对象的基类。
Mesh (网格)：由几何体和材质组成的可渲染对象。
Geometry (几何体)：定义 3D 对象的形状。
Material (材质)：定义 3D 对象的外观。
Light (光照)：照亮场景。
Renderer (渲染器)：将场景渲染到屏幕上。
Canvas (画布)：渲染器的输出。

4. 总结

本文详细介绍了 Three.js 开发环境的搭建方法，包括本地环境和在线环境，并提供了一个简单的示例程序，演示了如何创建一个旋转的立方体。通过学习本文，您应该能够：

选择合适的 Three.js 开发环境。
编写基本的 Three.js 代码。
理解 Three.js 的核心概念，例如场景、相机、渲染器、几何体、材质和网格。
使用 Mermaid 图表可视化 Three.js 的基本结构。

这是一个入门级的例子，Three.js 的强大之处远不止于此。在后续的学习中，您可以探索更多 Three.js 的特性，例如光照、阴影、纹理、动画、模型加载等，构建更复杂、更逼真的 3D 世界。

作者与出处

原作者：灏天文库

来源：灏天文库

原文： https://aiknowledge.cn/collection/220-threejs-3d%E5%8F%AF%E8%A7%86%E5%8C%96%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98

整理：灏天文库整理

由灏天文库平台收录，内容或由平台用户上传，仅供学习交流