基于@egjs/view3d的霸王龙动画示例

原创

ScriptEcho 2024-05-27 15:07:18 ©著作权

文章标签 3d 3D 缩放 文章分类 Vue.js 前端开发

©著作权归作者所有：来自51CTO博客作者ScriptEcho的原创作品，请联系作者获取转载授权，否则将追究法律责任

基于@egjs/view3d的霸王龙动画示例_3d

本文由ScriptEcho平台提供技术支持

项目地址：传送门

3D 模型展示卡片的 Vue 实现

应用场景

在产品展示、在线教育、虚拟展厅等场景中，展示 3D 模型可以提供更直观、交互式的体验。本文介绍如何使用 Vue.js 和 Egjs View3D 库来创建可旋转、缩放和自动播放的 3D 模型展示卡片。

基本功能

该卡片组件的基本功能包括：

加载和展示 3D 模型
允许用户旋转、缩放模型
自动播放模型动画

功能实现

1. 安装依赖项

npm install @egjs/view3d vue

2. 创建 Vue 组件

<template>
  <div id="wrapper-el" class="view3d-wrapper view3d-square">
    <canvas class="view3d-canvas"></canvas>
  </div>
</template>

<script lang="tsx" setup>
import View3D from '@egjs/view3d';
import { ref, onMounted } from 'vue';

const view3D = ref(null);
const autoRotateSpeed = 0.5; // speed of auto-rotation

onMounted(() => {
  view3D.value = new View3D('#wrapper-el', {
    src: 'https://scriptecho.oss-cn-beijing.aliyuncs.com/3d/trex.glb',
    fixSkinnedBbox: true,
    meshoptPath: 'https://unpkg.com/meshoptimizer@0.17.0/meshopt_decoder.js',
    scale: 1.5, // Increase the T-Rex model size by 1.5x
    autoRotate: true,
    autoRotateSpeed: autoRotateSpeed,
   autoplay: {
        delay: 1000,
       speed: -4,
        canInterrupt: true
    }
  });
});
</script>

<style>
@import '@egjs/view3d/css/view3d-bundle.min.css';
#wrapper-el {
  width: 700px;
  height: 500px; /* Height is necessary for canvas */
}
.view3d-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.view3d-square {
  --view3d-size: 500px; /* Maintain square aspect ratio */
  padding-top: var(--view3d-size);
  font-size: 14px; /* Set base font-size to 14px */
}
th {
  font-size: 16px; /* Table header font-size set to 16px */
}
</style>

3. 分析关键代码