vue-gl/vue-gl

Vue.js components rendering 3D WebGL graphics reactively with three.js

VueGL

Vue.js components rendering 3D WebGL graphics reactively with three.js.

Usage

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

<!-- Define canvas and objects -->
<vgl-renderer id="my-canvas">
  <template #scene>
    <vgl-scene>
      <vgl-mesh>
        <template #geometry>
          <vgl-sphere-geometry></vgl-sphere-geometry>
        </template>
        <template #material>
          <vgl-mesh-basic-material></vgl-mesh-basic-material>
        </template>
      </vgl-mesh>
    </vgl-scene>
  </template>
  <template #camera>
    <vgl-perspective-camera position="spherical" :position-radius="5"></vgl-perspective-camera>
  </template>
</vgl-renderer>

<!-- Register components and start vue -->
<script>
  new Vue({ el: "#my-canvas", components: VueGL });
</script>

See the documentation for more information.

Available components

Components reference shows a list of available core components. Example components reference also introduces additional components you can use immediately.

The list of components not implemented yet can be found at this project.

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

vue-gl's Issues

README links to src files are broken

The grid helper component.

The mesh depth material component.

ReferenceError: babelHelpers is not defined

I have followed the instructions from https://vue-gl.github.io/vue-gl/ and additionally installed babel-plugin-external-helpers as after install was receiving compile error without it (dependency?). Now getting the error as in the title. What does the library need babelHelpers for exactly and how can I resolve this issue?

The shape geometry component

The edges geometry component

The lens flare component.

The spot light helper component

The mesh phong material component.

Require name for objects tracked in vgl-namespace?

First of all, thank you for your work on this! I am excited to build something with vue-gl shortly and hoping to contribute.

I am not sure if this is a legitimate issue, but I was confused when my scene stopped working as soon as I added a name to my camera. It turns out that the vgl-renderer gets the camera from vgl-namespace via it's optional camera prop. The name prop on cameras is also optional.

This ends up working ok by default since the lookup finds the camera by looking up the 'undefined' key in vglNamespace.cameras, but it can be problematic. For example, if I create two unnamed cameras within a vgl-renderer, the last one overwrites the first within the vgl-namespace.

Maybe this is intentional, but I wonder if it would be better to require the name property on objects that get stored in vgl-namespace by name (e.g. scenes, cameras, geometries, etc.)

The parametric geometry component

The lathe geometry component

The text geometry component.

The skinned mesh component

The hemisphere light component.

The bone component

The point light helper component.

.obj + .mtl

Hi. Is there any way to implement .obj + .mtl?

The shadow material component.

The hemisphere light helper component

The rect area light helper component

The extrude geometry component

The tube geometry component

The spot light helper component.

The sprite material component.

The skelton component

Ensure updateProjectionMatrix() to be called when testing camera components

Cloned camera objects cannot be tested that projectionMatrixes are updated or not.

The polyhedron geometry component

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Once you have installed CI on this repository, you’ll need to re-trigger Greenkeeper’s initial Pull Request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organiszation’s settings page, under Installed GitHub Apps.

The mesh lamber material component.

The skelton helper component

The mesh basic material component.

The mesh toon material component.

How to access Three objects, like scene?

Hello, I want to use it for example with Three.js Inspector in chrome, where I need to attach scene to window for it to work. I've tried $refs, but it returns vue component with no scene object to be found inside :). Any tips?

The mesh normal material component.

The wireframe geometry component

Custom object

Hello. In your Getting Started example, how would you go about creating a custom component with it's own parameters and use that between the vgl-scene-tags, eg <custom-grid></custom-grid>? For example if I would like to create my own grid component, or just an Object that can be reused.

The texture component.

Needed by #27 .

The vertex normals helper component.

The LOD component

The camera helper component.

The mesh physical material component.

OrbitControls

Thanks for a really good and extendable repository. I have a question. I have created a custom GridSystem that extends the VglObject3D. It works as expected. Now I would like to add OrbitControls. How would you do it? So far I have created a new vue component that import THREE.OrbitControls. But how would you instantiate the OrbitControls component with a camera attached?

The polar grid helper component.

The line dashed material component.

The rect area light component

Not really an issue - Finally a real project that fuse Vue & ThreeJS

Well done here and congrats.

I was waiting a project like this since years!

I post here because the project lack of Discourse Forum / Telegram channel.

I'm a lot busy currently but will definitely make some PR to help include more components.
Awaiting especially VglLod as procedural content is so cool and nicely integrated in Three.Js.

Thanks again and long life to this active project!

Cannot view examples on Chrome latest

Hello, I apologize if this is a simple configuration issue on my end with Chrome. I am seeing blank screens for each preview, however, the console shows the library was loaded correctly without error. Is it possible I have WebGL disabled?

https://i.imgur.com/qqOaeoC.png

what is the iframe for ?

Hello, just would like to know for what the iframe in the renderer is for: https://github.com/vue-gl/vue-gl/blob/master/src/renderers/vgl-renderer.js#L111

The directional light helper component.