Developing 3W I like

To page top

MetaBlocksWeb

MetaBlocksWeb is the web application to model the organic shape by placing MetaBlocks. MetaBlocks blend each other and generate the smooth surface. That surface can be exported by .ply file format.

Screen operations:

Mouse click Select the MetaBlock or remove selection.
Mouse left drag Rotate the camera.
Mouse right drag Pan or tilt the camera.
Mouse middle button drag or wheel Zoom in or out the camera.

ToolBar:

File menu:

Save as JSON file: Save MetaBlocks data as the JSON file.
Open JSON file: Read MetaBlocks data from the saved JSON file.
Export ply file: Export triangles, vertex normal vectors and vertex colors of the surface as a ply file.(*.ply)
New data: Clear all MetaBlocks and undo/redo commands.

Add menu:

Add ball: Add a ball MetaBlock (Meta-ball). Ball properties below are shown on the right side.
Set the color.
Center Set the center location.
Radius Set radii.
Rotation Set the rotation.
Blending Set the blending ratio with other MetaBlocks.
Dent If checked, shave other MetaBlocks.
Sharpness Corner sharpness along each coordinate direction.
Shear, Taper, Twist, Wring Warp the MetaBlock.
Add cylinder: Add a cylinder MetaBlock. Cylinder properties below are shown on the right side.
Set the color.
Center Set the center location.
Size Set the radius and the height.
Rotation Set the rotation.
Blending Set the blending ratio with other MetaBlocks.
Dent If checked, shave other MetaBlocks.
Corner size Set the corner size (radius).
Caps Set the top or the bottom cap exists. If both doesn’t, the cylinder becomes the tube.
Shear, Taper, Twist, Wring Warp the MetaBlock.
Add box: Add a box MetaBlock. Box properties below are shown on the right side.
Set the color.
Center Set the center location.
Width Set the width along each coordinate axis.
Rotation Set the rotation.
Blending Set the blending ratio with other MetaBlocks.
Dent If checked, shave other MetaBlocks.
Corner size Set the corner size (radius).
Shear, Taper, Twist, Wring Warp the MetaBlock.
cone icon Add cone: Add a cone MetaBlock. Cone properties below are shown on the right side.
Set the color.
Center Set the center location.
Size Set the radius and the height.
Rotation Set the rotation.
Blending Set the blending ratio with other MetaBlocks.
Dent If checked, shave other MetaBlocks.
Corner size Set the corner size (radius).
Shear, Taper, Twist, Wring Warp the MetaBlock.
Add pyramid: Add a pyramid MetaBlock. Pyramid properties below are shown on the right side.
Set the color.
Center Set the center location.
Size Set the size along each coordinate axis.
Rotation Set the rotation.
Blending Set the blending ratio with other MetaBlocks.
Dent If checked, shave other MetaBlocks.
Corner size Set the corner size (radius).
Shear, Taper, Twist, Wring Warp the MetaBlock.
Add torus: Add a torus MetaBlock. Torus properties below are shown on the right side.
Set the color.
Center Set the center location.
Radius Set radii.
Rotation Set the rotation.
Blending Set the blending ratio with other MetaBlocks.
Dent If checked, shave other MetaBlocks.
Shear, Taper, Twist, Wring Warp the MetaBlock.

Add mesh from STL: Add a mesh MetaBlock based on triangles of the indicated STL file. The STL data should be closed (normal vectors are aligned and no holes).

Mesh properties below are shown on the right side.

 

Set the color.
Center Set the center location.
Width Set the width along each coordinate axis.
Rotation Set the rotation.
Blending Set the blending ratio with other MetaBlocks.
Dent If checked, shave other MetaBlocks.
Corner size Set the corner size (radius). Bigger  value spreads the area to blend other MetaBlocks. Smaller value takes more calculation time.
Sharpness Set the corner sharpness. Bigger value makes the smooth surface closer to the original STL model. This value doesn’t change the blending area to other MetaBlocks. Bigger value takes more calculation time.
Shear, Taper, Twist, Wring Warp the MetaBlock.

 

Warp:

Warp the MetaBlock by Shear, Taper, Twist, Bend and Wring.

The right is the warped MetaBlock example to be tapered, twisted and bent.

Shear:

Shear the MetaBlock.

X Tilt to the X direction similar to rotate on the Z axis (if “Change dir” is checked, on the Y axis)
Y Tilt to the Y direction similar to rotate on the X axis (if “Change dir” is checked, on the Z axis)
Z Tilt to the Z direction similar to rotate on the Y axis (if “Change dir” is checked, on the X axis)

Taper:

Taper the MetaBlock along each coordinate direction.

Twist:

Twist the MetaBlock on the coordinate axis.

Bend:

Bend the MetaBlock.

X Bend to Z direction to rotate on the X axis (if “Change dir” is checked, to the Y axis)
Y Bend to X direction to rotate on the Y axis (if “Change dir” is checked, to the Z axis)
Z Bend to Y direction to rotate on the Z axis (if “Change dir” is checked, to the X axis)

Wring:

Wring the MetaBlock along to the coordinate axis.

Set the color of the new MetaBlock.
Fit the camera to all MetaBlocks to be visible.
eraser icon Erase selected MetaBlock.
Undo edit operations.
Redo edit operations.

Transform buttons:

Transform the selected MetaBlock by dragging the standard gizmo of Three.js.

Translate selected MetaBlock.
translate gizmo
Red arrow Translate along X axis.
Red rectangle Translate perpendicular to X axis.
Green arrow Translate along Y axis.
Green rectangle Translate perpendicular to Y axis.
Blue arrow Translate along Z axis.
Blue rectangle Translate perpendicular to Z axis.
Center Translate perpendicular to the camera direction.
Rotate selected MetaBlock.
Red circle Rotate around X axis.
Green circle Rotate around Y axis.
Blue circle Rotate around Z axis.
Gray circle Rotate around the camera direction.
Center Rotate along the mouse drag direction.
Scale selected MetaBlock.
Red box Scale along X axis.
Red rectangle Scale perpendicular to the X axis (along Y and Z axes).
Green box Scale along Y axis.
Green rectangle Scale perpendicular to the Y axis (along X and Z axes).
Blue box Scale along Z axis.
Blue rectangle Scale perpendicular to the Z axis (along X and Y axes).

Settings:

settings dialog
Auto save to browser Automatically save the model and settings data to the browser ( to IndexedDB of the browser. The data is saved locally and isn’t sent to the server.). The editing model is kept when to run the app again. (The browser and the device should be the same.)
Orthographic camera Change the camera to the orthographic projection.
Head light Set the light direction along the camera.
Grid visible Show the grid.
Grid size Set the grid size.
Draw wire frames Draw the model by the wire frames.
Snap transform Set the increment step value of the transform (translate, rotate or scale) to the predefined value.
Precise surface Precisely calculate the surface generated by MetaBlocks (Smaller and more triangles, smooth appearance).