Sign Up for Free

RunKit +

Try any Node.js package right in your browser

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:

require("vue/package.json"); // vue is a peer dependency. var vueBabylonjs = require("vue-babylonjs")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-babylonjs v0.9.0

A ready-to-go 3d environment for Vue.js using Babylon.js

Vue-BabylonJS

Create high quality 3D graphics in the web as easily as writing HTML and CSS.

Quickly make a 3D animation:

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")

Getting Started

Installation

$ npm install vue-babylonjs

or:

$ 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]")

or:

(HTML)

<Scene>
  <Camera>
  <HemisphericLight>
  <Box :position="[0, 0, 5]">
</Scene>

About

Vue-BabylonJS is a 3D graphics component plugin for Vue.js powered by BabylonJS. Vue-BabylonJS draws inspiration from A-Frame, but can be more performant with the exclusion of DOM manipulation and has closer ties to JavaScript through property binding syntax in Vue. Compared to ReactVR which uses A-Frame, Vue-BabylonJS has the potential for higher performance, more organized and decoupled components, and a higher-quality rendering engine.

Rationale

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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free