项目技术选型

Three.js TypeScript Axios Less JsonServer

项目对接方法

import * as ThreeParkMap from '3d-park-map';

// 实例化
const threeParkMap = new ThreeParkMap()

// 初始化，config可以不传，有默认配置
threeParkMap.init(config)

// data是车场信息数据json，绘制3d车场
threeParkMap.draw(data)

项目开发流程

安装

yarn install

启动

开发环境

yarn start

启动mock服务

yarn mock

同时开启mock服务和开发服务

yarn serve

dll构建

yarn build:dll

生产构建（先运行dll构建）

yarn build

开发环境构建（先运行dll构建, 生成stats.json文件，上传webpack官网进行性能分析）

yarn dev-build

项目结构

|-- job
    |-- .eslintrc.json
    |-- .gitignore
    |-- README.md
    |-- package-lock.json
    |-- package.json
    |-- tsconfig.json
    |-- yarn-error.log
    |-- yarn.lock
    |-- config
    |   |-- common.js
    |   |-- dev.js
    |   |-- prod.js
    |   |-- webpack.config.js
    |   |-- webpack.dll.js
    |-- mock
    |   |-- db.json
    |-- public
    |   |-- index.html
    |   |-- dll
    |   |   |-- three.dll.js
    |   |   |-- three.dll.js.LICENSE.txt
    |   |   |-- three.manifest.json
    |   |-- static
    |       |-- fonts
    |       |   |-- helvetiker_regular.typeface.json
    |       |-- img
    |-- src
    |   |-- index.ts
    |   |-- components
    |   |   |-- cube.ts
    |   |   |-- index.ts
    |   |   |-- sphere.ts
    |   |-- config
    |   |   |-- enum.ts
    |   |-- core
    |   |   |-- base.ts
    |   |   |-- threeParkMap.ts
    |   |-- util
    |   |   |-- decoration.ts
    |   |   |-- storage.ts
    |   |-- view
    |       |-- index.ts
    |       |-- example
    |           |-- menu.ts
    |           |-- template
    |               |-- cameraConf.ts
    |               |-- menu.ts
    |-- typings
        |-- base.d.ts
        |-- index.d.ts
        |-- components
        |   |-- index.d.ts
        |-- core
        |   |-- threeParkMap.d.ts
        |-- util
        |   |-- storage.d.ts
        |-- view
            |-- menu.d.ts

项目结构说明

src下是所有核心代码文件

1. 其中封装的所有基础模块，组件，放在components下，cube.ts和sphere.ts作为例子，所有模块需要继承抽象类Base，并且init方法作为绘制方法入口，在index.ts下导出所有模块，这样开发界面右侧的模块列表下就会读到模块（模块的name属性），点击渲染当前模块内容。

  |-- src
    |   |-- index.ts
    |   |-- components
    |   |   |-- cube.ts
    |   |   |-- index.ts
    |   |   |-- sphere.ts
    |   |-- config
    |   |   |-- enum.ts
    |   |-- core
    |   |   |-- base.ts
    |   |   |-- threeParkMap.ts
    |   |-- util
    |   |   |-- decoration.ts
    |   |   |-- storage.ts
    |   |-- view
    |       |-- index.ts
    |       |-- example
    |           |-- menu.ts
    |           |-- template
    |               |-- cameraConf.ts
    |               |-- menu.ts

2. view下是视图文件，原则上本库是第三方库，不涉及具体视图，这里视图是开发时候用的界面，方便开发调试
3. util下是所有工具类，工具方法
4. config下是配置信息，常量，枚举等
5. core是核心类比如 threeParkMap以及项目核心流程代码

typings下是ts声明文件，尽量保持和src下一样的结构

mock下db.json是开发时候需要假数据时生成假数据的文件

一些说明

工具方法

装饰器

1. @log 装饰器实现对方法参数的打印，需要了解哪个方法的传参内容，加上此装饰器（参数是区分打印结果用的一段任意文本）