neo3d
Round, flat, designer-friendly pseudo-3D engine
Based on:
https://github.com/metafizzy/zdog
Sample App:
https://visualneo.com/tutorials/neo3d
Description
The neo3d plugin for VisualNEO Web enables developers to add 3D graphics and interactivity to web applications using a range of commands to create, modify, and manipulate 3D shapes and objects within a canvas. Here’s an overview of its capabilities:
- 3D Object Creation:
- neo3d allows for the creation of basic 3D shapes like spheres, cylinders, cones, cubes, and polygons. Each object can be customized with specific attributes such as color, size, position, and rotation using commands like neo3dDrawSphere, neo3dDrawCylinder, and neo3dDrawBox.
- For more complex shapes, developers can use neo3dDrawPath and neo3dDrawPolygon, which allow custom path-based 3D object creation and versatile shape rendering.
- Transformations and Scaling:
- With neo3dScale and neo3dRotate, developers can scale and rotate individual objects or entire scenes, enabling a wide range of visual effects and enhancing the interactive experience.
- Objects can be transformed (moved) on the X, Y, or Z axes using neo3dTranslate, allowing full 3D positioning within the canvas.
- Grouping and Layering:
- The plugin supports grouping objects with neo3dNewGroup and neo3dCopyObjectGroup, which facilitates managing multiple 3D objects as single units for collective transformations and effects.
- Grouping is beneficial for animations, as developers can apply a rotation or translation to an entire group of objects, allowing for synchronized movements and complex scene designs.
- Interactivity and Animation:
- neo3d provides animation functions like neo3dAnimate, which can apply continuous rotation on any axis, useful for creating a rotating object or scene.
- It also supports real-time user interaction, including mouse drag and zoom functions (neo3dEnableDrag and neo3dSetZoom), allowing users to explore 3D objects interactively.
- Rendering and Export Options:
- Developers can render the scene onto the canvas using neo3dRender, updating the view to reflect any changes made to objects, properties, or positioning.
- 3D objects created with neo3d can be displayed within container objects, making it possible to integrate 3D graphics seamlessly within web app interfaces.
The neo3d plugin provides a robust set of tools for adding detailed 3D graphics and interactions, making it ideal for apps requiring visualizations, simulations, or interactive 3D elements.
neo3dInitialize
Purpose: |
Initialize neo3d into a Container object using Canvas |
Category: |
neo3d |
Syntax: |
neo3dInitialize "containerId" zoom
containerId Choose Container Object zoom Zoom level (1 = normal) |
neo3dInitializeSVG
Purpose: |
Initialize neo3d into a Container object using SVG |
Category: |
neo3d |
Syntax: |
neo3dInitializeSVG "rectangleId" zoom
rectangleId Choose Rectangle Object zoom Zoom level (1 = normal) |
neo3dRender
Purpose: |
Render (show) 3d objects. |
Category: |
neo3d |
Syntax: |
neo3dRender "containerId"
containerId Container object |
neo3dSetZoom
Purpose: |
Enlarges or shrinks the displayed size of the rendering. 1.5 value enlarge by 150% 0.5 value shrink to 50% size |
Category: |
neo3d |
Syntax: |
neo3dSetZoom "containerId" zoom
containerId Container object zoom Zoom level (1=100%) |
neo3dEnableDrag
Purpose: |
Enable user dragging |
Category: |
neo3d |
Syntax: |
neo3dEnableDrag "containerId"
containerId Container object |
neo3dAnimate
Purpose: |
Automatic 3d model rotation animation |
Category: |
neo3d |
Syntax: |
neo3dAnimate "containerId" speedx speedy speedz
containerId Container object speedx Rotation speed X axis (1 - 100) speedy Rotation speed Y axis (1 - 100) speedz Rotation speed Z axis (1 - 100) |
neo3dDrawArc
Purpose: |
Draw a 3d Arc |
Category: |
neo3d |
Syntax: |
neo3dDrawArc "containerId" "name" "translate" "rotate" "diameter" quarters "stroke" fill "color"
containerId Destination container, group or 3d object name name Object name translate Translate x,y,z (optional) rotate Rotate in degrees x,y,x (optional) diameter Diameter quarters Quarters of circle. The quarter circle starts in the upper-right and continues clockwise. stroke Stroke width (left empty for no stroke) fill Fill color Color |
neo3dDrawBox
Purpose: |
Draw a Box. Use a different color for each face or left any side color empty to make it transparent. |
Category: |
neo3d |
Syntax: |
neo3dDrawBox "containerId" "name" "translate" "rotate" "width" "height" "depth" "frontface" "rearface" "leftface" "rightface" "topface" "bottomface"
containerId Destination container, group or 3d object name name Object name translate Translate x,y,z (optional) rotate Rotate in degrees x,y,x (optional) width Width height Height depth Depth frontface Front face color rearface Rear face color leftface Left face color rightface Right face color topface Top face color bottomface Bottom face color |
neo3dDrawCircle
Purpose: |
Draw a 3d Circle |
Category: |
neo3d |
Syntax: |
neo3dDrawCircle "containerId" "name" "translate" "rotate" "diameter" "stroke" fill "color"
containerId Destination container, group or 3d object name name Object name translate Translate x,y,z (optional) rotate Rotate in degrees x,y,x (optional) diameter Diameter stroke Stroke width fill Fill color Color |
neo3dDrawCylinder
Purpose: |
Draw a Cylinder |
Category: |
neo3d |
Syntax: |
neo3dDrawCylinder "containerId" "name" "translate" "rotate" "diameter" "length" "color" "bfcolor"
containerId Destination container, group or 3d object name name Object name translate Translate x,y,z (optional) rotate Rotate in degrees x,y,x (optional) diameter Diameter length Length color Color bfcolor Back face color |
neo3dDrawCone
Purpose: |
Draw a Cone |
Category: |
neo3d |
Syntax: |
neo3dDrawCone "containerId" "name" "translate" "rotate" "diameter" "length" "color" "bfcolor"
containerId Destination container, group or 3d object name name Object name translate Translate x,y,z (optional) rotate Rotate in degrees x,y,x (optional) diameter Diameter length Length color Color bfcolor Back face color |
neo3dDrawEllipse
Purpose: |
Draw a 3d Ellipse |
Category: |
neo3d |
Syntax: |
neo3dDrawEllipse "containerId" "name" "translate" "rotate" "width" "height" "stroke" fill "color"
containerId Destination container, group or 3d object name name Object name translate Translate x,y,z (optional) rotate Rotate in degrees x,y,x (optional) width Width height Height stroke Stroke width (left empty for no stroke) fill Fill color Color |
neo3dDrawHemisphere
Purpose: |
Draw a Hemisphere |
Category: |
neo3d |
Syntax: |
neo3dDrawHemisphere "containerId" "name" "translate" "rotate" "diameter" "color" "bfcolor"
containerId Destination container, group or 3d object name name Object name translate Translate x,y,z (optional) rotate Rotate in degrees x,y,x (optional) diameter Diameter color Color bfcolor Back face color |
neo3dDrawLine
Purpose: |
Draw a 3d Line |
Category: |
neo3d |
Syntax: |
neo3dDrawLine "containerId" "name" "point1" "point2" "translate" "rotate" "stroke" "color"
containerId Destination container, group or 3d object name name Object name point1 Point 1 coordinates (x,y,z) point2 Point 2 coordinates (x,y,z) translate Translate x,y,z (optional) rotate Rotate in degrees x,y,x (optional) stroke Stroke width (left empty for no stroke) color Color |
neo3dDrawPath
Purpose: |
Draw a Path using drawing commands: line, move, arc, bezier |
Category: |
neo3d |
Syntax: |
neo3dDrawPath "containerId" "name" "translate" "rotate" [path] closed "stroke" "color"
containerId Destination container, group or 3d object name name Object name translate Translate x,y,z (optional) rotate Rotate in degrees x,y,x (optional) path Path JSON object closed Closed stroke Stroke width (left empty for no stroke) color color |
neo3dDrawPolygon
Purpose: |
Draw a 3d Polygon |
Category: |
neo3d |
Syntax: |
neo3dDrawPolygon "containerId" "name" "translate" "rotate" "radius" "sides" "stroke" fill "color"
containerId Destination container, group or 3d object name name Object name translate Translate x,y,z (optional) rotate Rotate in degrees x,y,x (optional) radius Radius sides Sides stroke Stroke width (left empty for no stroke) fill Fill color Color |
neo3dDrawRectangle
Purpose: |
Draw a 3d Rectangle |
Category: |
neo3d |
Syntax: |
neo3dDrawRectangle "containerId" "name" "translate" "rotate" "width" "height" "stroke" fill "color"
containerId Destination container, group or 3d object name name Object name translate Translate x,y,z (optional) rotate Rotate in degrees x,y,x (optional) width Width height Height stroke Stroke width (left empty for no stroke) fill Fill color Color |
neo3dDrawRoundedRectangle
Purpose: |
Add a 3d Rounded Rectangle |
Category: |
neo3d |
Syntax: |
neo3dDrawRoundedRectangle "containerId" "name" "translate" "rotate" "width" "height" "radius" "stroke" fill "color"
containerId Destination container, group or 3d object name name Object name translate Translate x,y,z (optional) rotate Rotate in degrees x,y,x (optional) width Width height Height radius Corner radius stroke Stroke width (left empty for no stroke) fill Fill color Color |
neo3dScale
Purpose: |
Scale whole drawing or 3d object |
Category: |
neo3d |
Syntax: |
neo3dScale "containerId" "scale"
containerId Container or 3d object scale Scale x,y,z (1 = 100%) |
neo3dRotate
Purpose: |
Rotate whole drawing or 3d object |
Category: |
neo3d |
Syntax: |
neo3dRotate "containerId" "rotate"
containerId Container or 3d object rotate Rotation in degrees x,y,x |
neo3dSetRotation
Purpose: |
Rotate whole drawing or 3d object along X axis |
Category: |
neo3d |
Syntax: |
neo3dSetRotation "containerId" rotate axis
containerId Container or 3d object rotate Rotation in degrees axis Axis |
neo3dGetRotation
Purpose: |
Get a 3d object rotation value in a single axis |
Category: |
neo3d |
Syntax: |
neo3dGetRotation "objectId" axis [myvar]
objectId Object name axis Axis myvar Variable to store result |
neo3dTranslate
Purpose: |
Translate whole drawing or 3d object |
Category: |
neo3d |
Syntax: |
neo3dTranslate "containerId" "translate"
containerId Container or 3d object translate Translate x,y,z |
neo3dSetTranslation
Purpose: |
Translate whole drawing or 3d object along X axis |
Category: |
neo3d |
Syntax: |
neo3dSetTranslation "containerId" translate axis
containerId Container or 3d object name translate Distance axis Axis |
neo3dGetTranslation
Purpose: |
Get a 3d object translation value in a single axis |
Category: |
neo3d |
Syntax: |
neo3dGetTranslation "objectId" axis [myvar]
objectId Object name axis Axis myvar Variable to store result |
neo3dSetProperty
Purpose: |
Set a 3d object property |
Category: |
neo3d |
Syntax: |
neo3dSetProperty "objectId" property value
objectId Object name property Property name value Property value |
neo3dGetProperty
Purpose: |
Get a 3d object property |
Category: |
neo3d |
Syntax: |
neo3dGetProperty "objectId" property [myvar]
objectId Object name property Property name myvar Variable to store result |
neo3dNewGroup
Purpose: |
Create group to later add 3d objects |
Category: |
neo3d |
Syntax: |
neo3dNewGroup "containerId" "newGroupId"
containerId Destination container, group or 3d object name newGroupId New group name |
neo3dRemoveObject
Purpose: |
Remove a 3d object |
Category: |
neo3d |
Syntax: |
neo3dRemoveObject "objectId"
objectId Object name |
neo3dCopyObject
Purpose: |
Copy a 3d object |
Category: |
neo3d |
Syntax: |
neo3dCopyObject "objectId" "destObjectId" "newObjectId"
objectId Object name (name of the object to be copied) destObjectId Destination object or group name newObjectId New object name |
neo3dCopyObjectGroup
Purpose: |
Copy a 3d object with its children objects |
Category: |
neo3d |
Syntax: |
neo3dCopyObjectGroup "objectId" "destObjectId" "newObjectId"
objectId Object name destObjectId Destination object or group name newObjectId New object name |
Created with the Personal Edition of HelpNDoc: Transform Your Documentation Process with HelpNDoc's Project Analyzer