3D App Command Guide
Learn how to use the 3D App slash command to create interactive 3D web applications
The /3d-app
command enables you to create web-based 3D applications powered by Babylon.js. It’s experimental. You could try:
- Creating interactive 3D product experiences
- Building product configurators
- Developing architectural walkthroughs
- Constructing educational 3D models
- Help documentation for your product
See the Babylon.js documentation here https://www.babylonjs.com/ And the amazing forum here https://forum.babylonjs.com/
There’s so so much you can do with Babylon. At some point, you’ll get too complex for Pinkfish to handle because 3d is just so deep. But you should be able to do some simple stuff. Building a pipeline to create viewers for 3d models of your product should be within reach, for example.
Basic Usage
Use the command followed by a description of the 3D experience you want to create. Be specific about:
- Scene elements and objects
- Camera positioning
- Lighting setup
- Interactions and animations
- Material properties
Example
Here’s a product viewer we created for a pair of shoes using the /3d-app
command.
I had have a conversation with Pinkfish here to get the model bigger. Because it started out very small (almost invisible). You’ll find that models you get from the web often have peculiarities that you’ll need to figure out.
Key Features
Camera Types
- ArcRotateCamera: Orbits around a target point
- FreeCamera: First-person perspective
- FollowCamera: Follows a target object
- UniversalCamera: Combines keyboard and mouse controls
Lighting Options
- HemisphericLight: Ambient lighting from above
- PointLight: Light emitting from a point
- SpotLight: Focused cone of light
- DirectionalLight: Parallel light rays
Materials
- StandardMaterial: Basic material with properties
- PBRMaterial: Physically based rendering
- BackgroundMaterial: For skyboxes
- Custom shaders: For advanced effects
Interactions
- Pointer events (click, hover)
- Keyboard controls
- Physics interactions
- Custom animations
Saving and Sharing
After you’ve created your 3D app in one step, you can save it to a file and share it. Be sure to run the save operation in another step (eg: not the same step as the 3D app creation).
This creates a shareable link for:
- Direct access to the application
- Embedding in web pages
- Testing and review
- Collaboration