vue-dft-vision

Appearance

On this page

快速上手 ​

TIP

  1. 提前准备好以下两个引擎文件, 初始化场景依赖引擎文件
├── dft-vision-core-es6.min.js
├── dft-plugin-es6.min.js
  1. 离线场景下, 还需要准备好模型资源, 放在 public 下面即可
├── public
│   └── pdv
│       └── 此目录下为模型文件
│   │   └── model-example
├── src
├── package.json

步骤 1: 安装组件库依赖 ​

shell
$ npm install vue3-dft-vision
shell
$ npm install vue2-dft-vision

TIP

没有网络的情况下, 只能通过压缩包vue2-dft-vision@x.x.x.zip的方式使用组件库, zip 包含两个部分: 组件库和所有的依赖。将压缩包下面的文件夹放置到 node_modules 下, 如果依赖和原项目有重复可以选择性放置。

步骤 2: 引入组件库 ​

按需引入

javascript
// 按需引入（这里以ModelTree、ModelView为例）
import { createApp } from "vue";
import App from "./App.vue";
import { DftModelTree, DftModelView } from "vue3-dft-vision";
import "vue3-dft-vision/lib/style.css";
const app = createApp(App);
app.use(DftModelTree).use(DftModelView);
app.mount("#app");
javascript
// 按需引入（这里以ModelTree、ModelView为例）
import Vue from "vue";
import App from "./App.vue";
import "vue2-dft-vision/lib/style.css";
import { DftModelTree, DftModelView } from "vue2-dft-vision";
Vue.component("DftModelTree", DftModelTree);
Vue.component("DftModelView", DftModelView);
new Vue({
  render: (h) => h(App),
}).$mount("#app");

步骤 3: 简单使用组件 ​

WARNING

父节点需要设置高度, 否则可能看不到模型！！！

离线查看 ​

离线查看, 即访问提前放在 public 下的模型文件, 通过修改链接中的 modelUrl 参数切换不同的模型(前提是 public 下面有)。

vue
<template>
   <div style="width:100vw;height:100vh;"> 
    <dft-model-tree></dft-model-tree>
    <dft-model-view
      :scene-constructor="DFTCore.Scene"
      :scene-options="sceneOptions"
    />
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import DFTCore from "dft-vision-core-es6.min.js";

const sceneOptions = reactive({
  // 数据源，默认 DFTCore.OFFLINE
  dataType: DataType.OFFLINE,
  // 文件路径(链接中的 `modelUrl`)
  url: "/pdv/model-example",
});
</script>
vue
<template>
   <div style="width:100vw;height:100vh;"> 
    <dft-model-tree></dft-model-tree>
    <dft-model-view
      :scene-constructor="DFTCore.Scene"
      :scene-options="sceneOptions"
    />
  </div>
</template>
<script>
import DFTCore from "../public/lib/dft-vision-core-es6.min.js";
export default {
  data() {
    return {
      sceneOptions: {
        // 数据源，默认 DFTCore.OFFLINE
        dataType: DFTCore.OFFLINE,
        // 文件路径
        url: "/pdv/model-example",
      },
      DFTCore,
    };
  },
};
</script>

在线查看 ​

vue
<template>
   <div style="width:100vw;height:100vh;"> 
    <dft-model-tree></dft-model-tree>
    <dft-model-view
      :scene-constructor="DFTCore.Scene"
      :scene-options="sceneOptions"
    />
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import DFTCore from "../public/lib/dft-vision-core-es6.min.js";

const sceneOptions = reactive({
  // 数据源，默认 DFTCore.OFFLINE
  dataType: DataType.ONLINE,
  // api路径
  url: "https://my.com/openapi",
  // 场景id
  id: "123456",
});
</script>
vue
<template>
   <div style="width:100vw;height:100vh;"> 
    <dft-model-tree></dft-model-tree>
    <dft-model-view
      :scene-constructor="DFTCore.Scene"
      :scene-options="sceneOptions"
    />
  </div>
</template>
<script>
import DFTCore from "../public/lib/dft-vision-core-es6.min.js";
export default {
  data() {
    return {
      sceneOptions: {
        // 数据源，默认 DFTCore.OFFLINE
        dataType: DFTCore.ONLINE,
        // api路径
        url: "https://my.com/openapi",
        // 场景id
        id: "123456",
      },
      DFTCore,
    };
  },
};
</script>

运行项目，此时模型已经渲染