Create Animated 3D Graphics – vue-babylonjs

Install & Download:

# Yarn
$ yarn add vue-babylonjs
# NPM
$ npm i vue-babylonjs

Description:

A Vue plugin used to create high-quality 3D graphics based on the Babylon.js library, which is a powerful, beautiful, simple, and open game and rendering engine.

How to use it:

1. Install and import the vue-babylonjs component.

import Vue from 'vue';
import vb from 'vue-babylonjs';
Vue.use(vb);

2. Basic usage.

<template>
  <Scene>
    <Camera></Camera>
    <HemisphericLight diffuse="#0000FF"></HemisphericLight>
    <Entity :position="[0, 0, 5]">
      <Animation property="rotation.x" :duration="5">
        <Key frame="0%" :value="0"></Key>
        <Key frame="100%" :value="Math.PI * 2"></Key>
      </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>

Preview: