vue-babylonjs
A ready-to-go 3d environment for Vue.js using Babylon.js
Last updated 2 years ago by brainbacon .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vue-babylonjs 
SYNC missed versions from official npm registry.

Animated 3D Vue Logo

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:

<template>
  <Scene>
    <Camera></Camera>
    <HemisphericLight diffuse="#0000FF"></HemisphericLight>
    <Entity :position="[0, 0, 5]">
      <Animation property="rotation.x" :duration="5" :end="Math.PI * 2"></Animation>
      <Animation property="rotation.y" :duration="5" :end="Math.PI * 2"></Animation>
      <Animation property="rotation.z" :duration="5" :end="Math.PI * 2"></Animation>
      <PointLight diffuse="#FF0000"></PointLight>
      <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}`"></Box>
        </template>
      </template>
    </Entity>
  </Scene>
</template>

It's even easier if you use Pug (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>

Getting Started, Installation, and API Documentation

See the documentation website

Updates

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

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.

See the discussion on the HTML 5 Game Dev Forums

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

Current Tags

  • 1.0.0-beta.7                                ...           latest (2 years ago)

17 Versions

  • 1.0.0-beta.7                                ...           2 years ago
  • 1.0.0-beta.6                                ...           2 years ago
  • 1.0.0-beta.5                                ...           3 years ago
  • 1.0.0-beta.4                                ...           3 years ago
  • 1.0.0-beta.3                                ...           3 years ago
  • 1.0.0-beta.2                                ...           3 years ago
  • 1.0.0-beta.1                                ...           3 years ago
  • 0.9.0                                ...           3 years ago
  • 0.8.0                                ...           3 years ago
  • 0.7.1                                ...           3 years ago
  • 0.7.0                                ...           3 years ago
  • 0.6.0                                ...           3 years ago
  • 0.5.0                                ...           3 years ago
  • 0.4.0                                ...           3 years ago
  • 0.3.0                                ...           3 years ago
  • 0.2.0                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 4
Last Day 0
Last Week 2
Last Month 16
Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |