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="vgl-canvas">
<vgl-sphere-geometry name="sphere"></vgl-sphere-geometry>
<vgl-scene>
<vgl-mesh geometry="sphere"></vgl-mesh>
</vgl-scene>
<vgl-perspective-camera orbit-position="5 0 0"></vgl-perspective-camera>
</vgl-renderer>
<!-- Register components and start vue -->
<script>
Object.keys(VueGL).forEach(name => Vue.component(name, VueGL[name]));
new Vue({ el: "#vgl-canvas" });
</script>
See the documentation for more information.
Components
- Cameras
- VglCamera -
Corresponding to THREE.Camera - VglOrthographicCamera -
Corresponding to THREE.OrthographicCamera - VglPerspectiveCamera -
Corresponding to THREE.PerspectiveCamera
- VglCamera -
- Core
- VglGeometry -
Corresponding to THREE.Geometry - VglObject3d -
Corresponding to THREE.Object3D
- VglGeometry -
- Geometries
- VglBoxGeometry -
Corresponding to THREE.BoxGeometry - VglCircleGeometry -
Corresponding to THREE.CircleGeometry - VglConeGeometry -
Corresponding to THREE.ConeGeometry - VglCylinderGeometry -
Corresponding to THREE.CylinderGeometry - VglDodecahedronGeometry - Corresponding to THREE.DodecahedronGeometry
- VglEdgesGeometry -
Corresponding to THREE.EdgesGeometry - VglExtrudeGeometry -
Corresponding to THREE.ExtrudeGeometry - VglIcosahedronGeometry - Corresponding to THREE.IcosahedronGeometry
- VglLatheGeometry -
Corresponding to THREE.LatheGeometry - VglOctahedronGeometry -
Corresponding to THREE.OctahedronGeometry - VglParametricGeometry -
Corresponding to THREE.ParametricGeometry - VglPlaneGeometry -
Corresponding to THREE.PlaneGeometry - VglPolyhedronGeometry -
Corresponding to THREE.PolyhedronGeometry - VglRingGeometry -
Corresponding to THREE.RingGeometry - VglShapeGeometry -
Corresponding to THREE.ShapeGeometry - VglSphereGeometry -
Corresponding to THREE.SphereGeometry - VglTetrahedronGeometry - Corresponding to THREE.TetrahedronGeometry
- VglTextGeometry -
Corresponding to THREE.TextGeometry - VglTorusGeometry -
Corresponding to THREE.TorusGeometry - VglTorusKnotGeometry -
Corresponding to THREE.TorusKnotGeometry - VglTubeGeometry -
Corresponding to THREE.TubeGeometry - VglWireframeGeometry -
Corresponding to THREE.WireframeGeometry
- VglBoxGeometry -
- Helpers
- VglArrowHelper -
Corresponding to THREE.ArrowHelper - VglAxesHelper -
Corresponding to THREE.AxesHelper - VglBoxHelper -
Corresponding to THREE.BoxHelper - VglCameraHelper -
Corresponding to THREE.CameraHelper - VglDirectionalLightHelper - Corresponding to THREE.DirectionalLightHelper
- VglGridHelper -
Corresponding to THREE.GridHelper - VglPolarGridHelper -
Corresponding to THREE.PolarGridHelper - VglHemisphereLightHelper - Corresponding to THREE.HemisphereLightHelper
- VglPointLightHelper -
Corresponding to THREE.PointLightHelper - VglSkeletonHelper -
Corresponding to THREE.SkeletonHelper - VglSpotLightHelper -
Corresponding to THREE.SpotLightHelper
- VglArrowHelper -
- Lights
- VglAmbientLight -
Corresponding to THREE.AmbientLight - VglDirectionalLight -
Corresponding to THREE.DirectionalLight - VglHemisphereLight -
Corresponding to THREE.HemisphereLight - VglLight -
Corresponding to THREE.Light - VglPointLight -
Corresponding to THREE.PointLight - VglRectAreaLight -
Corresponding to THREE.RectAreaLight - VglSpotLight -
Corresponding to THREE.SpotLight
- VglAmbientLight -
- Materials
- VglLineBasicMaterial -
Corresponding to THREE.LineBasicMaterial - VglLineDashedMaterial -
Corresponding to THREE.LineDashedMaterial - VglMaterial -
Corresponding to THREE.Material - VglMeshBasicMaterial -
Corresponding to THREE.MeshBasicMaterial - VglMeshDepthMaterial -
Corresponding to THREE.MeshDepthMaterial - VglMeshLambertMaterial - Corresponding to THREE.MeshLambertMaterial
- VglMeshNormalMaterial -
Corresponding to THREE.MeshNormalMaterial - VglMeshPhongMaterial -
Corresponding to THREE.MeshPhongMaterial - VglMeshPhysicalMaterial - Corresponding to THREE.MeshPhysicalMaterial
- VglMeshStandardMaterial - Corresponding to THREE.MeshStandardMaterial
- VglMeshToonMaterial -
Corresponding to THREE.MeshToonMaterial - VglPointsMaterial -
Corresponding to THREE.PointsMaterial - VglRawShaderMaterial -
Corresponding to THREE.RawShaderMaterial - VglShaderMaterial -
Corresponding to THREE.ShaderMaterial - VglShadowMaterial -
Corresponding to THREE.ShadowMaterial - VglSpriteMaterial -
Corresponding to THREE.SpriteMaterial
- VglLineBasicMaterial -
- Objects
- VglBone -
Corresponding to THREE.Bone - VglGroup -
Corresponding to THREE.Group - VglLine -
Corresponding to THREE.Line - VglLineLoop -
Corresponding to THREE.LineLoop - VglLineSegments -
Corresponding to THREE.LineSegments - VglLod -
Corresponding to THREE.LOD - VglMesh -
Corresponding to THREE.Mesh - VglPoints -
Corresponding to THREE.Points - VglSkeleton -
Corresponding to THREE.Skeleton - VglSkinnedMesh -
Corresponding to THREE.SkinnedMesh - VglSprite -
Corresponding to THREE.Sprite
- VglBone -
- Renderers
- VglRenderer -
Corresponding to THREE.WebGLRenderer
- VglRenderer -
- Scenes
- VglScene -
Corresponding to THREE.Scene
- VglScene -
- Textures
- VglTexture -
Load an image using THREE.TextureLoader
- VglTexture -
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
