three/examples/jsm/libs/stats.module在vue3项目里怎么使用

在 Vue 3 项目中使用 `stats.module.js`（在最新版本的 three.js 中被重命名为 `stats.js`）可以按照以下步骤进行操作：

1. 首先，确保你已经安装了 `three` 库。你可以通过 npm 或 yarn 进行安装：

npm install three

或

yarn add three

2. 在你的 Vue 3 项目中创建一个新的组件用于显示性能统计信息。你可以将其命名为 `Stats.vue`。在该组件中，你可以使用 `<div>` 元素来显示统计信息。

<template>
  <div ref="statsContainer"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import * as THREE from 'three';

import Stats from 'three/examples/jsm/libs/stats.module';

export default defineComponent({
  name: 'Stats',
  setup() {
    const statsContainer = ref<HTMLDivElement | null>(null);

    onMounted(() => {
      const stats = new Stats();
      stats.showPanel(0); // 0: FPS, 1: ms, 2: MB, 3+: custom
      statsContainer.value?.appendChild(stats.dom);

      function animate() {
        stats.begin();
        // 执行你的更新逻辑
        stats.end();
        requestAnimationFrame(animate);
      }
      requestAnimationFrame(animate);
    });

    return {
      statsContainer,
    };
  },
});
</script>

3. 在你需要使用性能统计信息的组件中，引入并使用 `Stats` 组件。

<template>
  <div>
    <!-- 其他组件内容 -->
    <Stats />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Stats from './Stats.vue';

export default defineComponent({
  name: 'App',
  components: {
    Stats,
  },
});
</script>

现在，你可以在 Vue 3 项目中使用 `stats.module.js`（或 `stats.js`）来显示性能统计信息。请确保在适当的位置调用了 `stats.begin()` 和 `stats.end()` 方法以开始和结束统计信息的渲染。希望对你有所帮助！