# FlashFX 3D: Bringing Depth to Browser-Based Design

FlashFX has always been about making professional motion graphics accessible directly in the browser. With the 3D feature system, that mission takes a significant leap forward: you can now embed fully interactive, live 3D viewports directly inside your design canvas, no plugins, no separate software, no export-and-reimport loop.

Here's a breakdown of everything you can do.



# Live 3D Viewports on Your Canvas

Every 3D shape you place on the canvas behaves like any other element. You can reposition it, resize it, adjust its opacity, layer it with other elements, and animate it on the timeline, but inside that shape lives a fully independent 3D scene. You can orbit the camera, select and move objects, swap materials, and set up lighting, all without leaving the editor.

Each 3D shape is completely isolated. Editing one has zero effect on any other. This means you can have multiple 3D viewports on the same canvas simultaneously, each with its own camera angle, geometry, and material setup.



# Six Built-in Primitive Shapes

When you add a 3D element, you're greeted with a shape picker showing six primitives, each with a live animated preview:

* **Box** — a solid rectangular cuboid, the foundational building block
* **Sphere** — a smooth, perfectly round ball
* **Cylinder** — a tube with circular caps, great for pillars and buttons
* **Torus** — the classic donut shape, useful for rings and loops
* **Cone** — a pointed shape ideal for arrows and stylized icons
* **Capsule** — a rounded cylinder, commonly used in UI and game-adjacent design

Each shape comes with geometry controls, you can adjust dimensions, radius, height, and segment counts directly from the properties panel to fine-tune the silhouette.



# Model Import

Beyond the built-in primitives, you can import your own 3D models from your computer. Supported formats include:

* **GLB / GLTF**, the recommended format, self-contained with geometry, materials, and textures all in one file
* **OBJ**, Wavefront format, geometry only
* **FBX**, Autodesk format with basic material support
* **STL**, the 3D printing standard, geometry only

Imported models are automatically normalized, scaled and centered so they appear neatly in the viewport regardless of their original unit system or orientation.



# Six Material Types

Choosing the right material is where a 3D scene goes from placeholder to polished. FlashFX offers six distinct material types:

* **Standard**, the default physically-based material. You control roughness, metalness, emissive glow, and environment reflectivity. Works for most use cases.
* **Physical (Glass)**, extends Standard with transmission (transparency/glass), index of refraction, clearcoat, sheen, and iridescence. The go-to for glass, liquid, fabric, and pearlescent effects.
* **Lambert**, a simpler, flat-looking material without specular highlights. Good for stylized or matte aesthetics.
* **Phong**, the classic shading model with configurable specular highlights and shininess. A familiar look for anyone coming from older 3D tools.
* **Toon**, cel-shaded with discrete shading bands, giving a cartoon or anime aesthetic. Choose between 2, 3, or 5 shading steps.
* **Wireframe**, renders the mesh as a wireframe, exposing the underlying geometry structure.

Switching between types is seamless, color and opacity carry over, and everything else resets to sensible defaults.



# Texture Mapping

Any material can be enhanced with texture maps. You upload images directly from your computer and assign them to specific slots:

* **Color (Albedo)**, the base surface color and pattern
* **Roughness**, controls where the surface is glossy vs. matte
* **Metalness**, defines metallic vs. non-metallic areas
* **Normal**, adds surface detail and micro-bumps without geometry cost
* **Bump**, an older alternative to normal maps for surface detail
* **AO (Ambient Occlusion)**, bakes contact shadows into crevices for added depth
* **Emissive Map**, controls which areas glow and how intensely
* **Alpha**, masks transparency across the surface

Each texture can be further adjusted: you can tile it, offset it, rotate it, and set the wrap behavior (clamp, repeat, or mirrored repeat). Anisotropic filtering is also configurable for crisp texture clarity at oblique angles.



# Transform Gizmos

Selecting a 3D object inside a viewport reveals a transform gizmo, the same kind found in dedicated 3D tools. Three modes are available:

* **Translate**, move the object along the X, Y, and Z axes
* **Rotate**, spin the object around any axis
* **Scale**, resize the object on individual axes or uniformly

You can switch between modes with the buttons in the properties panel, or with the W / E / R keyboard shortcuts. Numeric inputs in the panel let you type precise values for position, rotation, and scale.



# Lighting and Environment

Every 3D scene has built-in three-point lighting out of the box, ambient fill, a primary directional light with soft shadows, and a secondary point light for depth. The environment panel lets you adjust light intensities, colors, and the scene background color to match your design's mood.



# Canvas-Level Controls

A 3D shape behaves like a fully native canvas element at the 2D level too. From the properties panel you can control:

* **Position** (X, Y)
* **Size** (width, height)
* **2D Rotation**
* **Opacity**

This means 3D elements participate in the animation timeline the same way any other layer does, you can fade them in, slide them across the canvas, or scale them with keyframes.



# Performance

The system is designed to stay light when you're not actively working inside a 3D shape. Each viewport only renders when something actually changes, while idle, it consumes no GPU resources. Shapes that are hidden or off-screen are paused automatically.



FlashFX 3D is available now as part of the core editor.

FlashFX video editor 3D features