【Three.js基础-1】基本概念和环境搭建

时间：2021-07-11 00:53:49

Three.js基础：基本概念和环境搭建

1. Three.js简介：介绍three.js的历史、功能和优势。
2. 环境搭建：介绍如何使用npm、CDN和本地文件夹三种方式搭建three.js环境。
3. 基本概念：了解three.js中的基本概念，例如场景、相机、渲染器、几何体和材质。
4. 基本元素：使用three.js创建一个简单的场景，并添加几何体、光源、相机和渲染器。
5. Three.js的调试工具：介绍如何使用Three.js Inspector和Dat.GUI等工具来调试three.js程序。

1 Three.js简介

Three.js是一个JavaScript 3D库，可轻松创建用于Web的交互式3D应用程序和动画效果。它允许在浏览器中进行硬件加速渲染，而无需使用插件。

Ricardo Cabello 创立了Three.js项目，最初的目标是为了简化低级 WebGL API，Three.js 最早发布于 2010 年，并一直保持活跃更新，至今仍然是 3D 动画制作领域最重要的 JavaScript 引擎之一。

Three.js提供了包括渲染、场景元素（如灯光、相机、物体等）、3D建模支持、纹理加载器等丰富功能。此外还可以快速构建自己的游戏世界或其他类型的图形应用程序。

功能与优势
  • 易用性：使用 Three.js 简单且直观，API 设计良好。
  • 跨平台：Three.js 可以在不同操作系统、浏览器和设备上运行，通过 WebGL 在桌面和移动端提供了广泛的渲染功能。
  • 灵活性：Three.js 支持多种语言（JavaScript, TypeScript和Dart），用户可以轻松地构建可交互、分层、动态和响应式的场景。
  • 开放源代码：Three.js 是一个开源项目，在 GitHub 上可以找到其源代码。这使开发者可以根据需要修改源代码添加自己的扩展。
  • 强大的社区支持：因为 Three.js 被广泛使用，因此它有一个庞大的社区，包括教程、文档、案例等，可以帮助开发者快速掌握它的使用方法。
  • 相对低门槛：学习 Three.js 和 WebGL 的成本相对较低，同时具有很强的可定制性
  • 可拓展性：由于开源性质，也因此许多亿万级别的公司或项目会选择使用 Three.js 并贡献相关代码，这种社区合作，也加速了 Three.js 探索未来更强大可能性的步伐
  • 显卡硬件加速：Three.js 充分利用显卡硬件加速能力，在浏览器中实现快速流畅的渲染，从而可以创造非常逼真的3D特效

总之，Three.js 是一个功能齐全，易于学习和使用的 JavaScript 3D 渲染库，并拥有强大的社区支持。

学习three的目的和动力

学习Three.js的目的和动力可以有多种，下面列举几点常见的理由：

  1. 创建交互式3D场景： Three.js是一个基于WebGL渲染器的JavaScript库，它能让我们直接在浏览器中创建出精美的3D场景与交互体验。
  2. 动画设计: Three.js被广泛用于游戏和电影制作，在这些领域中，使用Three.js可以创作出非常酷炫的动态效果，如：特效、物理引擎、逼真的材质等等。
  3. 市场需求：现在越来越多的公司需要开发具有3D交互能力的网站或应用程序，而Three.js正是一种流行的实现方式。
  4. 技术兴趣：也有很多人是因为对OpenGL/WebGL这类图形技术感兴趣，通过学习Three.js更深入地了解它们的原理和应用。

总之，学习Three.js可以让开发者掌握3D图形编程的技巧，提高Web前端技能水平，增加职业发展机会。而三维图像本身也可以给人带来强烈的视觉冲击和创造的快感，所以是很多前端工程师自己兴趣爱好的方向。

three.js未来的潜力

随着VR / AR 等新技术的不断普及和发展，Three.js 得以在更广泛的领域内获得广泛应用,未来的 Three.js 发展很有前途，将扮演越来越重要的角色。虚拟现实、增强现实、以及在 Web 上渲染复杂的 3D 模型等领域都需要 Three.js 的支持。随着API的进一步丰富，可以预见 Three.js 将在未来表现出更加强大的作用。

2 环境搭建：

介绍如何使用npm、CDN和本地文件夹三种方式搭建three.js环境。
环境搭建: 使用npm、CDN和本地文件夹三种方式搭建three.js环境

如果想要使用Three.js，你需要先搭建一个运行Three.js的环境。这篇文章将介绍如何使用npm、CDN和本地文件夹三种方式来搭建Three.js的环境。

npm

