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

本文由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. 分析关键代码

• onMounted 钩子用于在组件挂载后初始化 View3D 实例。
• View3D 构造函数接受一个元素选择器和一个配置对象作为参数。
• 配置对象指定了模型源 (src)、自动旋转速度 (autoRotateSpeed) 和自动播放设置 (autoplay)。
• fixSkinnedBbox 选项确保模型的边界框正确计算。
• meshoptPath 选项指定了 Meshopt 解码器脚本的路径，用于优化模型几何体。
• scale 选项将模型放大 1.5 倍。

总结与展望

开发这段代码的过程让我熟悉了 Egjs View3D 库的使用，并了解了 3D 模型展示的最佳实践。未来，该卡片功能可以进一步拓展和优化：

• 添加交互式控制，允许用户平移和缩放模型。
• 支持多种模型格式，如 OBJ、STL 和 FBX。

• 集成照明和阴影效果，增强模型的真实感。

  更多组件：

  获取更多Echos

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

  项目地址：传送门

  扫码加入AI生成前端微信讨论群：