Vue.js components rendering 3D WebGL graphics reactively with three.js.
<!-- 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.
- Cameras
- VglCamera - Corresponding to THREE.Camera
- VglOrthographicCamera - Corresponding to THREE.OrthographicCamera
- VglPerspectiveCamera - Corresponding to THREE.PerspectiveCamera
- Core
- VglGeometry - Corresponding to THREE.Geometry
- VglObject3d - Corresponding to THREE.Object3D
- 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
- 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
- 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
- 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
- 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
- Renderers
- VglRenderer - Corresponding to THREE.WebGLRenderer
- Scenes
- VglScene - Corresponding to THREE.Scene
- Textures
- VglTexture - Load an image using THREE.TextureLoader
Are you interested in enhance this product?
We're really glad and thanks a lot!
See Contributing guidelines to get started.
This project exists thanks to all the people who contribute. [Contribute].
Become a financial contributor and help us sustain our community. [Contribute]
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
