Vue.js components rendering 3D WebGL graphics reactively with three.js
MIT License
Bot releases are visible (Hide)
Published by release-drafter[bot] about 3 years ago
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 and components instead for that purpose. They work like SVG's and .
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, creates a wrapper element and inject our canvas and resize detection element to it. It sometimes causes a layout trouble.
New component in v1 creates only a element as its $el. Resizing will be detected by ResizeObserver API. Some old browsers need a polyfill for it.
Published by release-drafter[bot] over 3 years ago
Published by release-drafter[bot] over 3 years ago
Published by release-drafter[bot] about 4 years ago
Published by release-drafter[bot] over 4 years ago
Published by release-drafter[bot] over 4 years ago
Update versions of depencencies.
Published by release-drafter[bot] almost 5 years ago
Published by release-drafter[bot] almost 5 years ago
Published by release-drafter[bot] almost 5 years ago
Published by release-drafter[bot] almost 5 years ago
number
prop type into int
and float
types.Published by release-drafter[bot] almost 5 years ago
names
prop type accepts space-separated string as a group of names. Then name
prop type is restricted not to have any spaces.
Therefore, VglMesh component can accept space-separated names as material names.
VglExtrudeGeometry component now accepts names of the VglShape component as shapes
prop.
Published by h-ikeda almost 5 years ago
VglNamespace
component now provides Namespace
class instances those have event listening system. Please check the document and code for VglNamespace
if you touch namespaces directly.
In previous versions, beforeRender
hook was called to set geometries, materials, and other objects specified by name. From this version, beforeRender
hook is removed and objects are set synchronously in watchers.
Published by h-ikeda almost 5 years ago
This version requires three.js v0.110.0 or above.
New features
VglExtrudeGeometry
componentFixes
Published by h-ikeda over 5 years ago
VglShaderMaterial
component.Published by h-ikeda over 5 years ago
fog
and backgroundTexture
for VglScene
name
property of the THREE's Object3D by propPublished by h-ikeda over 5 years ago
materials
prop of Objects now accept array of materials.Published by h-ikeda over 5 years ago
Published by h-ikeda over 5 years ago
Published by h-ikeda over 5 years ago