neo3dModel
Plugin for rendering 3D models (.glb format)
IMPORTANT: It will only work on compiled projects within a webserver (secure context).
Based on:
https://github.com/GoogleWebComponents/model-viewer
Sample App:
https://visualneo.com/tutorials/neo3dmodel
Description:
The neo3dModel plugin for VisualNEO Web enables the rendering and interaction with 3D models in .glb format, providing a versatile platform for integrating complex 3D visualizations into web applications. Here are the main features and possibilities of neo3dModel:
- Loading and Displaying 3D Models:
- Models in .glb format can be loaded and displayed within container objects using neo3dModelLoad. This command lets developers specify container elements and background color, enabling seamless integration of 3D models into web app interfaces.
- Camera Controls and Orbit:
- The plugin provides control over the camera’s position and movement, including neo3dModelCameraOrbit to set the camera’s orbit and neo3dModelCameraTarget to define focal points, allowing users to interactively explore 3D objects from various angles.
- Developers can also enable neo3dModelCameraControls, which supports user interactivity with the model through mouse or touch for rotation, zoom, and panning.
- Animations and Hotspots:
- Animations embedded within 3D models can be controlled with neo3dModelPlayAnimation and neo3dModelStopAnimation, allowing for dynamic visual experiences directly within the application.
- With neo3dModelAddHotspot, developers can add clickable hotspots to models, each with text annotations and customizable colors. This feature is especially useful for adding interactivity, like displaying additional information when users hover over or click specific model areas.
- Lighting and Environmental Effects:
- The plugin supports environment customization, such as setting skybox backgrounds with neo3dModelSetSkyboxImage to create realistic scenes. Developers can also control lighting effects, including shadow intensity, using neo3dModelShadowIntensity, which enhances the 3D viewing experience.
- Exporting and Saving Views:
- Users can capture screenshots of the 3D model view in various formats (PNG, JPEG) through neo3dModelSaveAsDataURL, which outputs the current view as a base64 data URL for easy sharing or saving.
By integrating neo3dModel, VisualNEO Web developers can add fully interactive 3D model viewing capabilities, ideal for applications in e-commerce, education, design, and interactive media.
neo3dModelLoad
|
Purpose: |
Load a 3D model in .glb format into a Container Object. |
|
Category: |
neo3dModel |
|
Syntax: |
neo3dModelLoad "containerId" modelfile "backgroundcolor"
containerId Choose Container Object modelfile Choose a 3d model file (.glb) backgroundcolor Background Color (ie: #646464 or red) |
neo3dModelBackgroundColor
|
Purpose: |
Set the 3D model background color |
|
Category: |
neo3dModel |
|
Syntax: |
neo3dModelBackgroundColor "containerId" "backgroundcolor"
containerId Choose Container Object backgroundcolor Background Color (ie: #646464 or red) |
neo3dModelCameraOrbit
|
Purpose: |
Set the orbital position of the camera |
|
Category: |
neo3dModel |
|
Syntax: |
neo3dModelCameraOrbit "containerId" "azimuthal" "polar" "distance"
containerId Choose Container Object azimuthal Azimuthal angle (ie 20deg or 1.5rad) polar Polar angle (ie 20deg or 1.5rad) distance Distance (ie 1.5m or 20cm or 50mm or 105%) |
neo3dModelCameraTarget
|
Purpose: |
Set the point the camera orbits around. Accepts values like 0m, 1.5m , -20cm, 3mm or 'auto' for center. |
|
Category: |
neo3dModel |
|
Syntax: |
neo3dModelCameraTarget "containerId" "xdistance" "ydistance" "zdistance"
containerId Choose Container Object xdistance X distance from model bounding box center ydistance Y distance from model bounding box center zdistance Z distance from model bounding box center |
neo3dModelCameraControls
|
Purpose: |
Enables controls via mouse/touch when in flat view. |
|
Category: |
neo3dModel |
|
Syntax: |
neo3dModelCameraControls "containerId" controls
containerId Choose Container Object controls Allow user drag model? |
neo3dModelAutoRotate
|
Purpose: |
Enables the auto-rotation of the model |
|
Category: |
neo3dModel |
|
Syntax: |
neo3dModelAutoRotate "containerId" autorotate
containerId Choose Container Object autorotate Enables auto rotation? |
neo3dModelShadowIntensity
|
Purpose: |
Controls the opacity of the shadow. Set to 0 to turn off the shadow entirely. Defaults to 0. Allowed values 0 to 1. Use 0.5 for mid shadow. |
|
Category: |
neo3dModel |
|
Syntax: |
neo3dModelShadowIntensity "containerId" intensity
containerId Choose Container Object intensity Shadow intensity |
neo3dModelPlayAnimation
|
Purpose: |
Controls the opacity of the shadow. Set to 0 to turn off the shadow entirely. Defaults to 0. Allowed values 0 to 1. Use 0.5 for mid shadow. |
|
Category: |
neo3dModel |
|
Syntax: |
neo3dModelPlayAnimation "containerId" "animationname"
containerId Choose Container Object animationname Animation name (empty for default) |
neo3dModelStopAnimation
|
Purpose: |
Controls the opacity of the shadow. Set to 0 to turn off the shadow entirely. Defaults to 0. Allowed values 0 to 1. Use 0.5 for mid shadow. |
|
Category: |
neo3dModel |
|
Syntax: |
neo3dModelStopAnimation "containerId"
containerId Choose Container Object |
neo3dModelGetCameraOrbit
|
Category: |
neo3dModel |
|
Syntax: |
neo3dModelGetCameraOrbit "containerId" [cameraorbit]
containerId Select a Container Object cameraorbit Variable to store result |
neo3dModelAddHotspot
|
Purpose: |
Add a hotspot with a text annotation. |
|
Category: |
neo3dModel |
|
Syntax: |
neo3dModelAddHotspot "containerId" "theName" "theText" "hotSpotColor" "annotationColor" "annotationBgColor" hotSpotData theCallBack theParameter
containerId Select a Container theName Hotspot name (ie: hotspot1) theText Text (HTML allowed) hotSpotColor Hotspot color (ie: #ff0000) annotationColor Annotation text color (ie: #000000) annotationBgColor Annotation background color (ie : #ffffff) hotSpotData Variable storing Hotspot data theCallBack Callback subroutine (optional) theParameter Subroutine parameter |
neo3dModelEnablePan
|
Purpose: |
Enable pan using mouse right click |
|
Category: |
neo3dModel |
|
Syntax: |
neo3dModelEnablePan "containerId" theOption
containerId Select a Container theOption Enable pan |
neo3dModelDisableZoom
|
Purpose: |
Disable mouse wheel zoom |
|
Category: |
neo3dModel |
|
Syntax: |
neo3dModelDisableZoom "containerId" theOption
containerId Select a Container theOption Disable zoom |
neo3dModelSaveAsDataURL
|
Purpose: |
Returns a screenshot of the current model render encoded as a base64 data URL string in PNG or JPEG format. |
|
Category: |
neo3dModel |
|
Syntax: |
neo3dModelSaveAsDataURL "containerId" format returnVar
containerId Select a Container format Image format returnVar Variable to store result |
neo3dModelSetSkyboxImage
|
Purpose: |
Sets an equirectangular projection image which is used as the skybox, and applied as an environment map to the model. |
|
Category: |
neo3dModel |
|
Syntax: |
neo3dModelSetSkyboxImage "containerId" skyboxImage
containerId Select a Conatiner object skyboxImage Equirectangular image |
neo3dModelGetHotspot
|
Purpose: |
Get HotSpot data from X,Y coordinates relative to the screen. |
|
Category: |
neo3dModel |
|
Syntax: |
neo3dModelGetHotspot "containerId" clientX clientY returnVar
containerId Select a Container clientX X position clientY Y position returnVar Variable to store Hotspot data |
neo3dModelGetMouseXY
|
Purpose: |
Get the mouse x and y coordinates relative to the screen. |
|
Category: |
neo3dModel |
|
Syntax: |
neo3dModelGetMouseXY theX theY
theX Variable to store X coordinate theY Variable to store Y coordinate |
Created with the Personal Edition of HelpNDoc: iPhone web sites made easy