Repository files navigation

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

Quickly make a 3D animation:

It's this easy:

<template>  <Scene>    <Camera></Camera>    <HemisphericLightdiffuse="#0000FF"></HemisphericLight>    <Entity:position="[0, 0, 5]">      <Animationproperty="rotation.x":duration="5":end="Math.PI * 2"></Animation>      <Animationproperty="rotation.y":duration="5":end="Math.PI * 2"></Animation>      <Animationproperty="rotation.z":duration="5":end="Math.PI * 2"></Animation>      <PointLightdiffuse="#FF0000"></PointLight>      <templatev-for="xin [0,4,-4]">        <templatev-for="yin [0,4,-4]">          <Boxv-for="z in [0, 4, -4]":position="[x, y, z]":key="`${x},${y},${z}`"></Box>        </template>      </template>    </Entity>  </Scene></template>

It's even easier if you usePug (Jade) for templating:

<template lang="pug">  Scene    Camera    HemisphericLight(diffuse="#0000FF")    Entity(:position="[0, 0, 5]")      Animation(property="rotation.x":duration="5":end="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")      template(v-for="x in [0, 4, -4]")        template(v-for="y in [0, 4, -4]")          Box(v-for="z in [0, 4, -4]":position="[x, y, z]":key="`${x},${y},${z}`")</template>

See the documentation website

Subscribe to the mailing list issue to keep up with important updates

Vue-BabylonJS is a 3D graphics component plugin forVue.js powered byBabylonJS.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.

See the discussion on the HTML 5 Game Dev Forums

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.

SeeCONTRIBUTING.md