vue-dft-vision

Appearance

On this page

vue-dft-vision 文档 ​

文件结构 ​

离线数据推荐使用以下文件结构，其他结构也可以使用，使用过程需要自行修改本文档组件部分的代码提示。

├── public
│   ├── lib
│   │   └── 此目录下为引擎文件
│   │   └── dft-vision-core-es6.min.js
│   └── pdv
│       └── 此目录下为模型文件
├── src
├── package.json

样式问题

需要注意，组件父容器需要设置宽高。如果未设置宽高将会导致组件无法正常显示。

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

<script setup>
import { reactive } from "vue";
import DFTCore from "../public/lib/dft-vision-core-es6.min.js";
const sceneOptions = reactive({
  // 数据源，默认 DFTCore.OFFLINE
  dataType: DFTCore.OFFLINE,
  // 文件路径
  url: "/pdv/1004",
});
</script>
vue
<template>
  <div style="width:100vw;height:100vh;"> 
    <dft-model-tree></dft-model-tree>
    <dft-model-view
      :sceneConstructor="DFTCore.Scene"
      :scene-options="sceneOptions"
    ></dft-model-view>
  </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/1004",
        // 资源文件夹地址
      },
      DFTCore,
    };
  },
};
</script>

vue 版本限制

本文档只支持 vue2.6.14 及以上版本，如发现当前使用 vue 版本过低，建议升级 vue 版本。如无法升级，请联系我们。