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]
 該所有者的項目
                                                                (
                                                                該所有者的項目
                                                                (