VueGL

Vue.js components rendering 3D graphics reactively via three.js. See the documents for more details.

Usage

Define objects by tags.
Save the following code as a html file, and open in any modern browser.

<!-- dependencies -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/three"></script>

<!-- load components -->
<script src="https://unpkg.com/vue-gl"></script>

<!-- define objects -->
<vgl-renderer id="vgl-canvas" style="width: 300px; height: 150px;">
  <vgl-scene>
    <vgl-sphere-geometry></vgl-sphere-geometry>
    <vgl-mesh-standard-material></vgl-mesh-standard-material>
    <vgl-mesh></vgl-mesh>
    <vgl-ambient-light></vgl-ambient-light>
    <vgl-directional-light position="2 0 1"></vgl-directional-light>
  </vgl-scene>
  <vgl-perspective-camera orbit-position="200 1 1"></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>

When you open the html above in the browser, you'll see below.

Note that IE9 needs a polyfill for the TypedArray class, like the js-polyfills/typedarray.js.

Components

• 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
  • VglFaceNormalsHelper - Corresponding to THREE.FaceNormalsHelper
  • VglGridHelper - Corresponding to THREE.GridHelper
  • VglPolarGridHelper - Corresponding to THREE.PolarGridHelper
  • VglHemisphereLightHelper - Corresponding to THREE.HemisphereLightHelper
  • VglPointLightHelper - Corresponding to THREE.PointLightHelper
  • VglRectAreaLightHelper - Corresponding to THREE.RectAreaLightHelper
  • VglSkeletonHelper - Corresponding to THREE.SkeletonHelper
  • VglSpotLightHelper - Corresponding to THREE.SpotLightHelper
  • VglVertexNormalsHelper - Corresponding to THREE.VertexNormalsHelper
• 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

Contribution

Are you interested in enhance this product? We're really glad and thanks a lot!
See Contributing guidelines to get started.

License