X3D Examples
This collection of X3D examples showcases how powerful and flexible the standard can be for creating interactive 3D content on the web. You’ll find demonstrations of core features, including geometry, lighting, animation, prototyping, and scripting, each designed to highlight practical techniques. Whether you’re exploring X3D for learning, prototyping new ideas, or building full applications, these examples provide a solid starting point and inspiration.
Prototyping
Generating a Keyboard with JavaScript and Prototypes
In X3D, a virtual keyboard can be dynamically created by defining reusable key shapes as ProtoDeclare and instancing them with ProtoInstance. JavaScript scripts within the X3D scene can generate and arrange these prototypes programmatically, enabling interactive keyboard layouts.
Connect Draggable Nodes with Visual Routes
In X3D, draggable nodes can be made interactive by using PlaneSensor to capture user movements. By connecting these sensors to other nodes with ROUTE statements, you can dynamically update positions, orientations, or other properties in real time.
Particle Simulation
In X3D, particle simulations can be built using ProtoDeclare to define customizable particle simulations and appearance settings. JavaScript or ECMAScript scripts can control particle behavior over time, enabling dynamic effects like translation, and rotation.
Navigation
Keyboard Navigation
In X3D, keyboard navigation can be implemented by using KeySensor nodes to capture user input and control viewpoint movement or scene interactions. This allows users to explore the 3D environment intuitively, similar to navigating in a game or virtual tour.
Effects
Clipped Background for Day and Night
In X3D, you can create a clipped background by combining a Background node with geometry and ClipPlane nodes to reveal only part of the sky or environment. Switching between different backgrounds for day and night scenes allows you to simulate time-of-day transitions and enhance visual realism.
Scrolling Text
In X3D, scrolling text effects can be achieved by animating the position of text geometry while a ClipPlane hides the overflow outside a defined area. Combining TimeSensor, PositionInterpolator, and routing creates smooth, continuous text movement for banners, tickers, or credits.
Shaders
Waves
This X3D file simulates ripple waves formed by a falling droplet using sinusoidal displacement, with InstancedShape employed for efficient geometry reuse and ComposedShader for custom shading control. The shader applies a refined color scheme to enhance depth and motion, demonstrating how X3D can realistically and efficiently model natural wave phenomena.
Textures
Animated PNG
In X3D, an animated PNG can be displayed using MovieTexture, allowing frame-by-frame playback directly on 3D geometry. Custom controls implemented with sensors and scripts can start, pause, or resume the animation, giving users interactive control over the playback.