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.
Connecting Draggable Nodes with 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.
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.
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.