3D 可视化
3D可视化的搭建流程说明
前端加载3D模型
1、下载模型解析包
npm i @splinetool/runtime
2、拉取模型并渲染
<script setup>
// 导入模型解析构造函数
import { Application } from '@splinetool/runtime'
import { onMounted, ref } from 'vue'
// 初始化3d模型
const ref3d = ref(null)
const init3dModel = () => {
// 实例化解析器实例
let spline = new Application(ref3d.value)
// 拉取模型
spline.load('https://fe-hmzs.itheima.net/scene.splinecode').then(() => {
console.log('3D模型加载并渲染完毕')
})
}
// dom节点渲染完毕再加载
onMounted(() => {
init3dModel()
})
</script>
<template>
<div class="model-container">
<!-- 准备3D渲染节点 -->
<canvas class="canvas-3d" ref="ref3d" />
</div>
</template>
<style scoped lang="scss">
.model-container {
height: 100%;
background-color: black;
width: 100%;
flex-shrink: 0;
}
</style>