Vue.js components rendering 3D WebGL graphics reactively with three.js
v1 has drastically different syntax and structure since v0.x.
When a VueGL component needs another component as its dependent data, the component to be registered needed the name prop to be defined and namespace component handled it in v0.x.
In v1, components does not need names but they will be defined in a named slot of another component.
v0.x
<vgl-namespace>
<vgl-geometry name="g" />
<vgl-material name="m" />
<vgl-mesh geometry="g" material="m" />
</vgl-namespace>
v1
<vgl-mesh>
<template #geometry>
<vgl-geometry />
</template>
<template #material>
<vgl-material />
</template>
</vgl-mesh>
In v0.x, some props received a formatted string and VueGL parsed them.
v0.x
<vgl-mesh position="1.2 3.4 5.6" />
In v1, props accept primitive values as possible and their definitions are simplified .
v1
<vgl-mesh :position-x="1.2" :position-y="3.4" :position-z="5.6" />
Using named slots prevents re-using same instance.
Now we have
v0.x
<vgl-namespace>
<vgl-geometry name="g" />
<vgl-mesh geometry="g" />
<vgl-line geometry="g" />
</vgl-namespace>
v1
<vgl-defs>
<template #g>
<vgl-geometry />
</template>
</vgl-defs>
<vgl-mesh>
<template #geometry>
<vgl-use href="g" />
<template>
<vgl-mesh>
<vgl-line>
<template #geometry>
<vgl-use href="g" />
</template>
</vgl-line>
In v0.x, New
Update versions of depencencies.