npm是一个用于管理软件包的命令行工具。要使用npm安装Three.js，首先需要安装Node.js。Node.js是一个基于Chrome V8引擎的JavaScript运行环境。只需打开​​Node.js官网​​下载并安装即可。

安装完成Node.js后，可以在命令行中输入以下命令安装Three.js：

npm install three

然后在你的HTML文件中添加script标记，如下所示：

<script src="node_modules/three/build/three.min.js"></script>

现在你就可以使用Three.js了。

CDN

CDN是一种快速可靠的网络服务，可以从全球分布的服务器上提供资源文件。你可以从CDN上获取到最新版本的Three.js，也可以获取特定版本的Three.js，只需将其添加到你的HTML文件中。

下面是使用​​jsDelivr CDN​​的例子：

<script src="https://cdn.jsdelivr.net/npm/three@0.131.1/build/three.min.js"></script>

请注意，此处我们选择的是版本0.131.1。如果您需要使用其他版本，请将版本号替换为所需版本号。

本地文件夹

另一种搭建Three.js的环境的方法是下载Three.js的源码并将其放置到本地的项目文件夹中。这种方法适合那些想要查看Three.js的内部结构，并且需要根据自己的需要进行修改的人。

你可以通过GitHub上的​​Three.js项目页面​​下载最新的代码。解压后，将该文件夹移动到您的项目文件夹中即可。随后，您将使用与npm或CDN相同的方法在HTML文件中加载Three.js：

<script src="./js/three.js"></script>

现在您已经掌握了使用npm、CDN和本地文件夹三种方法搭建Three.js环境的基础知识。您可以根据您的实际需求选择其中任意一种方法。

三种方式对比

在使用Three.js开发项目时，搭建好环境是非常重要的一步。下面将对npm、CDN和本地文件夹三种搭建方式进行比较。

  1. npm

npm是Node.js生态系统中的软件包管理器，能够快速、方便地安装各种模块和工具。使用npm来搭建Three.js环境，需要先安装Node.js，并在命令行中输入以下命令：

npm install three

优点：

  • 可以随时更新至最新版本；
  • 方便管理依赖项；
  • 可能有更好的代码整合和链接，从而更快的构建您的应用程序。

缺点：

  • 需要一定的前置知识和操作，不适合初学者；
  • 安装和配置的时间可能比较长。
  1. CDN

CDN（Content Delivery Network）即内容分发网络，是一种去中心化、跨地区共享资源的网络服务。将Three.js直接引入HTML中，可以使用CDN链接：

<script src="https://cdn.jsdelivr.net/npm/three@0.130.1/build/three.min.js"></script>

优点：

  • 无需下载或安装任何东西就能开始工作；
  • 建立快速，直接在浏览器中使用三维图像技术库；

缺点：

  • 速度取决于网速，如果访问CDN服务器的速度很慢，则会影响加载速度。
  1. 本地文件夹

将下载好的Three.js文件放入本地文件夹中，然后在HTML中直接引入该文件即可：

<script src="./js/three.min.js"></script>

优点：

  • 因为文件存储在本地，所以加载速度比CDN快；
  • 对于离线开发和本地测试十分实用。

缺点：

  • 需要自己手动将库中的相关代码添加到HTML中；
  • 如果使用的是旧版Three.js，则需要手动升级库，否则可能会出现问题。

综上，每种搭建方式都有其优点和缺点，具体使用需要根据项目需求而定。如果您只是进行简单的演示或学习，则可以使用CDN链接，如果您的项目需要更多的控制和稳定性，则应考虑使用npm或本地文件夹。

3 three.js中的基本概念

在three.js中，有许多重要的概念。下面我们来介绍一些最基础的概念。

场景(Scene)

场景是three.js的核心。你可以将场景理解为一个容器，其中包含着您所创建的所有对象，例如模型、相机、灯光等。场景可以被渲染器(renderers)用来渲染它包含的所有内容。

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

相机(Camera)

相机定义了场景中什么可见、从哪个角度（位置和方向）观察场景。通常，场景中会存在两种不同类型的相机：透视相机(PerspectiveCamera) 和正交相机(OrthographicCamera)。前者类似于人眼看到世界的方式，后者显示了固定距离的平面投影。

// 创建一个透视相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
渲染器(Renderer)

渲染器是将场景和相机组合起来产生输出的引擎。它渲染场景，输出以供展示。three.js在渲染器方面提供了几个选项，每个选项都适用于不同的项目需求。

// 创建WebGL渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
几何体(Geometry)

几何体是构建图形模型的块。它们由顶点(vertex) 和面(face) 组成。对于大多数webgl应用，Three.js已经包括了许多现成的几何体(立方体、球体等)。如果您想要更加特殊或自定义的模型，您还可以自己创建几何体。

