Vue.js应用程序中渲染3D图形– vue-gl

Vue.js应用程序中渲染3D图形– vue-gl
插件名称 vue-gl
版本号 v0.23.1
发布时间 2020年6月25日
插件作者 vue-gl

vue-gl提供了一组组件来使用three.js库渲染3D图形。

变更日志:

v0.23.1(03/06/2021)

  • 修复:删除SphericalRefrectionMapping常量

v0.23.0(03/02/2021)

  • 将Three.js版本更新为0.126.0
  • 组件的标签名称
  • 更新示例代码
  • 更新caniuse-lite

v0.22.1(2020年8月29日)

  • 修复了未定义材质道具时beforeDestroy挂钩的错误

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"
});