如何在vue3中使用aframe

• 随着互联网的发展，现在浏览器已经能够很好的加载3D文件了，提起3D我们首先想到是webGL，使用threejs来绘制3D图形。然而原生的threejs使用起来比较的繁琐，相机，场景，纹理，光线，几何体好多概念，用起来不是太友好。
• aframe可以使用标签来写3D场景，像使用html标签一样。aframe对threejs做了封装，这样，我们使用aframe就可以简单快捷的来实现我们想要的3D效果，那么，如何在vue3中使用aframe呢？
• 首先，你要使用vite-app来创建一个vue3项目，根据提示下载依赖并启动项目。
• 项目跑起来后，确定没有问题，我们就开始下载aframe依赖，使用

npm install aframe --save

进行安装依赖，注意：不要使用yarn来安装，yarn安装aframe貌似下载不下来。

• 然后，我们想要在main.js中Vue.use一下，不过vue3版本有所变化，需要如下操作：

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import AFRAME from 'aframe';
const app=createApp(App);
app.use(AFRAME);
app.mount('#app')

这样就可以使用aframe标签来写3D内容了。

我的3D文件这么写的：

<template>
  <a-scene renderer="antialias: auto" tune-render>
    <a-assets>
    //存放纹理，背景资源
        <img id="skyTexture" src="../assets/tian.jpg" alt="图片" />
        <a-assets-item id="botDance" src="../assets/Bee.glb"></a-assets-item>
    </a-assets>
    <a-box
      position="0 2 -5"
      rotation="0 45 45"
      scale="2 2 2"
      src="#boxTexture"
    ></a-box>
    <a-sky src="#skyTexture"></a-sky>
      <a-light
        type="ambient"
        color="#ffffff"
        intensity="1"
      ></a-light>
    <a-light
        type="directional"
        color="#ffffff"
        position="0 400 350"
        intensity="2"
    ></a-light>
    <a-camera fov="45" far="2000" near="1"></a-camera>
</a-scene>
</template>