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
/3d-app create a scene with a rotating product model
For model use file: [uploaded glb file or URL to glb file]

Example

Here’s a product viewer we created for a pair of shoes using the /3d-app command.

/3d-app create a simple viewer for a 3D model 
For model use file: https://bjs-playground.s3.us-east-1.amazonaws.com/sneakers.glb

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.

Model credit

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).

/filestorage write [3D app from the previous step] as "product-viewer-3d"

This creates a shareable link for:

  • Direct access to the application
  • Embedding in web pages
  • Testing and review
  • Collaboration