three 1 环境搭建

汪大为 —— 无为而无不为

已于 2022-11-25 17:51:58 修改

阅读量344

点赞数

分类专栏：计算机图形学文章标签： javascript 前端 html

于 2022-11-24 16:56:24 首次发布

本文链接：https://blog.youkuaiyun.com/wdw18668109050/article/details/128010684

版权

计算机图形学专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用WebStorm创建项目文件夹，并通过npm初始化项目，选用Parcel作为打包工具。详细步骤包括设置package.json，安装parcel-bundler，配置scripts，创建src目录和index.html，引入three.js库，以及运行开发环境。最后，文章强调了遵循前端开发规范的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建一个项目文件夹 blibli-three , 把这个文件夹拖动到 WebStorm图标上。一个项目就建立好了。

npm init -y

-y 比较好，不然它会有好多问题来问你。现在的前端都是模块化开发，为了支持模块化开发，首先 npm init 来初始化项目，会得到一个pack.json。

npm init 我忘记打 -y ，问了好多问题，一路Enter 后，就得到一个 package.json 。

然后把它的script 的命令配置一下。这边的打包工具使用的是 parcel （一款比较轻量好用的打包工具）, 官网 Parcel - Web 应用打包工具 | Parcel 中文网进入快速开始，把他的一些命令粘贴到scripts属性中。

npm install  parcel-bundler  //  -g去掉 不进行全局安装，全局会进环境变量中

npm install parcel-bundler 后，parcel-bundler 的所有依赖就都从第三方node官方的库中安装到你的项目中了，你的项目也会多一个 node-modules 目录。

现在我们来改scripts:

就是如下这段：

  "scripts": {
    "dev": "parcel <your entry file>",
    "build": "parcel build <your entry file>"
  },

dev 是开发模式的命令，你要打包哪个文件，前端项目标准化都是打包src文件的。所以我们在项目下，建立一个src目录，然后填入到这个配置中。

src 目录下，顺便建立一个index.html ，这些都是大家约定俗成的江湖规矩。

parcel-bundler开发小工具，我们不把这个作为生产环境下使用的依赖，所以 cmd输入。

npm install parcel-bundler --save-dev

然后，按照江湖规矩，把静态资源文件夹和文件搞一搞。建立一个assets 文件夹：如下

现在把three搞进来，然后在main.js中把他import进来。

npm i three

html 中引入模块 <script src="./main/main.js" type="module"></script>

到此为止吧，不想加太多东西了。

npm run dev

至此，dist文件也有了。和index.html关联到的文件都会进入这个dist 文件。

搞一段代码，运行一下，看看效果。如果没记错，RGB 就是xyz的轴。

写帖子写了1个小时，右下角时间，2022年11月24日17:00分，一篇帖子要历时1小时，真不容易。

环境正式搭建完成了，下面开始，终于可以，疯狂搞起来了。