微信网站公司wordpress 导航网站主题
上一篇我们聊了学习Three.js前的“地基”知识，现在地基牢固，该正式动工了！在创造炫酷的3D世界之前，我们得先把开发环境给搭好。
官方手册提供了两种主流的安装方式，分别适用于不同场景。选对方法，事半功倍！
🚀 方式一：CDN + Importmap (极速上手)
这是官方最为推荐的、也是最简单的入门方式，尤其适合学习、做小练习、或者快速验证一个想法。
优点：无需安装任何东西！只需要一个能联网的浏览器。
操作方法：
在你的HTML文件中，你只需要添加一个 <script type="importmap"> 标签，告诉浏览器去哪里找到 Three.js 的代码库。
HTML
<!DOCTYPE html>
<html><head><title>Three.js CDN Setup</title><style>body { margin: 0; }canvas { display: block; }</style></head><body><script type="importmap">{"imports": {"three": "https://unpkg.com/three@0.165.0/build/three.module.js"}}</script><script type="module">import * as THREE from 'three';// ...接下来就可以在这里愉快地使用THREE了// console.log(THREE.REVISION); // 可以在控制台看到版本号</script></body>
</html>
这种方式让你能专注于Three.js本身，而不被复杂的工程化配置所干扰。
📦 方式二：NPM + 构建工具 (专业之选)
当你准备做一个正式的、复杂的、需要长期维护的项目时，这种“工程化”的方式就是不二之选。
优点：专业的项目管理、方便的版本控制、能配合各种现代前端框架（如Vue, React）使用。
操作方法：
- 首先，确保你的电脑安装了 Node.js。
- 在你的项目文件夹中，通过命令行安装Three.js：Bash
npm install three - 然后，在你的JavaScript代码中，就可以直接导入并使用它了：JavaScript
import * as THREE from 'three';// 创建你的场景、相机、渲染器... const scene = new THREE.Scene(); // ...
这种方式通常需要配合一个构建工具（Bundler），比如 Vite 或者 Webpack，它们能帮你处理模块依赖、打包代码，是现代前端开发的标配。
🤔 我该怎么选？
选择困难？一张图告诉你：
-
如果你是：初学者、正在学习、做课程练习、写个小Demo。
- 👉 推荐：方式一 (CDN)，简单直接，快速看到效果。
-
如果你是：开发一个完整应用、与团队协作、使用Vue/React框架。
- 👉 推荐：方式二 (NPM)，规范专业，扩展性强。
工具已经备好，下一篇，我们就用最简单的方式，正式开始绘制我们的第一个3D场景！
#ThreeJS #前端开发 #项目搭建 #NPM #Vite #JavaScript #Web3D #编程入门 #技术干货