Create Animated 3D Graphics – vue-babylonjs

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';

2. Basic usage.

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


Create Animated 3D Graphics

Download Details:

Author: breadhead313

Live Demo:

Download Link:

Official Website:

Install & Download:

# Yarn
$ yarn add vue-babylonjs

$ npm i vue-babylonjs

Add Comment