@mapalchemy/explainer

Explainer - JavaScript 3D Animation library

The aim of the project is to create SIMPLE 3D JS animation engine for product and science explanations.

Main features

SIMPLE

One line of code for objects creation and chain animations.

Axis

• X, Y, Z Axis with 5 origin points
  Automatic coordinate transformation from user to browser to Three.js coordinate system

3D objects

• Line, Curve, Text, Plane, Cube, Sphere object creation

HTML Inside!

• Insert the HTML snippet or the web page
• Render using CSS3DRenderer without dept problem
• Render other 3D objects using WebGLRenderer
• Simple HTML requires only one line of code

Animations:

1. Object position chain animation
2. Fade-in-out chain animation
3. Camera position chain animation
4. Camera target chain animation
5. Object rotate chain animation

Player:

1. Video-like pause-stop controls
2. Slier component controls all animations
3. Markers auto creation

Installation

Currently npm is required to build the project.

npm i @mapalchemy/explainer

Live vue example

Explainer example vue

Documentation

Explainer doc Link

Vue install

This is example what you can animate with only 100 lines of code with Vue3:

Vue install doc Link

React install

Coming soon