Creating the illusion of 3D exploration with static images and smart transitions
What you experience as a smooth, interactive 3D exploration is actually an ingenious combination of static images, carefully crafted transition videos, and intelligent JavaScript orchestration. It's like a sophisticated digital flipbook that responds to your clicks.
Think of it as cinematic web development – we're not building a 3D scene in real-time, we're directing a pre-rendered movie that adapts to user choices.
A state machine is like a smart traffic light system. At any moment, it's in one specific "state" (red, yellow, or green), and it can only change to certain other states based on specific rules.
In our project, each "state" represents a different view or perspective of the haptic transducer research. The user can navigate between these states, but only along paths we've defined.
Our demo has 5 main states, each representing a different aspect of the research:
Introduction to the breakthrough technology
Component breakdown and engineering details
Forces diagram of a single transducer (with an interactive switch)
Introduce the concept of multiple devices working together
Real-world use example- navigation sensory feedback
graph TD
A[State 1: Overview] --> B[State 2: Design]
A --> D[State 4: Arrays]
B --> A
B --> C[State 3: Mechanics]
B --> D
C --> B
C --> C3B[State 3B: Alternate View]
C3B --> C
D --> A
D --> B
D --> E[State 5: Applications]
E --> D
style A fill:#fff8e1
style B fill:#fff8e1
style C fill:#fff8e1
style C3B fill:#fff8e1
style D fill:#fff8e1
style E fill:#fff8e1
Each state in our demo follows this pattern:
Here's how our assets are organized:
assets/
├── animations/
│ ├── state-static/
│ │ ├── state1_static.webp ← Still images for each state
│ │ ├── state2_static.webp
│ │ └── state3_static.webp
│ │
│ ├── state1-to-state2.webm ← Transition videos
│ ├── state2-to-state1.webm ← Reverse transitions
│ ├── state1-to-state4.webm
│ └── state4-to-state1.webmUser sees a crisp, high-quality image. The scene appears to be "paused" and ready for interaction.
When clicked, a pre-rendered video plays, creating the illusion of camera movement through 3D space.
Video ends seamlessly on a new static image, maintaining the illusion of a continuous 3D environment.
JavaScript acts like a conductor in this digital orchestra. It doesn't create the visuals (that's done in Blender), but it knows exactly when to play each "instrument" (image or video) to create a seamless experience.
JavaScript keeps track of where the user currently is and what options are available:
let currentState = 1; // We're currently viewing State 1
const states = {
1: { title: "Overview", image: "state1_static.webp" },
2: { title: "Design", image: "state2_static.webp" },
// ... and so on
};When a user clicks, JavaScript decides what should happen:
// User wants to go from State 1 to State 2
if (currentState === 1 && targetState === 2) {
// Play the transition video: "state1-to-state2.webm"
playTransitionAnimation("state1-to-state2.webm");
} else {
// Handle other transitions...
}Sometimes there's no direct path between states. JavaScript automatically finds the best route:
// User wants State 1 → State 3, but no direct animation exists
// JavaScript automatically routes: State 1 → State 2 → State 3
await playAnimation("1-to-2.webm"); // First leg
await playAnimation("2-to-3.webm"); // Second legThe "3D exploration" feeling comes from carefully designed camera movements that follow natural human vision patterns. Each transition video simulates how you would move your head or body to examine an object from a different angle.
The key to the illusion is that each transition video starts exactly where the previous static image ended, and ends exactly where the next static image begins. There are no visual "jumps" or discontinuities.
sequenceDiagram
participant User
participant JS as JavaScript
participant IMG as Static Image
participant VID as Transition Video
User->>JS: Clicks navigation button
JS->>JS: Determine target state
JS->>VID: Load and play transition video
VID->>VID: Plays 1-second animation
VID->>JS: Video ends
JS->>IMG: Switch to target static image
JS->>User: New state ready for interaction
Pre-rendered videos load faster than real-time 3D, work on any device, and never stutter.
Blender rendering produces cinematic quality that's impossible to achieve in real-time web 3D.
Works perfectly on mobile devices, tablets, and older computers without requiring special plugins.
Users focus on the content, not figuring out complex 3D controls. Navigation is intuitive and familiar.
The beauty of this approach is its simplicity. You need:
Ready to dive deeper? Check out the full technical documentation to see the complete implementation details, including:
This introduction provides the foundation for understanding our approach. The magic is in the details – and those details are waiting in the full documentation.