插件名称 | vue-gl |
---|---|
版本号 | v0.23.1 |
发布时间 | 2020年6月25日 |
插件作者 | vue-gl |
vue-gl提供了一组组件来使用three.js库渲染3D图形。
v0.23.1(03/06/2021)
v0.23.0(03/02/2021)
v0.22.1(2020年8月29日)
v0.22.0(06/23/2020)
# Yarn
$ yarn add vue-gl
# NPM
$ npm install vue-gl --save
将必要的库导入文档。
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/three"></script>
<script src="https://unpkg.com/vue-gl"></script>
定义对象。
<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></vgl-directional-light>
</vgl-scene>
<vgl-perspective-camera orbit-position="200 1 1"></vgl-perspective-camera>
</vgl-renderer>
注册组件并启动vue。
Object.keys(VueGL).forEach(name => {
Vue.component(name, VueGL[name]);
});
new Vue({
el: "#vgl-canvas"
});