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