aaltra-vue-gl
v0.7.5
Published
Vue.js components rendering 3D graphics reactively via three.js
Downloads
22
Maintainers
Readme
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
- [x] VglCamera - Corresponding to THREE.Camera
- [x] VglOrthographicCamera - Corresponding to THREE.OrthographicCamera
- [x] VglPerspectiveCamera - Corresponding to THREE.PerspectiveCamera
- Core
- [x] VglGeometry - Corresponding to THREE.Geometry
- [x] VglObject3d - Corresponding to THREE.Object3D
- Geometries
- [x] VglBoxGeometry - Corresponding to THREE.BoxGeometry
- [x] VglCircleGeometry - Corresponding to THREE.CircleGeometry
- [x] VglConeGeometry - Corresponding to THREE.ConeGeometry
- [x] VglCylinderGeometry - Corresponding to THREE.CylinderGeometry
- [x] VglDodecahedronGeometry - Corresponding to THREE.DodecahedronGeometry
- [ ] VglEdgesGeometry - Corresponding to THREE.EdgesGeometry
- [ ] VglExtrudeGeometry - Corresponding to THREE.ExtrudeGeometry
- [x] VglIcosahedronGeometry - Corresponding to THREE.IcosahedronGeometry
- [x] VglLatheGeometry - Corresponding to THREE.LatheGeometry
- [x] VglOctahedronGeometry - Corresponding to THREE.OctahedronGeometry
- [ ] VglParametricGeometry - Corresponding to THREE.ParametricGeometry
- [x] VglPlaneGeometry - Corresponding to THREE.PlaneGeometry
- [ ] VglPolyhedronGeometry - Corresponding to THREE.PolyhedronGeometry
- [x] VglRingGeometry - Corresponding to THREE.RingGeometry
- [ ] VglShapeGeometry - Corresponding to THREE.ShapeGeometry
- [x] VglSphereGeometry - Corresponding to THREE.SphereGeometry
- [x] VglTetrahedronGeometry - Corresponding to THREE.TetrahedronGeometry
- [x] VglTextGeometry - Corresponding to THREE.TextGeometry
- [x] VglTorusGeometry - Corresponding to THREE.TorusGeometry
- [x] VglTorusKnotGeometry - Corresponding to THREE.TorusKnotGeometry
- [ ] VglTubeGeometry - Corresponding to THREE.TubeGeometry
- [ ] VglWireframeGeometry - Corresponding to THREE.WireframeGeometry
- Helpers
- [x] VglArrowHelper - Corresponding to THREE.ArrowHelper
- [x] VglAxesHelper - Corresponding to THREE.AxesHelper
- [x] VglBoxHelper - Corresponding to THREE.BoxHelper
- [x] VglCameraHelper - Corresponding to THREE.CameraHelper
- [x] VglDirectionalLightHelper - Corresponding to THREE.DirectionalLightHelper
- [ ] VglFaceNormalsHelper - Corresponding to THREE.FaceNormalsHelper
- [x] VglGridHelper - Corresponding to THREE.GridHelper
- [x] 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
- [x] VglAmbientLight - Corresponding to THREE.AmbientLight
- [x] VglDirectionalLight - Corresponding to THREE.DirectionalLight
- [x] VglHemisphereLight - Corresponding to THREE.HemisphereLight
- [x] VglLight - Corresponding to THREE.Light
- [x] VglPointLight - Corresponding to THREE.PointLight
- [ ] VglRectAreaLight - Corresponding to THREE.RectAreaLight
- [x] VglSpotLight - Corresponding to THREE.SpotLight
- Materials
- [x] VglLineBasicMaterial - Corresponding to THREE.LineBasicMaterial
- [x] VglLineDashedMaterial - Corresponding to THREE.LineDashedMaterial
- [x] VglMaterial - Corresponding to THREE.Material
- [x] VglMeshBasicMaterial - Corresponding to THREE.MeshBasicMaterial
- [x] VglMeshDepthMaterial - Corresponding to THREE.MeshDepthMaterial
- [x] VglMeshLambertMaterial - Corresponding to THREE.MeshLambertMaterial
- [x] VglMeshNormalMaterial - Corresponding to THREE.MeshNormalMaterial
- [x] VglMeshPhongMaterial - Corresponding to THREE.MeshPhongMaterial
- [x] VglMeshPhysicalMaterial - Corresponding to THREE.MeshPhysicalMaterial
- [x] VglMeshStandardMaterial - Corresponding to THREE.MeshStandardMaterial
- [x] VglMeshToonMaterial - Corresponding to THREE.MeshToonMaterial
- [x] VglPointsMaterial - Corresponding to THREE.PointsMaterial
- [ ] VglRawShaderMaterial - Corresponding to THREE.RawShaderMaterial
- [ ] VglShaderMaterial - Corresponding to THREE.ShaderMaterial
- [x] VglShadowMaterial - Corresponding to THREE.ShadowMaterial
- [x] VglSpriteMaterial - Corresponding to THREE.SpriteMaterial
- Objects
- [ ] VglBone - Corresponding to THREE.Bone
- [x] VglGroup - Corresponding to THREE.Group
- [x] VglLine - Corresponding to THREE.Line
- [x] VglLineLoop - Corresponding to THREE.LineLoop
- [x] VglLineSegments - Corresponding to THREE.LineSegments
- [ ] VglLod - Corresponding to THREE.LOD
- [x] VglMesh - Corresponding to THREE.Mesh
- [x] VglPoints - Corresponding to THREE.Points
- [ ] VglSkeleton - Corresponding to THREE.Skeleton
- [ ] VglSkinnedMesh - Corresponding to THREE.SkinnedMesh
- [x] VglSprite - Corresponding to THREE.Sprite
- Renderers
- [x] VglRenderer - Corresponding to THREE.WebGLRenderer
- Scenes
- [x] VglScene - Corresponding to THREE.Scene
- Textures
- [x] 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.