Magiz

生成轻量化建筑模型

Magiz 独特的体块生成逻辑可在 three.js 中通过一次 drawCall 渲染所有模型。适合在 web 端展示城市级尺度的模型场景。

For Generating Lightweight Building Models.

Magiz's unique block generation logic can render all models in Three.js with a single drawCall. Suitable for displaying city level model scenarios on the web.

Notice

Functions may change in the future.

Demo

play with example or demo

Basic Usage

npm i

First install dependencies.

npm run build

Bundle TS to ESM (dist\magiz.module.min.js).

Localhost example/index.html to see demo. this page can be the start point of creating new styles.

Refer to src/types for tips and type details.

To develop with ViewClass, which is a custom three.js environment, use npm run dev_ or npm run build_ instead.

Main Feature

To enable block only generation mode, set match to a none zero block size.

const plan = new Plan({ match: 2 })

This will only use block combinations for buildings and can be presented as 'instancedMesh' in Three.js to render all models in one drawCall.

Custom Styles

• Files related

  src/types/styleTypes.d.ts contains tips and type details for styles.

  src/styles contains style examples.

• Steps

1. Start watching files. Any changes will be bundled into dist\magiz.module.min.js

   npm run dev

2. Localhost example/index.html

   Recommend to init with VSC and Live Server extension.

3. Edit src\styles\preset.ts to create your presets

   Preset are style chunks can be reused in styles. src/class/styleClass/utils provide 'check' functions to offer type checking and param tips.

4. Edit src\styles\simple.ts to create your styles

   src/class/styleClass/utils provide 'preset' functions to import style chunks from src\styles\preset.ts and offer type checking and param tips.

Need More Styles

If someone creates a new style and is interested in contributing, please PR to establish a public awesome style library.

License

GPLv3

Misc

Any opinions and suggestions are welcomed !

周 曦 [email protected]

http://www.architech.fun/

Wechat: Ketchup