vue-gl / vue-gl

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

Home Page:https://vue-gl.github.io/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Question regarding binding custom geometry to VglObject3d

danvim opened this issue · comments

I just discovered this library yesterday. I want to ask, if I load my own objects from some loader, how can I bind materials and geometries from the files to VglObject3d? Because the field for :geometry="" and :material="" accept names. Do I have to add them to the scene under some fake object to have named geometries and materials?

You can use vglNamespace injected object. It has namespaces such as vglNamespace.geometries, vglNamespace.materials...

If instance is initialized like below,

const vm = new Vue({
  template: '<vgl-renderer ref="r"><vgl-mesh :material="m" :geometry="g" /></vgl-renderer>',
  data: { m: undefined, g: undefined },
});

you can set materials and geometries for this mesh by adding them to namespace object

vm.$set(vm.$refs.r.vglNamespace.materials, 'loadedMaterialName', loadedMaterialObject);
vm.$set(vm.$refs.r.vglNamespace.geometries, 'loadedGeometryName', loadedGeometryObject);

Then, changing datas m and g will apply loaded objects to VglMesh.

vm.m = 'loadedMaterialName';
vm.g = 'loadedGeometryName';
// -> will render with loaded material and mesh.

Thanks. I couldn't find this on the docs. If so, maybe include this also? I think it's quite important.