介绍
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 版本列表中找到 ！
1、运行本地服务器
作用：将这些文件托管到网络浏览器可以访问的 URL 上
2、安装 Node.js，运行 serve ，启动本地服务器
npx serve
3、结果描述
如果一切顺利，将在终端中看到一个类似 http://localhost:5173 的 URL，打开该 URL 就能看到网络应用程序。
three.js 三要素
1、场景(scene)——容器
2、相机(camera)——观察
3、渲染器(renderer)——组合
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » 1-初识Three.js
发表评论 取消回复