Skip to content

Vue.js components rendering 3D graphics reactively via three.js

License

Notifications You must be signed in to change notification settings

The-Peso-G/vue-gl

 
 

Repository files navigation

VueGL

Vue.js components rendering 3D graphics reactively via three.js. See the documents for more details.

NPM
FOSSA Status
CircleCI
codecov
Financial Contributors on Open Collective

Usage

Define objects by tags.
Save the following code as a html file, and open in any modern browser.

<!-- dependencies -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/three"></script>

<!-- load components -->
<script src="https://unpkg.com/vue-gl"></script>

<!-- define objects -->
<vgl-renderer id="vgl-canvas" style="width: 300px; height: 150px;">
  <vgl-scene>
    <vgl-sphere-geometry></vgl-sphere-geometry>
    <vgl-mesh-standard-material></vgl-mesh-standard-material>
    <vgl-mesh></vgl-mesh>
    <vgl-ambient-light></vgl-ambient-light>
    <vgl-directional-light position="2 0 1"></vgl-directional-light>
  </vgl-scene>
  <vgl-perspective-camera orbit-position="200 1 1"></vgl-perspective-camera>
</vgl-renderer>

<!-- register components and start vue -->
<script>
  Object.keys(VueGL).forEach(name => {
    Vue.component(name, VueGL[name]);
  });
  new Vue({
    el: "#vgl-canvas"
  });
</script>

When you open the html above in the browser, you'll see below.
VueGL example

Note that IE9 needs a polyfill for the TypedArray class, like the js-polyfills/typedarray.js.

Components

Contribution

Are you interested in enhance this product? We're really glad and thanks a lot!
See Contributing guidelines to get started.

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

License

FOSSA Status

About

Vue.js components rendering 3D graphics reactively via three.js

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 97.9%
  • Ruby 2.1%