This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 400,000 packages pre-installed, including
vue-babylonjs with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
Create high quality 3D graphics in the web as easily as writing HTML and CSS.
Quickly make a 3D animation:
It's this easy:
Scene Camera HemisphericLight(diffuse="#0000FF") Entity(:position="[0, 0, 5]") Animation(property="rotation.x" :duration="5") Key(frame="0%" :value="0") Key(frame="100%" :value="Math.PI * 2") Animation(property="rotation.y" :duration="5" :end="Math.PI * 2") Animation(property="rotation.z" :duration="5" :end="Math.PI * 2") PointLight(diffuse="#FF0000") Box(v-for="position in boxes" :position="position")
$ npm install vue-babylonjs
$ yarn add vue-babylonjs
In your script:
let Vue = require('vue'); Vue.use(require('vue-babylonjs'));
In your template (Pug):
Scene Camera HemisphericLight Box(:position="[0, 0, 5]")
<Scene> <Camera> <HemisphericLight> <Box :position="[0, 0, 5]"> </Scene>
We use BabylonJS because it is the most efficient, most feature-rich, and most modern WebGL graphics library available. The addition of Vue makes the engine reactive and development becomes easier to reason about and organize. Out-of-the-box mobile support and sensible defaults make getting started a breeze.
The underlying engine is easily accessible to give pros the tools to tweak every aspect of BabylonJS. The organizational structure of the library is a Component-Entity-System and the Entity component contains many powerful features such a matrix transformation to allow for interaction with the Scene graph like a group of HTML divs. Powerful tools are available such as an integrated reactive property system that enables modifying 3D objects within templates and a Shader component that makes adding WebGL shaders easy.