├── .babelrc ├── .eslintrc.js ├── .github └── ISSUE_TEMPLATE │ └── bug_report.md ├── .gitignore ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── docs ├── 87508497f55ce42b5f885b8572c2c538.jpg ├── CNAME ├── d2ff6edb998f9ad063f8.js ├── d2ff6edb998f9ad063f8.js.map ├── favicon.png ├── fb29cdf16315e8a80f65.css ├── fb29cdf16315e8a80f65.css.map └── index.html ├── examples ├── .eslintrc.js ├── README.md ├── animation.pug ├── animation.vue ├── asset.pug ├── asset.vue ├── entity.pug ├── entity.vue ├── fragment.glsl ├── light │ ├── directional.pug │ ├── directional.vue │ ├── hemispheric.pug │ ├── hemispheric.vue │ ├── point.pug │ ├── point.vue │ ├── spot.js │ ├── spot.pug │ └── spot.vue ├── logo.js ├── logo.pug ├── logo.vue ├── material.pug ├── material.vue ├── mesh.pug ├── mesh.vue ├── observable.js ├── observable.pug ├── observable.vue ├── physics.js ├── physics.pug ├── physics.vue ├── property.pug ├── property.vue ├── scale.pug ├── scale.vue ├── scene.pug ├── scene.vue ├── shader.js ├── shader.pug ├── shader.vue ├── side.pug ├── side.vue ├── texture.pug ├── texture.vue └── vertex.glsl ├── package.json ├── properties.js ├── rollup.config.js ├── site ├── .eslintrc.js ├── CNAME ├── about.md ├── about.vue ├── animation.vue ├── app.vue ├── asset.vue ├── assets │ ├── brian.jpg │ └── github.svg ├── camera.vue ├── controls.vue ├── entity.vue ├── favicon.png ├── global.sass ├── highlight.sass ├── home.vue ├── index.js ├── index.pug ├── installation.vue ├── light.vue ├── material.vue ├── mesh.vue ├── observable.vue ├── physics.vue ├── property.vue ├── scene.vue ├── shader.vue ├── texture.vue ├── types.vue ├── variables.sass ├── vuefile.pug └── vuefile.vue └── src ├── animation ├── docs.md ├── index.js └── key.js ├── api.js ├── asset ├── docs.md └── index.js ├── camera ├── docs.md └── index.js ├── core.js ├── docs.md ├── entity ├── abstract.js ├── docs.md └── index.js ├── full.js ├── index.js ├── light ├── directional.js ├── docs.md ├── hemispheric.js ├── index.js ├── point.js └── spot.js ├── material ├── docs.md └── index.js ├── mesh ├── abstract.js ├── docs.md └── index.js ├── mixins.js ├── observable ├── docs.md ├── index.js ├── template.pug └── vue.pug ├── physics ├── abstract.js ├── cannon.js ├── docs.md ├── index.js └── oimo.js ├── property ├── docs.md └── index.js ├── scene ├── docs.md └── index.js ├── shader ├── attribute.js ├── content.js ├── docs.md ├── fragment.js ├── index.js ├── uniform.js ├── variable.js └── vertex.js ├── texture ├── docs.md └── index.js ├── types ├── color.js ├── docs.md ├── matrix.js └── vector.js └── util ├── index.js └── test.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "comments": false, 3 | "presets": [["@babel/preset-env", { 4 | "targets": "last 2 versions" 5 | }]], 6 | "env": { 7 | "dist": { 8 | "presets": [["@babel/preset-env", { 9 | "modules": false 10 | }]] 11 | }, 12 | "test": { 13 | "presets": [["@babel/preset-env", { 14 | "modules": "commonjs" 15 | }]] 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = require('begin-project/lint'); 4 | module.exports.rules['no-underscore-dangle'] = 0; 5 | module.exports.rules['security/detect-object-injection'] = 0; 6 | module.exports.rules['import/no-extraneous-dependencies'] = 0; 7 | module.exports.rules['global-require'] = 0; 8 | module.exports.parserOptions = { sourceType: 'module' }; 9 | module.exports.rules.strict = 0; 10 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **Minimally Reproducible Example** 14 | 25 | - link: https://glitch.com/... 26 | 27 | **To Reproduce** 28 | Steps to reproduce the behavior: 29 | 1. Go to '...' 30 | 2. Click on '....' 31 | 3. See error in (location [e.g. JavaScript Console]) 32 | 33 | **Expected behavior** 34 | A clear and concise description of what you expected to happen. 35 | 36 | **Screenshots (optional)** 37 | Add any screenshots to help explain your problem, unless the minimally reproducible example is sufficient. 38 | 39 | **Environment (please complete the following information):** 40 | - Device: [e.g. Desktop or Smartphone] 41 | - OS: [e.g. Windows] 42 | - Browser [e.g. chrome, safari] 43 | - Version [e.g. 22] 44 | 45 | **Additional context** 46 | Add any other context about the problem here. 47 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | npm-debug.log 4 | package-lock.json 5 | dump.rdb 6 | yarn-error.log 7 | yarn.lock 8 | dist 9 | lib 10 | vendor 11 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # [1.0.0-beta.7](https://github.com/Beg-in/vue-babylonjs/compare/1.0.0-beta.5...1.0.0-beta.7) (2019-06-02) 2 | 3 | 4 | ### Bug Fixes 5 | 6 | * **asset:** set root mesh to single mesh if possible ([f6bc9cf](https://github.com/Beg-in/vue-babylonjs/commit/f6bc9cf)) 7 | * **docs:** template highlighting issues ([16f666c](https://github.com/Beg-in/vue-babylonjs/commit/16f666c)) 8 | * **observable:** fix for onentity emit ([51b7745](https://github.com/Beg-in/vue-babylonjs/commit/51b7745)) 9 | * **package:** audit cleanup and peer dependencies ([266e52c](https://github.com/Beg-in/vue-babylonjs/commit/266e52c)), closes [#21](https://github.com/Beg-in/vue-babylonjs/issues/21) 10 | * **scene:** race condition with detecting a camera for exclusion of the default environment ([207df91](https://github.com/Beg-in/vue-babylonjs/commit/207df91)) 11 | 12 | 13 | ### Features 14 | 15 | * **asset:** add asset component ([78116b3](https://github.com/Beg-in/vue-babylonjs/commit/78116b3)) 16 | * **observable:** add support with vue custom events ([bd8dac0](https://github.com/Beg-in/vue-babylonjs/commit/bd8dac0)) 17 | * **Observable:** observable events emitted by entity and scene components ([5e016cd](https://github.com/Beg-in/vue-babylonjs/commit/5e016cd)), closes [#5](https://github.com/Beg-in/vue-babylonjs/issues/5) 18 | 19 | 20 | ### BREAKING CHANGES 21 | 22 | * **package:** Babylon.js and loaders are now peer dependencies. Add `@babylonjs/core` and 23 | `@babylonjs/loaders` when using this package from npm. 24 | 25 | 26 | 27 | # [1.0.0-beta.5](https://github.com/Beg-in/vue-babylonjs/compare/1.0.0-beta.4...1.0.0-beta.5) (2018-06-13) 28 | 29 | 30 | ### Bug Fixes 31 | 32 | * **site:** fix webpack build for local development ([3e62158](https://github.com/Beg-in/vue-babylonjs/commit/3e62158)) 33 | 34 | 35 | 36 | # [1.0.0-beta.4](https://github.com/Beg-in/vue-babylonjs/compare/1.0.0-beta.3...1.0.0-beta.4) (2018-05-24) 37 | 38 | 39 | ### Bug Fixes 40 | 41 | * **esm:** support environments with esm Vue ([a2a921f](https://github.com/Beg-in/vue-babylonjs/commit/a2a921f)) 42 | 43 | 44 | 45 | # [1.0.0-beta.3](https://github.com/Beg-in/vue-babylonjs/compare/1.0.0-beta.2...1.0.0-beta.3) (2018-04-21) 46 | 47 | 48 | ### Bug Fixes 49 | 50 | * **controls:** add margin bottom to controls example ([e121220](https://github.com/Beg-in/vue-babylonjs/commit/e121220)) 51 | 52 | 53 | 54 | # [1.0.0-beta.2](https://github.com/Beg-in/vue-babylonjs/compare/1.0.0-beta.1...1.0.0-beta.2) (2018-03-30) 55 | 56 | 57 | ### Bug Fixes 58 | 59 | * **scene:** default environment now activates properly ([ac79e6a](https://github.com/Beg-in/vue-babylonjs/commit/ac79e6a)) 60 | 61 | 62 | 63 | # [1.0.0-beta.1](https://github.com/Beg-in/vue-babylonjs/compare/0.9.0...1.0.0-beta.1) (2018-03-30) 64 | 65 | 66 | 67 | # [0.9.0](https://github.com/Beg-in/vue-babylonjs/compare/0.8.0...0.9.0) (2018-03-25) 68 | 69 | 70 | ### Features 71 | 72 | * **physics:** add physics impostor support ([cbc547a](https://github.com/Beg-in/vue-babylonjs/commit/cbc547a)) 73 | 74 | 75 | 76 | # [0.8.0](https://github.com/Beg-in/vue-babylonjs/compare/0.7.1...0.8.0) (2018-03-22) 77 | 78 | 79 | ### Features 80 | 81 | * **material:** add material with pbr support ([9261b6c](https://github.com/Beg-in/vue-babylonjs/commit/9261b6c)) 82 | 83 | 84 | 85 | ## [0.7.1](https://github.com/Beg-in/vue-babylonjs/compare/0.7.0...0.7.1) (2018-02-24) 86 | 87 | 88 | 89 | # [0.7.0](https://github.com/Beg-in/vue-babylonjs/compare/0.6.0...0.7.0) (2018-02-08) 90 | 91 | 92 | ### Features 93 | 94 | * **camera:** add camera component ([6829d85](https://github.com/Beg-in/vue-babylonjs/commit/6829d85)) 95 | * **entity:** add propreties system ([10124f1](https://github.com/Beg-in/vue-babylonjs/commit/10124f1)) 96 | 97 | 98 | 99 | # [0.6.0](https://github.com/Beg-in/vue-babylonjs/compare/0.5.0...0.6.0) (2018-02-05) 100 | 101 | 102 | ### Features 103 | 104 | * **material:** add shader uniform and attribute components ([4c17b62](https://github.com/Beg-in/vue-babylonjs/commit/4c17b62)) 105 | * **material:** add shaders ([c7bd5cb](https://github.com/Beg-in/vue-babylonjs/commit/c7bd5cb)) 106 | * **material:** add vertex and fragment components ([93d2959](https://github.com/Beg-in/vue-babylonjs/commit/93d2959)) 107 | 108 | 109 | 110 | # [0.5.0](https://github.com/Beg-in/vue-babylonjs/compare/0.4.0...0.5.0) (2018-01-31) 111 | 112 | 113 | ### Features 114 | 115 | * **animations:** add animations ([cb8297b](https://github.com/Beg-in/vue-babylonjs/commit/cb8297b)) 116 | * **animations:** add animations ([1f3482d](https://github.com/Beg-in/vue-babylonjs/commit/1f3482d)) 117 | 118 | 119 | 120 | # [0.4.0](https://github.com/Beg-in/vue-babylonjs/compare/0.3.0...0.4.0) (2018-01-30) 121 | 122 | 123 | ### Features 124 | 125 | * **entity:** add entity lifecycle hooks ([4705ea4](https://github.com/Beg-in/vue-babylonjs/commit/4705ea4)) 126 | * **entity:** add entity lifecycle hooks ([1072f52](https://github.com/Beg-in/vue-babylonjs/commit/1072f52)) 127 | 128 | 129 | 130 | # [0.3.0](https://github.com/Beg-in/vue-babylonjs/compare/0.2.0...0.3.0) (2018-01-30) 131 | 132 | 133 | ### Features 134 | 135 | * **light:** add lights ([297622f](https://github.com/Beg-in/vue-babylonjs/commit/297622f)) 136 | 137 | 138 | 139 | # [0.2.0](https://github.com/Beg-in/vue-babylonjs/compare/1c8615b...0.2.0) (2018-01-29) 140 | 141 | 142 | ### Features 143 | 144 | * **entity:** add entity and some basic meshes ([2cc7c33](https://github.com/Beg-in/vue-babylonjs/commit/2cc7c33)) 145 | * **entity:** add entity and some basic meshes ([ebb4a76](https://github.com/Beg-in/vue-babylonjs/commit/ebb4a76)) 146 | * **plugin:** create Vue and Vuex plugins ([1c8615b](https://github.com/Beg-in/vue-babylonjs/commit/1c8615b)) 147 | 148 | 149 | 150 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Contributing 2 | 3 | ### Getting Started 4 | 5 | You will need Node.js version 8.9 or higher. 6 | 7 | The development environment only supports Unix shells, i.e. Mac OS and Linux. 8 | 9 | For Windows environments, consider using Windows Subsystem for Linux or a cloud-based development server. 10 | 11 | ### Starting the Example Site 12 | 13 | ```bash 14 | $ npm install 15 | $ npm start 16 | ``` 17 | 18 | Navigate your browser to http://localhost:8080 19 | 20 | Note: port may change depending on usage in your system, observe the terminal output when running the start command to see what port the site is running on. 21 | Note: this will generate library files in the `vendor` directory. These should not be modified manually and are ignored by git. 22 | 23 | ### Building the Example Site for Github Pages 24 | 25 | ```bash 26 | $ npm run build 27 | ``` 28 | 29 | ### Commit Messages 30 | 31 | This repository will only support commit messages in the Angular format from Commitizen. 32 | 33 | These messages are easily produced using the interactive commitizen interface 34 | 35 | ```bash 36 | $ npm run b cz 37 | ``` 38 | 39 | ### Releases 40 | 41 | Prepare the package for distribution: 42 | 43 | ```bash 44 | $ npm run dist 45 | ``` 46 | 47 | This package follows Symantic Versioning use the following scripts to tag the package and update the version number. 48 | 49 | ```bash 50 | $ npm run b patch 'some-unique-release-identifier' 51 | $ npm run b minor 'some-unique-release-identifier' 52 | $ npm run b major 'some-unique-release-identifier' 53 | ``` 54 | 55 | ### Programming Guidelines 56 | 57 | Examples and templates will be written in Pug instead of HTML. 58 | 59 | linting: 60 | 61 | ```bash 62 | $ npm run b lint 63 | ``` 64 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 Brian Jesse 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Animated 3D Vue Logo](https://thumbs.gfycat.com/PinkPiercingBull-size_restricted.gif)](https://beg-in.github.io/vue-babylonjs/) 2 | # Vue-BabylonJS 3 | 4 | Create high quality 3D graphics in the web as easily as writing HTML and CSS. 5 | 6 | Quickly make a 3D animation: 7 | 8 | ![3D Animation](https://thumbs.gfycat.com/WhiteTangibleIndianspinyloach-size_restricted.gif) 9 | 10 | It's this easy: 11 | 12 | 13 | ```vue 14 | 31 | ``` 32 | 33 | It's even easier if you use [Pug (Jade)](https://pugjs.org) for templating: 34 | 35 | ```vue 36 | 49 | ``` 50 | 51 | ## Getting Started, Installation, and API Documentation 52 | 53 | [See the documentation website](https://vuebabylonjs.com) 54 | 55 | ## Updates 56 | 57 | [Subscribe to the mailing list issue to keep up with important updates](https://github.com/Beg-in/vue-babylonjs/issues/1) 58 | 59 | ## About 60 | 61 | Vue-BabylonJS is a 3D graphics component plugin for [Vue.js](https://vuejs.org/) powered by [BabylonJS](https://www.babylonjs.com/). 62 | 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. 63 | 64 | [See the discussion on the HTML 5 Game Dev Forums](http://www.html5gamedevs.com/topic/35379-vue-integration-like-a-frame/) 65 | 66 | ### Rationale 67 | 68 | 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. 69 | 70 | 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. 71 | 72 | ## Contributing 73 | 74 | See `CONTRIBUTING.md` 75 | -------------------------------------------------------------------------------- /docs/87508497f55ce42b5f885b8572c2c538.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Beg-in/vue-babylonjs/1b8b93cea2368bc3a289fa3d30f41c2c62db673c/docs/87508497f55ce42b5f885b8572c2c538.jpg -------------------------------------------------------------------------------- /docs/CNAME: -------------------------------------------------------------------------------- 1 | vuebabylonjs.com 2 | -------------------------------------------------------------------------------- /docs/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Beg-in/vue-babylonjs/1b8b93cea2368bc3a289fa3d30f41c2c62db673c/docs/favicon.png -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | Vue-BabylonJS Documentation site
-------------------------------------------------------------------------------- /examples/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = require('../site/.eslintrc'); 2 | -------------------------------------------------------------------------------- /examples/README.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | [**You probably want to see examples on the documentation website**](https://beg-in.github.io/vue-babylonjs) 4 | 5 | If you insist on browsing the examples here please note that the Vue components have been broken apart into separate files and the templates are in Pug format. 6 | -------------------------------------------------------------------------------- /examples/animation.pug: -------------------------------------------------------------------------------- 1 | Scene 2 | Camera 3 | HemisphericLight(diffuse="#0000FF") 4 | Entity(:position="[0, 0, 5]") 5 | Animation(property="rotation.x" :duration="5") 6 | Key(frame="0%" :value="0") 7 | Key(frame="100%" :value="Math.PI * 2") 8 | Animation(property="rotation.y" :duration="5" :end="Math.PI * 2") 9 | Animation(property="rotation.z" :duration="5" :end="Math.PI * 2") 10 | PointLight(diffuse="#FF0000") 11 | template(v-for="x in [0, 4, -4]") 12 | template(v-for="y in [0, 4, -4]") 13 | Box(v-for="z in [0, 4, -4]" :position="[x, y, z]" :key="`${x},${y},${z}`") 14 | -------------------------------------------------------------------------------- /examples/animation.vue: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/asset.pug: -------------------------------------------------------------------------------- 1 | Scene 2 | Camera(type="arcRotate" :radius="7.5" :beta="Math.PI / 3") 3 | HemisphericLight 4 | Asset(src="https://www.babylonjs-playground.com/scenes/skull.babylon" :scaling="[0.02, 0.02, 0.02]" :position="[4, 0.5, 0]") 5 | Asset(src="https://www.babylonjs-playground.com/scenes/Buggy/glTF/buggy.gltf" :scaling="[0.02, 0.02, 0.02]" :position="[1, 0, -1]" :rotation="[0, Math.PI / 2, 0]") 6 | Asset(src="https://www.babylonjs-playground.com/scenes/StanfordBunny.obj" :scaling="[7.5, 7.5, 7.5]" :position="[-4, -0.25, -0.5]" :rotation="[0, Math.PI, 0]") 7 | Asset(src="https://rawgit.com/saswata26/misc/master/base.stl" :scaling="[0.02, 0.02, 0.02]" :position="[-2, 0, -0.5]") 8 | -------------------------------------------------------------------------------- /examples/asset.vue: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/entity.pug: -------------------------------------------------------------------------------- 1 | Scene 2 | Camera(type="arcRotate" :radius="20") 3 | DirectionalLight(v-model="myLight") 4 | HemisphericLight(emissive="#008800") 5 | PointLight(specular="#0F0") 6 | 7 | Entity (v-model="myEntity2" :position="[6, 0, 0]") 8 | Box(:position="[-3,3,3]") 9 | Box(:position="[-9,3,3]") 10 | Box(:position="[-3,-3,3]") 11 | Box(:position="[-9,-3,3]") 12 | Box(:position="[-3,3,-3]") 13 | Box(:position="[-3,-3,-3]") 14 | Box(:position="[-9,3,-3]") 15 | Box(:position="[-9,-3,-3]") 16 | 17 | Entity (v-model="myEntity21" :position="[6, 0, 0]") 18 | Animation(property="rotation.x" :duration="5") 19 | Key(frame="0%" :value="0") 20 | Key(frame="100%" :value="Math.PI * 2") 21 | Box(:position="[-4,2,2]") 22 | Material(diffuse="#00F") 23 | Box(:position="[-4,-2,2]") 24 | Material(diffuse="#00F") 25 | Box(:position="[-8,2,2]") 26 | Material(diffuse="#00F") 27 | Box(:position="[-8,-2,2]") 28 | Material(diffuse="#00F") 29 | Box(:position="[-4,2,-2]") 30 | Material(diffuse="#00F") 31 | Box(:position="[-4,-2,-2]") 32 | Material(diffuse="#00F") 33 | Box(:position="[-8,2,-2]") 34 | Material(diffuse="#00F") 35 | Box(:position="[-8,-2,-2]") 36 | Material(diffuse="#00F") 37 | 38 | Entity (v-model="myEntity1" :position="[7, 0, 0]") 39 | Animation(property="rotation.x" :duration="5") 40 | Key(frame="0%" :value="0") 41 | Key(frame="100%" :value="Math.PI * 2") 42 | PointLight(diffuse="#FF0000") 43 | Box(:position="[10,3,3]") 44 | Box(:position="[4,3,3]") 45 | Box(:position="[10,-3,3]") 46 | Box(:position="[4,-3,3]") 47 | Box(:position="[10,3,-3]") 48 | Box(:position="[4,-3,-3]") 49 | Box(:position="[4,3,-3]") 50 | Box(:position="[10,-3,-3]") 51 | Entity (v-model="myEntity11" :position="[7, 0, 0]") 52 | Box(:position="[9,2,2]") 53 | Material(diffuse="#00F") 54 | Box(:position="[9,-2,2]") 55 | Material(diffuse="#00F") 56 | Box(:position="[5,2,2]") 57 | Material(diffuse="#00F") 58 | Box(:position="[5,-2,2]") 59 | Material(diffuse="#00F") 60 | Box(:position="[9,2,-2]") 61 | Material(diffuse="#00F") 62 | Box(:position="[9,-2,-2]") 63 | Material(diffuse="#00F") 64 | Box(:position="[5,2,-2]") 65 | Material(diffuse="#00F") 66 | Box(:position="[5,-2,-2]") 67 | Material(diffuse="#00F") 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /examples/entity.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/fragment.glsl: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | uniform float time; 3 | uniform vec3 color; 4 | varying float t; 5 | 6 | void main() { 7 | gl_FragColor = vec4(t * color, 1.0); 8 | } 9 | -------------------------------------------------------------------------------- /examples/light/directional.pug: -------------------------------------------------------------------------------- 1 | Scene 2 | Camera(type="arcRotate") 3 | Entity 4 | Animation(property="rotation.y", :duration="5", :end="Math.PI*2") 5 | DirectionalLight(specular="#0F0", diffuse="F00", :direction="[0,0,100]") 6 | Box(:position="[-2,0,0]") 7 | Material(diffuse="#ffffff") 8 | IcoSphere(:position="[1.3,0,0]") 9 | Material(diffuse="#FF0") 10 | Animation(property="rotation.x", :duration="3", :end="Math.PI * 2") 11 | Animation(property="rotation.y", :duration="3", :end="Math.PI * 2") 12 | -------------------------------------------------------------------------------- /examples/light/directional.vue: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/light/hemispheric.pug: -------------------------------------------------------------------------------- 1 | Scene 2 | Camera(type="arcRotate") 3 | HemisphericLight(diffuse="#F00") 4 | Box(:position="[-2,0,0]") 5 | Material(diffuse="#ffffff") 6 | Animation(property="rotation.x", :duration="3", :end="Math.PI * 2") 7 | Animation(property="rotation.y", :duration="3", :end="Math.PI * -2") 8 | IcoSphere(:position="[1.3,0,0]") 9 | Material(diffuse="#FF0") 10 | Animation(property="rotation.x", :duration="3", :end="Math.PI * 2") 11 | Animation(property="rotation.y", :duration="3", :end="Math.PI * 2") -------------------------------------------------------------------------------- /examples/light/hemispheric.vue: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/light/point.pug: -------------------------------------------------------------------------------- 1 | Scene 2 | Camera(type="arcRotate") 3 | PointLight(:position="[0,0.5,0]", specular="#FF0000") 4 | IcoSphere(:position="[-3.3,1,0]") 5 | Material(diffuse="#FFFF33") 6 | IcoSphere(:position="[3.3,1,0]") 7 | Material(diffuse="#7FFF00") 8 | -------------------------------------------------------------------------------- /examples/light/point.vue: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/light/spot.js: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: { 3 | onCamera(entity){ 4 | console.log('onCamera', entity) 5 | } 6 | , 7 | complete(state){ 8 | console.log('complete',state) 9 | } 10 | 11 | 12 | }, 13 | }; 14 | -------------------------------------------------------------------------------- /examples/light/spot.pug: -------------------------------------------------------------------------------- 1 | Scene(@complete="complete") 2 | Camera(type="arcRotate", @entity="onCamera") 3 | //- SpotLight(:direction="[0,0,-5]", :angle="Math.PI/2", :exponent="40",diffuse="#7FFF00",specular="#7FFF00") 4 | Spotlight(:position="[0,5,0]", specular="#FF0000") 5 | Ground(:position="[0,1,0]",:options="{width:10, height:10}") 6 | Plane(:options="{width:20, height:20}") 7 | Material(specular="#FF0") 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/light/spot.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /examples/logo.js: -------------------------------------------------------------------------------- 1 | import Side from './side.vue'; 2 | 3 | export default { 4 | components: { 5 | Side, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /examples/logo.pug: -------------------------------------------------------------------------------- 1 | Scene 2 | Property(name="clearColor" color="#FFF") 3 | Camera(type="arcRotate") 4 | HemisphericLight 5 | property(name="intensity" :float="2") 6 | Entity(:scaling="[5, 5, 5]") 7 | Animation(property="rotation.y" :duration="5" :end="-Math.PI * 2") 8 | Side 9 | Entity(:scaling="[-1, 1, 1]") 10 | Side 11 | -------------------------------------------------------------------------------- /examples/logo.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /examples/material.pug: -------------------------------------------------------------------------------- 1 | Scene 2 | Camera(type="arcRotate") 3 | PointLight(:position="[0, 2, -1]") 4 | Sphere(:position="[-2, 0, 0]") 5 | Material(diffuse="#00F") 6 | Cylinder(:position="[0, 0.5, 0]") 7 | Material(emissive="#008800") 8 | Box(:position="[2, 0, 0]") 9 | Material(diffuse="#F00" :metallic="0" :roughness="1") 10 | -------------------------------------------------------------------------------- /examples/material.vue: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/mesh.pug: -------------------------------------------------------------------------------- 1 | Scene 2 | Camera(type="arcRotate" :radius="15" :beta="Math.PI / 4") 3 | HemisphericLight 4 | Sphere(:position="[6,0,0]" :scaling="[1,1,1]") 5 | Torus(:position="[4, 0, 0]") 6 | Box(:v-model="myBox" :position="[2.5, 0, 0]") 7 | Material(diffuse="#F00" :metallic="0" :roughness="1") 8 | Cylinder(:position="[1, 0, 0]") 9 | Material(diffuse="#0F0" :metallic="0" :roughness="1") 10 | //DashedLines 11 | Disc(:rotation="[0, Math.PI, 0]") 12 | //Ground(:options="{width: 10, height: 10}") 13 | IcoSphere(:position="[-1, 0, 0]") 14 | //Lathe 15 | //LineSystem 16 | //Plane 17 | //PolygonMesh 18 | //Polyhedron 19 | //Ribbon(:position="[9, 0, 0]") 20 | //TiledGround 21 | TorusKnot(:position="[-6, 0, 0]") 22 | //Tube(:position="[0, 0, 10]") 23 | //ExtrudePolygon(:position="[5, 0, 0]") 24 | -------------------------------------------------------------------------------- /examples/mesh.vue: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/observable.js: -------------------------------------------------------------------------------- 1 | export default { 2 | data() { 3 | return { 4 | box: null, 5 | sphere: null, 6 | time: performance.now(), 7 | frames: 0, 8 | }; 9 | }, 10 | 11 | computed: { 12 | scale() { 13 | let a = 2 + Math.cos(this.time * 0.001); 14 | let b = 2 + Math.sin(this.time * 0.001); 15 | return { 16 | box: [a, b, 1], 17 | sphere: [b, a, 1], 18 | }; 19 | }, 20 | }, 21 | 22 | methods: { 23 | beforeRender() { 24 | this.time = performance.now(); 25 | }, 26 | 27 | onSphere(event) { 28 | console.log('onSphere', event); 29 | // the entity event includes entity reference 30 | this.sphere = event.entity; 31 | }, 32 | 33 | complete(event) { 34 | console.log('complete', event); 35 | console.log('box', this.box); 36 | console.log('sphere', this.sphere); 37 | }, 38 | }, 39 | }; 40 | -------------------------------------------------------------------------------- /examples/observable.pug: -------------------------------------------------------------------------------- 1 | div 2 | // events take either a method name or logic content 3 | // the complete event happens after all children have been initialized and bound 4 | Scene(@complete="complete" @before-render$="beforeRender" @after-render$="++frames") 5 | // you can use v-model bindings instead of event entity reference 6 | Box(:position="[-2, 0, 5]" :scaling="scale.box" v-model="box") 7 | Sphere(:position="[2, 0, 5]" :scaling="scale.sphere" @entity="onSphere") 8 | div(v-text="`Frames: ${frames}`" style="position: absolute; color: white; bottom: 0; padding: 15px") 9 | -------------------------------------------------------------------------------- /examples/observable.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /examples/physics.js: -------------------------------------------------------------------------------- 1 | import LogoSide from './side.vue'; 2 | 3 | export default { 4 | components: { 5 | LogoSide, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /examples/physics.pug: -------------------------------------------------------------------------------- 1 | Scene 2 | Camera(type="arcRotate" :radius="10" :beta="Math.PI / 4") 3 | HemisphericLight 4 | property(name="intensity" :float="2") 5 | Ground(:options="{ width: 10, height: 10 }") 6 | Physics 7 | Entity(v-for="(_, i) in Array(81).fill()" 8 | :key="i" 9 | :position="[(i % 3) - 1, 2 + Math.floor(i / 9), (Math.floor(i / 3) % 3) - 1]" 10 | :scaling="[1, 1, 0.3]") 11 | Physics(:mass="1") 12 | Entity(:scaling="[1, 1, 1 / 0.3]") 13 | LogoSide 14 | Entity(:scaling="[-1, 1, 1]") 15 | LogoSide 16 | -------------------------------------------------------------------------------- /examples/physics.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /examples/property.pug: -------------------------------------------------------------------------------- 1 | Scene 2 | Camera(type="arcRotate") 3 | 4 | // Standard Mesh component props 5 | Box(:scaling="[0.5, 1, 1]" :position="[2, 0, 0]") 6 | 7 | // Properties prop object on Entity component 8 | // $vector() helper function 9 | Sphere(:properties="{ position: $vector([-2, 0, 0]) }") 10 | 11 | // Property component 12 | Cylinder 13 | property(name="scaling" :vector="{ x: 2, y: 0.5, z: 1 }") 14 | 15 | Entity 16 | Animation(property="rotation.x" :duration="5" :end="Math.PI * 2") 17 | 18 | // Standard Light component props 19 | PointLight(diffuse="#F0F" :position="[0, 0, 4]") 20 | 21 | Entity 22 | Animation(property="rotation.y" :duration="5" :end="Math.PI * 2") 23 | 24 | // Property components 25 | PointLight 26 | property(name="diffuse" color="#0FF") 27 | property(name="position" :vector="[0, 0, 4]") 28 | 29 | Entity 30 | Animation(property="rotation.z" :duration="5" :end="Math.PI * 2") 31 | 32 | // Properties prop object on Entity component (set multiple values!) 33 | // $color() helper function 34 | PointLight(:properties="{ diffuse: $color('#FF0'), specular: $color({ r: 1, g: 0, b: 0 }) }") 35 | // Mix-and-match! 36 | property(name="position" :vector="[0, 4, 0]") 37 | 38 | // Also available: 39 | // float="..." Property component prop 40 | // matrix="..." Property component prop 41 | // any="..." Property component prop 42 | // $matrix() helper function 43 | -------------------------------------------------------------------------------- /examples/property.vue: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/scale.pug: -------------------------------------------------------------------------------- 1 | Scene 2 | Camera(type="arcRotate" :beta="Math.PI / 4" :radius="20") 3 | HemisphericLight 4 | Sphere(:position="[-8,0,3]" :scaling="[2,1,5]") 5 | Sphere(:position="[-5,0,3]" :scaling="[2,2,3]") 6 | Sphere(:position="[-1,0,3]" :scaling="[4,5,1]") 7 | Sphere(:position="[6,0,3]" :scaling="[8,5,3]") 8 | Box(:position="[0,0,-3]" :scaling="[1,2,3]") 9 | Box(:position="[-3,0,-3]" :scaling="[2,1,2]") 10 | Box(:position="[-6,0,-3]" :scaling="[1,3,4]") 11 | -------------------------------------------------------------------------------- /examples/scale.vue: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/scene.pug: -------------------------------------------------------------------------------- 1 | Scene 2 | Box(:position="[0, 0, 5]") 3 | -------------------------------------------------------------------------------- /examples/scene.vue: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/shader.js: -------------------------------------------------------------------------------- 1 | import { BABYLON } from 'vue-babylonjs'; 2 | 3 | import VERTEX from './vertex.glsl'; 4 | import FRAGMENT from './fragment.glsl'; 5 | 6 | const NAME = 'demo'; 7 | 8 | BABYLON.Effect.ShadersStore[`${NAME}VertexShader`] = VERTEX; 9 | BABYLON.Effect.ShadersStore[`${NAME}FragmentShader`] = FRAGMENT; 10 | 11 | export default { 12 | computed: { 13 | vertexShader() { 14 | return VERTEX; 15 | }, 16 | 17 | fragmentShader() { 18 | return FRAGMENT; 19 | }, 20 | 21 | shader() { 22 | return NAME; 23 | }, 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /examples/shader.pug: -------------------------------------------------------------------------------- 1 | Scene 2 | Camera(type="arcRotate") 3 | Box(:position="[2, 0, 0]") 4 | Animation(property="rotation.x" :duration="5" :end="Math.PI * 2") 5 | // Use a vertex and fragment registered with ShadersStore under the same name 6 | // Safe caching, non-reactive 7 | // Recommended for reusable shader files 8 | Shader(:shader="shader") 9 | // How to set uniform values 10 | Uniform(variable="color" color="#F00") 11 | Uniform(variable="start" :float="0.5") 12 | 13 | Box(:position="[0, -2, 0]") 14 | Animation(property="rotation.y" :duration="5" :end="Math.PI * 2") 15 | // Use shaders registered with ShadersStore under specific names 16 | // Safe caching, non-reactive 17 | // Recommended for independently reusable shader files 18 | Shader(:vertex="shader" :fragment="shader") 19 | Uniform(variable="color" color="#0F0") 20 | Uniform(variable="start" :float="1") 21 | 22 | Box(:position="[-2, 0, 0]") 23 | Animation(property="rotation.x" :duration="5" :end="-Math.PI * 2") 24 | // Use the raw text content from strings defined in this component 25 | // Unsafe caching, reactive 26 | // USE A UNIQUE VALUE IN THE "name" PROPERTY FOR SAFE CACHING 27 | // Recommended for reusable shader components 28 | Shader(name="inline" :vertexShader="vertexShader" :fragmentShader="fragmentShader") 29 | Uniform(variable="color" color="#00F") 30 | Uniform(variable="start" :float="-1") 31 | 32 | Box(:position="[0, 2, 0]") 33 | Animation(property="rotation.y" :duration="5" :end="-Math.PI * 2") 34 | // Use the raw text content from strings defined in this component 35 | // Unsafe caching, reactive 36 | // USE A UNIQUE VALUE IN THE "name" PROPERTY FOR SAFE CACHING 37 | // Recommended for independently reusable shader components 38 | Shader 39 | Vertex(name="namedvertex" :content="vertexShader") 40 | Fragment(name="namedfragment" :content="fragmentShader") 41 | Uniform(variable="color" color="#FF0") 42 | Uniform(variable="start" :float="-0.5") 43 | 44 | Box 45 | Animation(property="rotation.x" :duration="5" :end="Math.PI * 2") 46 | Animation(property="rotation.y" :duration="5" :end="Math.PI * 2") 47 | Animation(property="rotation.z" :duration="5" :end="Math.PI * 2") 48 | // Use the text content inside Vertex and Fragment components 49 | // Unsafe caching, non-reactive 50 | // USE A UNIQUE VALUE IN THE "name" PROPERTY FOR SAFE CACHING 51 | // only recommended for prototyping 52 | Shader(name="text") 53 | 54 | Vertex. 55 | precision highp float; 56 | attribute vec3 position; 57 | uniform mat4 worldViewProjection; 58 | uniform float time; 59 | varying vec3 direction; 60 | 61 | void main() { 62 | gl_Position = worldViewProjection * vec4(position, 1.0); 63 | direction = position; 64 | } 65 | 66 | Fragment. 67 | precision highp float; 68 | uniform float time; 69 | varying vec3 direction; 70 | 71 | void main() { 72 | gl_FragColor = vec4(cos(time / 1000.0) * direction, 1.0); 73 | } 74 | 75 | // Others: 76 | 77 | // Box 78 | // Use an element in DOM with a pre-defined id (not recommended for Vue) 79 | Shader(name="elements" vertexElement="someid" fragmentElement="someotherid") 80 | 81 | // Box 82 | // Use an fx file on your server 83 | Shader(name="fxfile" src="/path/to/file.fx") 84 | -------------------------------------------------------------------------------- /examples/shader.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /examples/side.pug: -------------------------------------------------------------------------------- 1 | Entity(:rotation="[-Math.PI / 2, 0, 0]" :position="[0, 0, -0.15]") 2 | ExtrudePolygon(:options="{ shape: [$vector([0.133, 0, 0.5]), $vector([0.346, 0, 0.5]), $vector([0, 0, -0.1]), $vector([0, 0, 0.269])], depth: 0.3, sideOrientation: BABYLON.Mesh.DOUBLESIDE }") 3 | Material(diffuse="#34495E" specular="#34495E" ) 4 | ExtrudePolygon(:options="{ shape: [$vector([0.346, 0, 0.5]), $vector([0.577, 0, 0.5]), $vector([0, 0, -0.5]), $vector([0, 0, -0.1])], depth: 0.3, sideOrientation: BABYLON.Mesh.DOUBLESIDE }") 5 | Material(diffuse="#41B883" specular="#41B883" ) 6 | -------------------------------------------------------------------------------- /examples/side.vue: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/texture.pug: -------------------------------------------------------------------------------- 1 | Scene 2 | Camera(type="arcRotate" :radius="3") 3 | HemisphericLight(diffuse="#F00" specular="#0F0" :direction="[-1, 1, 0]") 4 | Property(name="groundColor" color="#0F0") 5 | Sphere(:position="[-1.5, 0, 0]") 6 | Material 7 | Texture(src="https://www.babylonjs-playground.com/textures/grass.png") 8 | Sphere 9 | Material 10 | Texture(type="emissive" src="https://www.babylonjs-playground.com/textures/grass.png") 11 | Sphere(:position="[1.5, 0, 0]") 12 | Material(diffuse="#F00") 13 | Texture(type="ambient" src="https://www.babylonjs-playground.com/textures/grass.png") 14 | -------------------------------------------------------------------------------- /examples/texture.vue: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /examples/vertex.glsl: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | attribute vec3 position; 3 | uniform mat4 worldViewProjection; 4 | uniform float time; 5 | uniform vec3 color; 6 | uniform float start; 7 | varying float t; 8 | 9 | void main() { 10 | gl_Position = worldViewProjection * vec4(position, 1.0); 11 | t = sin((time / 1000.0) + start); 12 | } 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-babylonjs", 3 | "version": "1.0.0-beta.7", 4 | "files": [ 5 | "dist/*", 6 | "lib/*" 7 | ], 8 | "main": "dist/umd.js", 9 | "module": "dist/esm.js", 10 | "unpkg": "dist/umd.min.js", 11 | "jsdelivr": "dist/umd.min.js", 12 | "engines": { 13 | "node": ">=8.9" 14 | }, 15 | "description": "A ready-to-go 3d environment for Vue.js using Babylon.js", 16 | "homepage": "https://github.com/Beg-in/vue-babylonjs", 17 | "repository": "Beg-in/vue-babylonjs", 18 | "bugs": { 19 | "url": "https://github.com/Beg-in/vue-babylonjs/issues" 20 | }, 21 | "author": { 22 | "name": "Beg.in", 23 | "email": "info@beg.in", 24 | "url": "http://beg.in" 25 | }, 26 | "contributors": [ 27 | "Brian Jesse (brianjesse.com)", 28 | "Johnmark Beaty (johnmarkbeaty.com)" 29 | ], 30 | "license": "MIT", 31 | "scripts": { 32 | "b": "CONTEXT=$(pwd) npm explore begin-build -- npm run", 33 | "start": "npm run b start:client", 34 | "build": "rm -rf docs && npm run b build", 35 | "dist:rollup": "NODE_OPTIONS=--max_old_space_size=8192 rollup --config", 36 | "dist:uglify": "uglifyjs dist/umd.js -c -m -o dist/umd.min.js", 37 | "dist": "BABEL_ENV=dist rm -rf lib dist && npm run dist:rollup && npm run dist:uglify", 38 | "test": "BABEL_ENV=test ava src/**/test.js", 39 | "test:watch": "BABEL_ENV=test npm run test -- -w", 40 | "test:tap": "BABEL_ENV=test npm run test -- --tap" 41 | }, 42 | "peerDependencies": { 43 | "vue": "^2.2.0", 44 | "@babylonjs/core": "^4.0.3", 45 | "@babylonjs/loaders": "^4.0.3" 46 | }, 47 | "devDependencies": { 48 | "@babel/core": "^7.4.5", 49 | "@babel/plugin-external-helpers": "^7.0.0", 50 | "@babel/plugin-transform-runtime": "^7.4.4", 51 | "@babel/preset-env": "^7.4.5", 52 | "@babel/register": "^7.4.4", 53 | "@babel/runtime": "^7.4.5", 54 | "@babylonjs/core": "^4.0.3", 55 | "@babylonjs/inspector": "^4.0.3", 56 | "@babylonjs/loaders": "^4.0.3", 57 | "@vue/test-utils": "^1.0.0-beta.25", 58 | "ava": "^2.0.0", 59 | "begin-build": "^0.16.15", 60 | "begin-project": "^0.4.3", 61 | "cannon": "^0.6.2", 62 | "earcut": "^2.1.3", 63 | "eslint-plugin-vue": "^5.0.0-beta.3", 64 | "find": "^0.2.9", 65 | "frow": "^3.1.3", 66 | "glslify-loader": "^2.0.0", 67 | "jstransformer-markdown-it": "^2.1.0", 68 | "jstransformer-pug": "^0.3.0", 69 | "markdown-it-prism": "^2.0.2", 70 | "oimo": "^1.0.9", 71 | "prismjs": "^1.16.0", 72 | "raw-loader": "^1.0.0", 73 | "rollup": "^1.13.1", 74 | "rollup-plugin-babel": "^4.0.3", 75 | "rollup-plugin-cleanup": "^3.0.0", 76 | "rollup-plugin-commonjs": "^10.0.0", 77 | "rollup-plugin-node-resolve": "^5.0.1", 78 | "uglify-js": "^3.6.0" 79 | }, 80 | "ava": { 81 | "require": [ 82 | "@babel/register" 83 | ] 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /properties.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = { 4 | production: { 5 | build: { 6 | domain: 'beg-in.github.io', 7 | main: './site/index.js', 8 | cdn: 'https://beg-in.github.io/vue-babylonjs/', 9 | root: 'https://beg-in.github.io/vue-babylonjs/', 10 | title: 'Vue-BabylonJS Documentation site', 11 | color: '#42b883', 12 | dist: 'docs', 13 | config() { 14 | let prism = require('prismjs'); 15 | let loadLanguages = require('prismjs/components/index'); 16 | let basic = require('begin-build/config/basic'); 17 | let vue = require('begin-build/config/vue'); 18 | let path = require('path'); 19 | 20 | return Object.assign({}, basic, { 21 | local() { 22 | loadLanguages(['pug', 'bash']); 23 | let hl = (text, { lang = 'markup' } = {}) => { 24 | if (text[0] === '\n') { 25 | text = text.substring(1); 26 | } 27 | return `${prism.highlight(text, prism.languages[lang], lang)}`; 28 | }; 29 | 30 | return { 31 | module: { 32 | rules: { 33 | $build: Array, 34 | scripts: { 35 | exclude: /node_modules\/(?!(begin-|@babylonjs))/, 36 | }, 37 | markup: { 38 | use: { 39 | $build: Array, 40 | pug: { 41 | options: { 42 | filters: { 43 | hl, 44 | }, 45 | data: { 46 | hl, 47 | }, 48 | }, 49 | }, 50 | }, 51 | }, 52 | shaders: { 53 | test: /\.(glsl|frag|vert)$/, 54 | use: { 55 | $build: Array, 56 | raw: 'raw-loader', 57 | glsl: 'glslify-loader', 58 | }, 59 | }, 60 | }, 61 | }, 62 | resolve: { 63 | alias: { 64 | 'vue-babylonjs$': path.join(__dirname, 'src/index.js'), 65 | }, 66 | }, 67 | }; 68 | }, 69 | vue, 70 | }); 71 | }, 72 | }, 73 | }, 74 | }; 75 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import babel from 'rollup-plugin-babel'; 2 | import resolve from 'rollup-plugin-node-resolve'; 3 | import commonjs from 'rollup-plugin-commonjs'; 4 | import cleanup from 'rollup-plugin-cleanup'; 5 | // import { fileSync as find } from 'find'; 6 | 7 | const name = 'VueBabylonjs'; 8 | const plugins = [ 9 | resolve(), 10 | babel({ 11 | runtimeHelpers: true, 12 | plugins: ['@babel/plugin-external-helpers', '@babel/plugin-transform-runtime'], 13 | ignore: ['node_modules/!(@babylonjs)'], 14 | }), 15 | commonjs({ 16 | include: 'node_modules/**', 17 | }), 18 | cleanup(), 19 | ]; 20 | // const FILES = find(/.*\/.+\/.+\.js$/, './src').reduce((out, file) => ({ 21 | // ...out, 22 | // [file.replace(/src\//, '').replace(/\.js$/, '')]: file, 23 | // }), {}); 24 | 25 | export default [{ 26 | input: 'src/index.js', 27 | output: { 28 | format: 'es', 29 | file: 'dist/esm.js', 30 | }, 31 | external: [ 32 | '@babylonjs/core', 33 | '@babylonjs/loaders', 34 | ], 35 | plugins, 36 | }, { 37 | input: 'src/full.js', 38 | output: { 39 | format: 'umd', 40 | name, 41 | file: 'dist/umd.js', 42 | }, 43 | plugins, 44 | // }, { 45 | // input: { 46 | // index: 'src/core.js', 47 | // ...FILES, 48 | // }, 49 | // experimentalCodeSplitting: true, 50 | // output: { 51 | // format: 'cjs', 52 | // dir: './lib', 53 | // globals, 54 | // }, 55 | // plugins, 56 | }]; 57 | -------------------------------------------------------------------------------- /site/.eslintrc.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = require('begin-project/lint/client'); 4 | module.exports.rules['import/no-unresolved'] = ['error', { commonjs: true, caseSensitive: true, ignore: ['vue-babylonjs$'] }]; 5 | -------------------------------------------------------------------------------- /site/CNAME: -------------------------------------------------------------------------------- 1 | vuebabylonjs.com 2 | -------------------------------------------------------------------------------- /site/about.md: -------------------------------------------------------------------------------- 1 | 2 | #### What? 3 | 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. 4 | 5 | 6 | 7 | #### Why? 8 | 9 | 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. 10 | 11 | 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. 12 | -------------------------------------------------------------------------------- /site/about.vue: -------------------------------------------------------------------------------- 1 | 20 | 54 | -------------------------------------------------------------------------------- /site/animation.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 29 | -------------------------------------------------------------------------------- /site/app.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 20 | 81 | 82 | 182 | -------------------------------------------------------------------------------- /site/asset.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 29 | -------------------------------------------------------------------------------- /site/assets/brian.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Beg-in/vue-babylonjs/1b8b93cea2368bc3a289fa3d30f41c2c62db673c/site/assets/brian.jpg -------------------------------------------------------------------------------- /site/assets/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /site/camera.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /site/controls.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 66 | 67 | 121 | -------------------------------------------------------------------------------- /site/entity.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 29 | -------------------------------------------------------------------------------- /site/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Beg-in/vue-babylonjs/1b8b93cea2368bc3a289fa3d30f41c2c62db673c/site/favicon.png -------------------------------------------------------------------------------- /site/global.sass: -------------------------------------------------------------------------------- 1 | @import ./variables 2 | @import ~frow 3 | 4 | html, body 5 | margin: 0 6 | padding: 0 7 | height: 100% 8 | font-family: "Tajawal" 9 | color: $dark-color 10 | background-color: $light-color 11 | 12 | h1, h2, h3, h4 13 | color: $dark-color 14 | font-weight: 700 15 | h1, h2, h3, h4, h5, p 16 | margin-bottom: 24px 17 | padding: 0 18 | h1 19 | font-size: 36px 20 | h2 21 | font-size: 26px 22 | margin: 24px 0 6px 23 | h3 24 | font-size: 24px 25 | h4 26 | font-size: 20px 27 | h5 28 | font-size: 18px 29 | 30 | a 31 | color: $main-color 32 | margin: 0 33 | padding: 0 34 | vertical-align: baseline 35 | 36 | ul 37 | list-style-type: disc 38 | padding-left: 15px 39 | li 40 | line-height: 24px 41 | ul 42 | margin-left: 24px 43 | p, ul, ol 44 | font-size: 16px 45 | line-height: 24px 46 | 47 | pre 48 | padding: 0px 24px 49 | max-width: 800px 50 | white-space: pre-wrap 51 | code 52 | font-family: Consolas, Monaco, Andale Mono, monospace 53 | line-height: 1.5 54 | font-size: 13px 55 | margin-bottom: 24px 56 | *:not(pre) > & 57 | background-color: $background-color 58 | color: $third-color 59 | padding: 1px 5px 60 | margin: 0 61 | 62 | hr 63 | width: 100% 64 | text-align: left 65 | margin: 20px auto 20px 0 66 | color: $secondary-color 67 | 68 | canvas 69 | display: block 70 | &:focus 71 | outline: none 72 | 73 | table 74 | border-collapse: collapse 75 | margin: 1rem 0 76 | display: block 77 | overflow-x: auto 78 | 79 | thead 80 | display: table-header-group 81 | vertical-align: middle 82 | border-color: inherit 83 | 84 | tr 85 | display: table-row 86 | vertical-align: inherit 87 | border-color: inherit 88 | 89 | &:nth-child(2n) 90 | background-color: #f6f8fa 91 | 92 | 93 | th 94 | font-weight: bold 95 | text-align: -internal-center 96 | 97 | td, th 98 | border: 1px solid #dfe2e5 99 | padding: .6em 1em 100 | 101 | tbody 102 | display: table-row-group 103 | vertical-align: middle 104 | border-color: inherit 105 | -------------------------------------------------------------------------------- /site/highlight.sass: -------------------------------------------------------------------------------- 1 | @import ./variables 2 | 3 | code 4 | border-radius: 3px 5 | background: $base 6 | 7 | pre code 8 | display: block 9 | overflow-x: auto 10 | padding: 0.5em 11 | color: $mono-1 12 | background: $base 13 | 14 | .token.comment, 15 | .token.prolog, 16 | .token.doctype, 17 | .token.cdata 18 | color: slategray 19 | 20 | .token.punctuation 21 | color: #999 22 | 23 | .namespace 24 | opacity: .7 25 | 26 | .token.property, 27 | .token.tag, 28 | .token.boolean, 29 | .token.number, 30 | .token.constant, 31 | .token.symbol, 32 | .token.deleted 33 | color: #905 34 | 35 | .token.selector, 36 | .token.attr-name, 37 | .token.string, 38 | .token.char, 39 | .token.builtin, 40 | .token.inserted 41 | color: #690 42 | 43 | .token.operator, 44 | .token.entity, 45 | .token.url, 46 | .language-css .token.string, 47 | .style .token.string 48 | color: #9a6e3a 49 | background: hsla(0, 0%, 100%, .5) 50 | 51 | .token.atrule, 52 | .token.attr-value, 53 | .token.keyword 54 | color: #07a 55 | 56 | .token.function, 57 | .token.class-name 58 | color: #DD4A68 59 | 60 | .token.regex, 61 | .token.important, 62 | .token.variable 63 | color: #e90 64 | 65 | .token.important, 66 | .token.bold 67 | font-weight: bold 68 | 69 | .token.italic 70 | font-style: italic 71 | 72 | .token.entity 73 | cursor: help 74 | 75 | // .hljs-comment, 76 | // .hljs-quote 77 | // color: $mono-3 78 | // font-style: italic 79 | 80 | // .hljs-doctag, 81 | // .hljs-keyword, 82 | // .hljs-formula 83 | // color: $hue-3 84 | 85 | // .hljs-section, 86 | // .hljs-name, 87 | // .hljs-selector-tag, 88 | // .hljs-deletion, 89 | // .hljs-subst 90 | // color: $hue-5 91 | 92 | // .hljs-literal 93 | // color: $hue-1 94 | 95 | // .hljs-string, 96 | // .hljs-regexp, 97 | // .hljs-addition, 98 | // .hljs-attribute, 99 | // .hljs-meta-string 100 | // color: $hue-4 101 | 102 | // .hljs-built_in, 103 | // .hljs-class .hljs-title 104 | // color: $hue-6-2 105 | 106 | // .hljs-attr, 107 | // .hljs-variable, 108 | // .hljs-template-variable, 109 | // .hljs-type, 110 | // .hljs-selector-class, 111 | // .hljs-selector-attr, 112 | // .hljs-selector-pseudo, 113 | // .hljs-number 114 | // color: $hue-6 115 | 116 | // .hljs-symbol, 117 | // .hljs-bullet, 118 | // .hljs-link, 119 | // .hljs-meta, 120 | // .hljs-selector-id, 121 | // .hljs-title 122 | // color: $hue-2 123 | 124 | // .hljs-emphasis 125 | // font-style: italic 126 | 127 | // .hljs-strong 128 | // font-weight: bold 129 | 130 | // .hljs-link 131 | // text-decoration: underline 132 | -------------------------------------------------------------------------------- /site/home.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 30 | -------------------------------------------------------------------------------- /site/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-unresolved, import/no-webpack-loader-syntax, import/first */ 2 | import 'file-loader?name=CNAME!./CNAME'; 3 | import Vue from 'vue'; 4 | import build from 'begin-build'; 5 | import { create, register } from 'begin-build/router'; 6 | import vb from 'vue-babylonjs'; 7 | 8 | Vue.use(vb); 9 | 10 | import app from './app.vue'; 11 | 12 | let router = create({ 13 | mode: 'hash', 14 | base: '/vue-babylonjs/', 15 | }); 16 | 17 | export default build({ 18 | router, 19 | components: { app }, 20 | }); 21 | 22 | import home from './home.vue'; 23 | import installation from './installation.vue'; 24 | import animation from './animation.vue'; 25 | import camera from './camera.vue'; 26 | import entity from './entity.vue'; 27 | import light from './light.vue'; 28 | import material from './material.vue'; 29 | import mesh from './mesh.vue'; 30 | import observable from './observable.vue'; 31 | import physics from './physics.vue'; 32 | import property from './property.vue'; 33 | import scene from './scene.vue'; 34 | import shader from './shader.vue'; 35 | import texture from './texture.vue'; 36 | import types from './types.vue'; 37 | import about from './about.vue'; 38 | import asset from './asset.vue'; 39 | 40 | register([ 41 | ...Object.entries({ 42 | home, 43 | installation, 44 | asset, 45 | animation, 46 | camera, 47 | entity, 48 | light, 49 | material, 50 | mesh, 51 | observable, 52 | physics, 53 | property, 54 | scene, 55 | shader, 56 | texture, 57 | types, 58 | about, 59 | }).map(([name, component]) => ({ 60 | name, 61 | path: `/${name}`, 62 | component, 63 | })), { 64 | path: '*', 65 | redirect: '/home', 66 | }, 67 | ]); 68 | -------------------------------------------------------------------------------- /site/index.pug: -------------------------------------------------------------------------------- 1 | extends ~begin-build/index.pug 2 | 3 | append meta 4 | meta(name="description", content="Create 3D / VR graphics as simply as writing HTML and CSS") 5 | link(rel="alternate" type="application/rss+xml" href="https://github.com/Beg-in/vue-babylonjs/releases.atom") 6 | link(href="https://fonts.googleapis.com/css?family=Tajawal:300,400,700" rel="stylesheet") 7 | -------------------------------------------------------------------------------- /site/installation.vue: -------------------------------------------------------------------------------- 1 | 94 | -------------------------------------------------------------------------------- /site/light.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 69 | -------------------------------------------------------------------------------- /site/material.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 29 | 30 | -------------------------------------------------------------------------------- /site/mesh.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 40 | -------------------------------------------------------------------------------- /site/observable.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 31 | -------------------------------------------------------------------------------- /site/physics.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 31 | -------------------------------------------------------------------------------- /site/property.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 29 | -------------------------------------------------------------------------------- /site/scene.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 29 | -------------------------------------------------------------------------------- /site/shader.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 31 | -------------------------------------------------------------------------------- /site/texture.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 29 | -------------------------------------------------------------------------------- /site/types.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /site/variables.sass: -------------------------------------------------------------------------------- 1 | $light-color: #ffffff 2 | $dark-color: #333333 3 | $main-color: #42b883 4 | $secondary-color: #35495e 5 | $background-color: #f8f8f8 6 | $third-color: #e96900 7 | 8 | $button-background-color: $main-color 9 | $button-border-color: $main-color 10 | // $button-disabled-text-color: $gray-light 11 | $button-disabled-border-color: $dark-color 12 | 13 | $form-color-primary: $main-color 14 | $form-color-secondary: $secondary-color 15 | 16 | // Highlight colors 17 | $base: #fafafa 18 | $mono-1: #383a42 19 | $mono-2: #686b77 20 | $mono-3: #a0a1a7 21 | $hue-1: #0184bb 22 | $hue-2: #4078f2 23 | $hue-3: #a626a4 24 | $hue-4: #50a14f 25 | $hue-5: #e45649 26 | $hue-5-2: #c91243 27 | $hue-6: #986801 28 | $hue-6-2: #c18401 29 | 30 | @import ~frow/variables 31 | -------------------------------------------------------------------------------- /site/vuefile.pug: -------------------------------------------------------------------------------- 1 | .vuefile 2 | code(v-show="pug") 3 | :hl