Examples - Animating SVG Within Three.js
Interlaces both WebGL and CSS3D renderers. SVG elements are added via CSS3DObject where they can be independently animated.
Draw Spiral Lines Lines are drawn along a spiral path.
Pendulum Clock A clock second hand is controlled via its pendulum.
Follow Path An ellipse follows a path.
Rotate & Translate This example rotates and transforms two elements and a line, using the Linear functon. The transformation moves a circle and attached line counter-clockwise around the edge.
Sine Wave Full sine wave is anamated. Note: This uses Snap.svg animations.
Rotate 3D SVG Sphere A 3D SVG Sphere is rotating, with it's shading responding to its light source. Note: SEEN.js creates the SVG and is controlling the rotation and shading.
3D SVG Terrain A 3D SVG Patch is undulating, with it's shading responding to its light source. Note: SEEN.js is controlling the undulation and shading.
Animate 3D SVG Geometric Solids A 3D SVG Geometric solid includes is own 3D environment and light source. It is rotating within Three.js. Select the desired Geometric Solid. Buttons are provided to change the 3D environment of the selected geometric solid. Note: The SVG Geometric solids created via SVG-VML-3D.js.
Polyhedron Geometric Solids There are 120 geometric solids: Platonic, Archimedean, Prism, Antiprism and Johnson. Three.js builds each as a polyhedron.