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

[eKyNoX]

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!

[IKEDA Hiroki]

We appreciate your support, and look forward to your PR!
#195

[eKyNoX]

Is it possible to have a brief explanation on how you build usually your vue component based on a ThreeJs functionality?

[IKEDA Hiroki]

I simply associate threejs classes to our components.
Inheritance relations are represented by component mixins.
ex) AmbientLight class inherits Light class → VglAmbientLight component has VglLight component as mixin.
Component props are corresponding threejs class property.

WebGL objects are not DOM elements, so you have to implement watchers for props to be reactive.
Every modification has to call VglNamespace's update method. It flashes beforeRender queue and calls render method of the WebGLRenderers. Many classes inherit an abstract class which calls update method on beforeUpdate (like this), then we don't have to call it explicitly.
I made the beforeRender queue because some objects need another object's information to calculate their properties.
ex) Light helpers must calculate properties after setting lights. (source)

Object tree relationship is represented by provide/inject system. An object component in the slot of another object component would be a child object.

So first, create the component with mixin. Then implement props and watchers.
If it's a simple component, that's all. But some property needs anomalous implementation.

Note that we use vuedoc, it will automatically create documents from comments.
If you want to create an example, create a file in the docs/examples directory. After bundle install, yarn start will start jekyll server for checking the documentation. The example will appear in the component reference page.

I hope it will help your contribution.

[eKyNoX]

Thanks for explanations, it does help!