vue显示3d模型|vue-3d-model不显示问题

我不是女神ヾ 2022-11-07 13:29 606阅读 0赞

# vue显示3d模型使用vue-3d-model #

[https://www.npmjs.com/package/vue-3d-model][https_www.npmjs.com_package_vue-3d-model]

# 1. 下载 #

npm install vue-3d-model --save

引入组件，可支持7种模型文件类型

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>对应组件</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>obj</td> 
   <td>&lt;model-obj&gt;</td> 
  </tr> 
  <tr> 
   <td>json</td> 
   <td>&lt;model-three&gt;</td> 
  </tr> 
  <tr> 
   <td>stl</td> 
   <td>&lt;model-st&gt;</td> 
  </tr> 
  <tr> 
   <td>dae</td> 
   <td>&lt;model-collada&gt;</td> 
  </tr> 
  <tr> 
   <td>ply</td> 
   <td>&lt;model-ply&gt;</td> 
  </tr> 
  <tr> 
   <td>fbx</td> 
   <td>&lt;model-fbx&gt;</td> 
  </tr> 
  <tr> 
   <td>gltf(2.0)</td> 
   <td>&lt;model-gltf&gt;</td> 
  </tr> 
 </tbody> 
</table>

# 2.使用 #

**\# 注意事项  
\# 不显示问题：src要使用网上的资源，可以把资源放到服务器上面  
\# 没有赞问题：踩了那么多坑才得出来的教训，点个赞吧**

<template>
      <div id="app">
        <router-view />
        
        <ModelFbx src="/qcloud/upload/cgmodel001.FBX"></ModelFbx>
        
      </div>
    </template>
    
    <script>
    import {
      ModelObj,
      ModelThree,
      ModelFbx,
      ModelCollada,
      ModelStl,
      ModelPly,
      ModelGltf
    } from "vue-3d-model";
    export default {
      name: 'App',
      components: {
        ModelObj,
        ModelThree,
        ModelFbx,
        ModelCollada,
        ModelStl,
        ModelPly,
        ModelGltf
      },
    }
    </script>

[https_www.npmjs.com_package_vue-3d-model]: https://www.npmjs.com/package/vue-3d-model

发表评论取消回复

表情：

评论列表（有 0 条评论，606人围观）

还没有评论，来说两句吧...

相关阅读

相关 vscode代码模板（vue3模板）输入vue3显示代码提示

途径一：在vscode中依次打开：【文件】-->【首选项】-->【配置用户代码片段】-->【新代码片段】途径二：或者点击左下角的设置模样的按钮也可找到（如下图） ![26

朱雀/ 2024年03月23日 16:01/ 0 赞/ 114 阅读

相关 3D模型在UI中的RenderTexture显示

通常简单的做法用一个Orthographic相机来做UI相机，Canvas的RenderMode用ScreenSpace-Camera . 这种直角相机照射的3D模型显示

向右看齐/ 2023年10月18日 22:46/ 0 赞/ 120 阅读

相关 vue3打包页面不显示问题

打包静态资源查看不了解决第一步：router文件夹下的index.js里注释或修改路由方式![在这里插入图片描述][20200630125725271.png_pic_c

以你之姓@/ 2023年02月21日 11:49/ 0 赞/ 12 阅读

相关 vue3显示水印

在src下面建一个hooks文件夹，创建一个usewerter.ts文件，如下： export const getmark = () => { co

青旅半醒/ 2022年12月11日 07:52/ 0 赞/ 176 阅读

相关 vue显示3d模型|vue-3d-model不显示问题

vue显示3d模型使用vue-3d-model [https://www.npmjs.com/package/vue-3d-model][https_www.npmjs.

我不是女神ヾ/ 2022年11月07日 13:29/ 0 赞/ 607 阅读

相关 3d背景图显示

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

冷不防/ 2022年10月31日 12:30/ 0 赞/ 216 阅读

相关 UE4 3D Widget 不显示问题

这是Epic公司官方讲解3D Widget案例： https://docs.unrealengine.com/latest/INT/Engine/UMG/HowTo/Crea

た入场券/ 2022年09月25日 15:28/ 0 赞/ 211 阅读

相关 Flash Stage3D 在2D UI 界面上显示3D模型问题完美解决

Flash Stage3D 在2D UI 界面上显示3D模型问题完美解决参考文章： [（1）Flash Stage3D 在2D UI 界面上显示3D模型问题完美解决][1

阳光穿透心脏的1/2处/ 2022年08月28日 09:54/ 0 赞/ 159 阅读

相关 unity3d:显示FPS

using System.Collections; using System.Collections.Generic; using UnityEngin

古城微笑少年丶/ 2022年05月12日 01:46/ 0 赞/ 195 阅读

相关 unity3d：悬停显示

using Framework.UI; using System.Collections; using System.Collections.Gener

「爱情、让人受尽委屈。」/ 2022年05月09日 02:10/ 0 赞/ 217 阅读