three 1 环境搭建

        创建一个项目文件夹 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 中

 就是如下这段：

  "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小时，真不容易。

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