ShapelabDisplay

Share your 3D models with others and you can lively update your model.

Installation

Docker

You can run it by using docker compose.

docker-compose up

Manual

Or to install it by yourself, but you need to set up database by yourself.

mongod --dbpath=./db

And insert following information to your shapelab database:

foo@bar~$: mongo
> use shapelab
> db.createUser({
    user:"shapelab",
    pwd:"shapelab",
    roles: [{role:"readWrite", db:"shapelab"}],
    passwordDigestor:"server"
  });
> use shapelab
> db.createCollection("userList")
> db.userList.insert({"username":"admin", "password":"admin", "role":"admin"});

Then you can start your website now

npm start

Live Update

By default, server will use port 8081 to accept data. All authenticated data accepted through that port will broadcast to all corresponding user. We are using ZMQ protocol to receive data.

If you want to send data to server, first you need to initialize a ZMQ REQ socket, then send your model through stringified json object.

JSON Object format

In this json object, you can insert multiple objects dictionary, but each of them should follow either MODELFILE_DICT or GEOMETRY_DICT format.

Definition of json object: An array(list) contain MODELFILE_DICT or GEOMETRY_DICT or mix of these two.

[
MODELFILE_DICT,
MODELFILE_DICT,
GEOMETRY_DICT,
...
]

MODELFILE_DICT format

MODELFILE_DICT must have fields "fileName", "fileData", "username", "password". It is optional to have "color" and "configuration" fields.

{
    "fileName": "<MODEL_NAME>.<CORRECT_MODEL_SUFFIX>",
    "fileData": "<FILE_DATA_STRING>",
    "username": "<SHAPELAB_DISPLAY_USERNAME>",
    "password": "<SHAPELAB_DISPLAY_PASSWORD>",
    (Optional) "color": 0xff0000(Color RGB hex here),
    (Optional) "configuration": <TRANSOFORMATION_ARRAY>  
}

GEOMETRY_DICT format

And GEOMETRY_DICT must have fields "geometryType", "geometryData", "username", "password". It is optinal to have "geometryName", "color" and "configuration" fields.

{
    "geometryTypes": "<GEOMETRY_TYPE_STRING>"(Check all support type string below),
    "geometryData": "<GEOMETRY_TYPE_CORRESPONDING_DATA>",
    "username": "<SHAPELAB_DISPLAY_USERNAME>",
    "password": "<SHAPELAB_DISPLAY_PASSWORD>",
    (Optional) "geometryName": "<NAME_OF_GEOMETRY_OBJECT>"(If this field missing, use geometryTypes as geometryName),
    (Optional) "color": 0xff0000(Color RGB hex here),
    (Optional) "configuration": <TRANSOFORMATION_ARRAY>  

}

Use GEOMETRY_DICT to draw customized points, lines, triangles, polygons. There are different ways to draw different geometry.

Geometry Type	Available "geometryTypes"
point	"point"
lines	"lines", "lineSegments", "lineSegmentPairs"
triangles	"triangles", "triangleOnesides", "trianglePairs"
polygon	"polygon"

If "point", then give a 3D position in geometryData. A sphere with 0.1 radius with be drawn at that position. You can use 4th value in geometryData to control its radius.

If is "lines", then in geometryData user should provide an array of 3D vertices. A line will draw between consecutive pair of vertices. etc. [[0, 0, 0], [1, 0, 0], [0, 1, 0]] will draw following lines: [0, 0, 0] => [1, 0, 0], [1, 0, 0] => [0, 1, 0]

If is "lineSegments", then in geometryData user should provide an array of 3D vertices. A line will draw between each pair of vertices. etc. [[0, 0, 0], [1, 0, 0], [0, 1, 0], [2, 0, 0]] will draw following lines: [0, 0, 0] => [1, 0, 0], [0, 1, 0] => [2, 0, 0]

If is "lineSegmentPairs", then in geometryData user should provide an array of line segment, in which start and end point should be 3D vertices. etc. [[[0, 0, 0], [1, 0, 0]], [[0, 1, 0], [2, 0, 0]]] will draw following lines: [0, 0, 0] => [1, 0, 0], [0, 1, 0] => [2, 0, 0]

If is "triangles", then geometryData should be an array of 3D positions. Triangles will be generated every 3 vertices. Render double sides.

If is "triangleOnesides", then will generate triangles with one side rendering enabled.

If is "trianglePairs", then geometryData should be an array of array in which there should have 3 vertices 3D positions. Render double sides.

If is "polygon", then geometryData should be an array of polygon contour positions in clockwise or counterclockwise order. ONLY 2D points supported now. Will draw polygon by default on x-y plane.

TRANSFORMATION_ARRAY

TRANSOFORMATION_ARRAY is an array contains TRANFORMATION_DICT. Transformation will be applied in order.

[TRANSFORMATION_DICT, ...]

TRANSFORMATION_DICT options

{"translate": [REAL_NUMBER, REAL_NUMBER, REAL_NUMBER]}
{"rotateX": REAL_NUMBER}
{"rotateY": REAL_NUMBER}
{"rotateZ": REAL_NUMBER}

Advanced color setting

If you are using GEOMETRY_DICT, you can use advanced color settings for lines. But for different GEOMETRY_TYPE_STRING, they will accept different color setting.

For "lines", you can give it a hex number. you can give starting point and ending point color in a list. Or color for every vertex in list.

For "lineSegments", you can give it a hex number. you can give starting point and ending point color for each segment. Or color for every vertex in list.

For "lineSegmentPairs", you can give it a hex number. you can give starting point and ending point color for each segment. Or color for every vertex in list, or you can group every two vertices color in one list just like you did for vertices.

Reference and acknowledge

This project is based on Three.js editor.

micousuen / ShapelabDisplay