Pop Up Card Builder

3D pop-up card design tool

Built using JavaScript, HTML5, Drag and Drop, WebGL, Offline Support


More About This Demo From The Author

- https://www.facebook.com/caa1211

- https://github.com/caa1211/webOAcard

Porting from OpenGL version:
- http://youtu.be/MlV4Qf1-l4E

Mouse Operations:

Edit mode (init state / edit grid open)
- left key : add points on edit grid to create a contour
- right key : switch to Display mode
- scroll : change depth of edit grid

Contour editing
- left key : add points or close contour (connect to the start point or pressctrl key )
- right key : undo the last point

Contour closed (can use contour functions in GUI)
- left key : use contour to create a Face/Pull/Hole (select from GUI)
- right key : drag to move the contour
- scroll : change the depth of edit grid

Display mode (close edit grid)
- left key : move the camera
- right key : switch to Edit mode (open edit grid)
- scroll : change the card angle


編輯模式 (初始模式/編輯格開啟):
 左鍵 圈選輪廓
 右鍵 切換至展示模式
 滾輪 移動編輯格深度

 左鍵 點選輪廓或完成輪廓 (連接起點或按ctrl鍵)
 右鍵 輪廓回上一步

輪廓完成時 (可使用GUI中contour功能)
 左鍵 建立Face/Pull/Hole (由GUI選擇)
 右鍵 拖拉移動輪廓
 滾輪 移動編輯格深度

展示模式 (編輯格關閉)
 左鍵 拖拉移動攝影機
 右鍵 進入編輯模式 (開啟編輯格)
 滾輪 改變卡片角度

No comments yet.

Log in to add your own.

About this Demo

Download the Source 57978.13 KB · ZIP File

Browse the Source

This demo is released under the BSD license.