Ternion项目启动与配置教程

1. 项目的目录结构及介绍

Ternion项目是一个基于Three.js的简单启动套件，用于快速原型设计你的创意想法。以下是项目的目录结构及其简单介绍：

Ternion/
├── public/                # 公共目录，用于存放构建后的文件
│   └── build/             # 构建目录，包含编译后的JavaScript文件
├── src/                   # 源代码目录
│   ├── css/               # 样式文件目录
│   ├── js/                # JavaScript源文件目录
│   ├── index.html         # 入口HTML文件
│   └── ...                # 其他源文件
├── .babelrc               # Babel配置文件
├── .gitignore             # Git忽略文件配置
├── LICENSE.md             # 项目许可证文件
├── README.md              # 项目说明文件
├── build.js               # 构建脚本文件
├── package-lock.json      # npm依赖锁定文件
├── package.json           # npm项目配置文件
└── server.js              # 本地服务器脚本文件

2. 项目的启动文件介绍

server.js 是项目的启动文件，它用于启动一个基于 budō 的本地开发服务器，并提供 LiveReload 功能，以便在代码更改时自动刷新浏览器。

以下是 server.js 的基本内容：

// 引入必要的模块
const budo = require('budo');
const Recipe = require('budo/recipe');

// 创建一个budō实例
const server = budo();

// 配置服务器
server.use(new Recipe({
  // ... 配置项
}));

// 启动服务器
server.listen(9966);

使用以下命令启动本地服务器：

npm start

3. 项目的配置文件介绍

package.json 是项目的npm配置文件，它定义了项目的依赖、脚本和元数据。

以下是 package.json 中的关键部分：

{
  "name": "ternion",
  "version": "1.0.0",
  "description": "A simple and opinionated starter kit to prototype quickly your ideas with Three.js",
  "main": "index.js",
  "scripts": {
    "start": "budo src/index.html",
    "build": "browserify src/index.js -o public/build/bundle.js -t [ babelify --presets [ es2015 stage-0 ] ] -t glslify"
  },
  "keywords": [
    "webgl",
    "threejs",
    "prototype",
    "starter-kit"
  ],
  "dependencies": {
    // ... 项目依赖
  },
  "devDependencies": {
    // ... 开发依赖
  },
  "license": "MIT"
}

package.json 中的 scripts 字段定义了两个NPM脚本：

• start：启动本地开发服务器
• build：构建项目，生成用于生产的打包文件

build.js 是自定义的构建脚本，它使用Browserify和插件来编译源代码，并生成一个单独的JavaScript文件。

使用以下命令构建项目：

npm run build

以上就是Ternion项目的启动与配置教程，希望对您的开发有所帮助。