flowmo has a real-time 3D scene editor you embed on the page. Add it like any element, then open the full-screen editor to build a scene with meshes, models, lights, cameras, materials, particles, and post effects — and animate any of it on the timeline.
Where: Insert panel → Basics → 3D Scene (or the create menu) — Add a 3D Scene, then open the full-screen editor
Key ideas
- Where it runs: In websites and videos, and as a node in the flowGen canvas. It renders live with Three.js.
- The editor: A full-screen viewport with an outliner + inspectors and a toolbar (navigation, gizmo mode, cinematic, FX preview, assets, AI).
- Navigate: Blender-style orbit (middle-drag orbit, right-drag pan, scroll zoom; left for select/gizmo) plus a Fly mode for cinematic moves.
- 3D Scene card: Scene3DNode uses the authored shared-card path. Build a native 3D scene with models, materials, lights, cameras, effects, animation, and scene AI.
- Properties sidebar: Scene card/editor owned
- Opened surfaces: Real 3D editor; embedded scene document; Scene AI chat; reasoning
- Shader workspace and context-aware assistant: Scene 3D includes a real shader workspace. The assistant can read the current scene and the object/material/uniform under the pointer, then add valid vertex/fragment code and surfaced uniform controls.
- Real mesh smoothing and modifiers: Imported models can receive geometry modifiers; faceted versus smooth is a material choice; Shade smooth updates normals; Subdivision creates geometry; and Smooth by angle can apply to the whole selection.
Steps
- Insert a 3D Scene and size its host element for the intended website/video composition.
- Open the full-screen 3D editor and use the outliner plus viewport to add/select meshes, models, groups, lights, cameras, instancers, effectors, HTML textures, or shader layers.
- Build hierarchy and transforms, then configure materials, environment, lighting, cameras, post effects, particles/replicators, and performance settings in bounded stages.
- Expose only the properties that need f0 timeline/interaction control.
- Return to the canvas and verify the live scene, camera framing, pointer behavior, breakpoints, reduced-motion/mobile fallback, and timeline animation in Preview.
- Choose the camera framing, inspect existing keys, apply a named move with duration and amount, and scrub before rendering. Use the detailed cinematic guide for preset names, rail behavior, and backdrop boundaries.
Flowgen 3D Scene card
- Live/frozen WebGL preview.
- Scene document/source state.
- Play/pause animation.
- Render the cinematic camera.
- Generate/abort from the scene-AI prompt.
- Open the real 3D editor.
Opened surfaces
- Native 3D editor.
- Embedded scene document.
- Scoped Scene AI chat and reasoning history.
- Cinematic render/preview.
3D Scene controls and presets
- Add path: Flowgen → Add → 3D → 3D Scene.
- Card: Scene3DNode.
- Properties: Scene card/editor owned.
- Controls: Scene source/document; live/frozen preview; play/pause; cinematic render; generate/abort; open editor.
- Opened surfaces: Real 3D editor; embedded scene document; Scene AI chat; reasoning.
Current geometry/shader behavior
- Custom shaders declare both required stages and their uniforms.
- Declared uniforms create matching controls.
- Modifiers work on imported model meshes, not only primitives.
- Faceted/smooth material shading does not require rebuilding geometry.
- Shade smooth and subdivision perform their literal mesh operations.
- Smooth by angle respects selection-wide editing.
Cinematic camera and motion workflow
Camera Lens presets and Focal length express the existing field of view in millimetres. The motion library writes real editable cinematic keyframes relative to the camera or object’s current pose. Guide paths support camera rails without adding a visible swept tube. The image backdrop is a modeling aid that stays out of cinematic playback and delivered output.
- Inspect animation before changing existing motion. keyframe_scene and apply_motion_preset replace the channels they touch by default; choose merge only deliberately.
- Camera presets require cameraId; object presets require nodeId. These are internal scene IDs, not the Flowgen node ID or HTML element ID.
- For MCP, open the node editor, select the Scene3D host element, and enumerate document tools. The selected or sole scene is pinned by the bridge; a caller cannot redirect the operation with an id argument.
- inspect_scene reads current scene values and animation without writing; animate_scene_field controls exposed fields via scroll, mouse, hover, or load instead of cinematic time.
Tips
- Name imported submeshes, groups, cameras, and important effects before the scene grows.
- Test a reduced mobile/post-FX configuration and an accessible fallback for decorative 3D.
Limitations and important notes
- Complex geometry, high-resolution textures, particles, mirrors, path tracing, and stacked post effects can exceed device GPU budgets.
- The active camera and selected Scene3D host determine what users see; editing the right scene with the wrong camera can look like a failed change.
Troubleshooting
The scene is blank
Check the active camera, object scale/position, environment/lights, material opacity, host dimensions, model URL, and whether the intended Scene3D element is selected.
The canvas is smooth but Preview is slow
Measure with runtime interactions active; reduce model/texture weight, particles, mirrors, path tracing, and post passes, then add a mobile fallback.
Related guides
- Objects: primitives, models & transforms
- Materials & presets
- Animating 3D & exposing properties
- Edit a 3D scene with the scoped AI assistant
- Build an ordered 3D modifier stack
- Draw, sweep, trim, and animate 3D paths
- 3D cinematic authoring: lenses, motion presets, camera rails, and reference backdrops