搭建three.js开发环境

一、本地搭建threejs官方网站

three官网部署在国外，查看官网例子或者文档加载会很慢，所以在本地搭建官网的网站。

1. 在官网首页去到github下载文件

2. 在本地文件里进行安装和运行

npm install  // 安装
npm run dev //运行

3. 安装成功

二、用 npm 搭建 three.js开发环境

1. 使用 parcel 搭建

相关命令：

npm init // 初始化
npm install parcel-bundler --save-dev  // 安装 Parcel

//修改 `package.json`来添加这些任务脚本
{
  "scripts": {
    "dev": "parcel <your entry file>",
    "build": "parcel build <your entry file>"
  }
}

2. 安装 threejs

相关命令：

npm install three --save //安装threejs
npm run dev  //运行

使用three.js渲染第一个场景和物体:

三、不用 npm 搭建，纯 js 引入 three.js 来搭建开发环境

threejs官网有案例，如何创建一个环境：

当使用 轨道控制器OrbitControls.等 js , 由于 threejs 的插件都是模块的，所以要全部使用模块化。

1. 按照官网的例子，把threejs下载在本地，live example 运行起来

2.threejs全部使用模块

（1）参照官网例子，但是苹果系统不支持

（2）：导入three的函数

（3）引入 轨道控制器 OrbitControls.js ：

- 从官网下载 OrbitControls.js

（注意 OrbitControls.js 与使用得 threeejs版本要一致）

- 修改 OrbitControls.js源码