vue3 加载3D模型 插件model-viewer js

持续前行
993 阅读47分钟

在 Vue 3 中使用 model-viewer 是一个不错的选择，因为它可以很方便地在网页中展示 3D 模型。model-viewer 是一个开源的 Web 组件，它使用现代浏览器中的 WebXR 和 WebGL 技术来渲染 3D 模型。

以下是如何在 Vue 3 项目中集成和使用 model-viewer 的步骤：

1. 安装依赖

首先，你需要在项目中安装 model-viewer。尽管 model-viewer 可以通过 CDN 直接引入，但也可以通过 npm 包管理工具进行安装（虽然目前 model-viewer 没有直接发布到 npm，但你可以通过导入 CDN 的方式实现）。

不过，由于 model-viewer 是作为一个 Web 组件发布的，所以你也可以直接在 HTML 中通过 CDN 引入。

2. 在 public/index.html 中引入 CDN

model-viewer js

在你的 index.html 文件中，添加以下代码来引入 model-viewer： unpkg.com/@google/mod…

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue 3 Model Viewer</title>
    <!-- 引入线上js model-viewer -->
   <!--  <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">-->
      <!-- 引入离线js model-viewer    model-viewer.min.js文件放在public下-->
     <script type="module" src="/model-viewer.min.js"></script>
      
      </script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3. 在 Vue 组件中使用 model-viewer

现在你可以在你的 Vue 组件中使用 model-viewer 标签了。以下是一个简单的示例：

<template>
  <div  v-loading="loading">
    <h1>3D Model Viewer with Vue 3</h1>
  
       <!-- 使用 model-viewer 组件 -->
        <model-viewer
            id="my-model-viewer"
            src="/Model/nv-3.glb"
            ref="modelViewer"
            @load="onModelLoad"
            style="width: 800px; height: 600px"
            auto-rotate
            rotation-per-second="30deg"
            camera-controls
            disable-zoom
            interaction-prompt="none"
            disable-pan
            min-camera-orbit="0deg 90deg auto"
            max-camera-orbit="360deg 90deg auto"
          >
          </model-viewer>
  </div>
</template>
 
<script>
import { onMounted, onBeforeUnmount, getCurrentInstance, ref } from "vue";
const loading = ref(true);
// 这里可以添加额外的加载后逻辑，比如启动自动旋转动画
const onModelLoad = () => {
  loading.value = false;

};
</script>
 
<style scoped>
/* 你可以在这里添加一些样式 */
model-viewer {
  width: 100%;
  max-width: 600px;
  height: auto;
}
</style>

禁止鼠标拖行改变视角方向配置 26c60ae87ab41649fa3a29168d828d7.png

04c48398f9a285661dc0e503d430432.png

b901b6a8b5a1c3dbb965d4d92352c72.png

5. 运行你的项目

确保你已经安装了所有必要的依赖，并且项目已经正确配置。 然后运行你的 Vue 项目：

npm run serve

现在你应该能够在浏览器中看到一个带有 3D 模型的页面，这个模型是由 model-viewer 渲染的。

通过这些步骤，你已经成功地在 Vue 3 项目中集成了 model-viewer 并展示了一个 3D 模型。你可以根据需要进一步定制和扩展 model-viewer 的功能。

avatar
文章
阅读
粉丝