// 实例化球体几何体
const geometry = new THREE.SphereGeometry(5, 32, 32);
材质(Material)

材质决定了物体如何呈现。它们定义了渲染出现的色彩、反射率、透明度等特征。同样地，在three.js中也有许多种不同的材质，包括 BasicMaterial, LambertMaterial 和 PhongMaterial 等。

// 实例化基础网格材质
const material = new THREE.MeshBasicMaterial({ 
  color: 0xff0000, 
  wireframe: true 
});

以上是three.js中的一些基础概念，接下来你可以深入研究这些内容，并运用到自己的项目中去。

4 基本元素

基本元素：使用three.js创建一个简单的场景，并添加几何体、光源、相机和渲染器。

以下是使用three.js创建一个简单场景的步骤：

引入three.js

你可以通过CDN、npm或本地文件夹等方式将three.js引入你的项目中。在使用之前，务必先确保能够正确地引入库。

<script src="https://cdn.jsdelivr.net/npm/three@0.131.2/build/three.min.js"></script>
创建场景、相机和渲染器

在three.js中，所有元素都需要添加到场景中。同时，要展示场景，你还需要一个相机和渲染器。下面是创建这些元素的代码：

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.body.appendChild(renderer.domElement);

上述代码中，我们创建了一个新的场景，使用透视相机创建相机，并创建了WebGL渲染器并将其添加到文档中。

创建几何体和材质

要将3D图形显示在场景中，你需要至少使用一个几何体和一个材质。可以使用现有的几何体和材质，也可以自己创建它们。例如，在这里，我们使用内置的立方体几何体和红色基础材质：

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

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

上述代码中，我们创建了一个BoxGeometry和一个MeshBasicMaterial，并将两个元素传递给THREE.Mesh类，从而创建一个完整的网格（网格由几何体和材质组成）。

添加光源

如果缺少光源，则无法查看网格。在这里，我们创建了一种白色点光源：

const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 0, 10);

scene.add(light);

上述代码中，我们使用THREE.PointLight创建了一个点光源。该方法接受三个参数：颜色、强度和距离。我们将其添加到场景中，并设置其位置为（0,0,10）。

渲染场景

最后一步是在每个动画帧上渲染场景：

function animate() {
  requestAnimationFrame(animate);

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

  renderer.render(scene, camera);
}

animate();

上述代码中，我们使用requestAnimationFrame创建了一个animate函数，并在其中旋转了立方体，然后通过调用render方法将场景和相机传递给渲染器来渲染场景。

这就是使用three.js创建一个简单场景的过程。你可以根据需要添加更多元素、更改场景属性并实验不同的几何体和材质。

5 Three.js的调试工具

Three.js的调试工具：介绍如何使用Three.js Inspector和Dat.GUI等工具来调试three.js程序。

Three.js Inspector和Dat.GUI是两种非常有用的调试工具，可以帮助开发者更轻松地调试three.js程序。

Three.js Inspector

Three.js Inspector是一款Chrome插件，专门用于调试Three.js应用程序。安装完成后，可以在Chrome浏览器中打开任何Three.js应用并启用该插件。

使用Three.js Inspector，我们可以查看场景、网格、相机，以及光照等元素的详细信息。它还提供了一些有用的功能，例如：

  • 可以直接在场景中隐藏或显示网格。
  • 可以改变控制器的类型和旋转速度。
  • 可以改变相机设置，例如FOV、近裁剪面和远裁剪面等。
  • 还可以通过改变材质属性来实时预览效果。

使用这个工具可以帮助你更好地理解和调试Three.js应用程序。

Dat.GUI

Dat.GUI是一个小型的调试面板，可以用来快速创建UI控件。它可以用于改变参数，并实时预览效果。Dat.GUI支持多种类型的控件，例如滑块、文本框、复选框等。

使用Dat.GUI，我们可以方便地更改场景、光源、材质、相机等元素的一些基本属性，从而更好地调试程序。为了使用Dat.GUI，我们需要做以下几步：

  1. 引入库文件

首先，我们需要将dat.gui.min.js或dat.gui.js库文件引入项目中。可以通过CDN或本地文件夹等方式完成引入。

  1. 创建GUI实例

创建GUI实例以便添加控件。例如：

var gui = new dat.GUI();
  1. 添加控件

添加一些需要调节的控件和对应的参数。例如：

gui.add(object, 'property').name('name');

其中，'object'是需要调整的对象；'property'是需要调整的属性；'name'是控件名称。你可以按自己的需求随意更改参数。

通过使用这些调试工具，我们可以更容易地定位问题，并快速进行调试以改进Three.js程序。

标签：

相关文章