3d-park-map NPM

项目技术选型

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`下是所有核心代码文件

其中封装的所有基础模块，组件，放在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