Vue 3D Model 3D模型解析展示-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue 3D Model 3D模型解析展示。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

API地址

安装 | Vue 3D Model

一、安装 Vue 3D Model

npm 安装：

npm install vue-3d-model --save

yarn 安装：

yarn add vue-3d-model

pnpm 安装：

pnpm install vue-3d-model

二、使用

FBX格式：

<template>
  <model-fbx
    src="/static/models/fbx/dancing.fbx"
  />
</template>
<script>
import { ModelFbx } from 'vue-3d-model';
export default {
    components: {
        ModelFbx
    }
}
</script>

GLTF 格式：

<template>
  <model-gltf
    src="/static/models/gltf/Duck/glTF/Duck.gltf"
  />
</template>
<script>
import { ModelGltf } from 'vue-3d-model';
export default {
    components: {
        ModelGltf 
    },
}
</script>

JSON格式：

<template>
  <model-three
    src="/static/models/json/scene.json"
  />
</template>
<script>
import { ModelThree } from 'vue-3d-model';
export default {
    components: {
        ModelThree
    }
}
</script>

OBJ 格式：

<template>
  <model-obj
    src="/static/models/obj/tree.obj"
  />
</template>
<script>
import { ModelObj } from 'vue-3d-model';
export default {
    components: {
        ModelObj
    }
}
</script>

PLY 格式：

<template>
  <model-ply
    src="/static/models/ply/binary/Lucy100k.ply"
  />
</template>
<script>
import { ModelPly } from 'vue-3d-model';
export default {
    components: {
        ModelPly
    }
}
</script>

STL格式：

<template>
  <model-stl
    src="/static/models/stl/gear.stl"
  />
</template>
<script>
import { ModelStl } from 'vue-3d-model';
export default {
    components: {
        ModelStl
    }
}
</script>

DAE格式：文章来源地址https://www.toymoban.com/news/detail-738812.html

<template>
  <model-collada
    src="/static/models/collada/elf/elf.dae"
  />
</template>
<script>
import { ModelCollada } from 'vue-3d-model';

export default {
    components: {
        ModelCollada 
    }
}
</script>

到了这里，关于Vue 3D Model 3D模型解析展示的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！