1-初识Three.js

介绍

three.js

一个WebGL引擎，基于JavaScript，可直接运行GPU驱动游戏与图形驱动应用于浏览器

其库提供的特性与API以绘制3D场景于浏览器

项目结构

每个 three.js 项目至少需要一个 HTML 文件来定义网页以及一个 JavaScript 文件来运行 three.js 代码。

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>My first three.js app</title><style>body { margin: 0; }</style></head><body><script type="module" src="/main.js"></script></body>
</html>

main.js

import * as THREE from 'three';...

public/

public/ 文件夹有时也被称为 "静态（static）"文件夹，因为其中包含的文件会原封不动地推送到网站上。纹理（textures）、音频和 3D 模型通常会放在这里。

项目安装

方案一 NPM+构建工具(推荐使用)

1、安装Node.js

作用：管理依赖项、运行构建工具

2、项目文件夹->终端->安装three.js->安装构建工具Vite

注：Vite 将在开发过程中使用，但不会被打包成为最终网页的一部分

除了 Vite 也可以使用其他支持导入 ES Modules 的现代构建工具

# three.js

npm install --save three

# vite

npm install --save-dev vite

3、终端运行

npx vite

npx是什么？

npx 与 Node.js 一同安装，可运行 Vite 等命令行程序，这样就不必在 node_modules/ 中搜索正确的文件。

另外，可以将 Vite 的常用命令放入 package.json:scripts 列表，然后使用 npm run dev 代替。

4、结果描述

如果一切顺利，将在终端中看到一个类似 http://localhost:5173 的 URL，打开该 URL 就能看到网络应用程序。

方案二从CDN导入

<script type="importmap">{"imports": {"three": "https://cdn.jsdelivr.net/npm/three@<version>/build/three.module.js","three/addons/": "https://cdn.jsdelivr.net/npm/three@<version>/examples/jsm/"}}
</script>

注：在 main.js 中从 "three"（一个 npm 软件包）导入代码，但网络浏览器并不知道这意味着什么。         在 index.html 中，需要添加一个导入映射（import map）来定义从哪里获取软件包。将下面的代码放在 <head></head> 标签内、样式（styles）之后。
        不要忘记将上述链接中的 <version> 替换为 three.js 的实际版本，如 "v0.149.0"。

        最新版本可在 npm 版本列表中找到！