Three.js入门第一步：两种方式搭建你的3D项目[特殊字符]️

上一篇我们聊了学习Three.js前的“地基”知识，现在地基牢固，该正式动工了！在创造炫酷的3D世界之前，我们得先把开发环境给搭好。

官方手册提供了两种主流的安装方式，分别适用于不同场景。选对方法，事半功倍！

---

方式一：CDN + Importmap (极速上手)

这是官方最为推荐的、也是最简单的入门方式，尤其适合学习、做小练习、或者快速验证一个想法。

优点：无需安装任何东西！只需要一个能联网的浏览器。

操作方法：

在你的HTML文件中，你只需要添加一个

这种方式让你能专注于Three.js本身，而不被复杂的工程化配置所干扰。

---

方式二：NPM + 构建工具 (专业之选)

当你准备做一个正式的、复杂的、需要长期维护的项目时，这种“工程化”的方式就是不二之选。

优点：专业的项目管理、方便的版本控制、能配合各种现代前端框架（如Vue, React）使用。

操作方法：

1. 首先，确保你的电脑安装了 Node.js。
2. 在你的项目文件夹中，通过命令行安装Three.js：Bash

   npm install three
   

3. 然后，在你的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 #编程入门 #技术干货