https://github.com/Beg-in/vue-babylonjs

A ready-to-go 3d environment for Vue.js using Babylon.js
https://github.com/Beg-in/vue-babylonjs

3d babylonjs component-entity engine game gamedev graphics html javascript js reality virtual vr vue vuejs

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/Beg-in/vue-babylonjs
• Owner: Beg-in
• License: mit
• Created: 2018-01-29T04:53:32.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-02-11T05:37:55.000Z (almost 2 years ago)
• Last Synced: 2024-05-21T19:27:45.989Z (7 months ago)
• Topics: 3d, babylonjs, component-entity, engine, game, gamedev, graphics, html, javascript, js, reality, virtual, vr, vue, vuejs
• Language: JavaScript
• Homepage: https://vuebabylonjs.com
• Size: 14 MB
• Stars: 458
• Watchers: 25
• Forks: 72
• Open Issues: 33
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-babylonjs - Vue-BabylonJS - A ready-to-go 3D environment for Vue.js using Babylon.js ([demo](https://vuebabylonjs.com/)) (Projects)

README

        
[![Animated 3D Vue Logo](https://thumbs.gfycat.com/PinkPiercingBull-size_restricted.gif)](https://beg-in.github.io/vue-babylonjs/)

# Vue-BabylonJS

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

Quickly make a 3D animation:

![3D Animation](https://thumbs.gfycat.com/WhiteTangibleIndianspinyloach-size_restricted.gif)

It's this easy:

```vue

  

    

    

    

      

      

      

      

      

        

          

        

      

    

  

```

It's even easier if you use [Pug (Jade)](https://pugjs.org) for templating:

```vue

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

```

## Getting Started, Installation, and API Documentation

[See the documentation website](https://vuebabylonjs.com)

## Updates

[Subscribe to the mailing list issue to keep up with important updates](https://github.com/Beg-in/vue-babylonjs/issues/1)

## About

Vue-BabylonJS is a 3D graphics component plugin for [Vue.js](https://vuejs.org/) powered by [BabylonJS](https://www.babylonjs.com/).

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](http://www.html5gamedevs.com/topic/35379-vue-integration-like-a-frame/)

### 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.

## Contributing

See `CONTRIBUTING.md`