vue3-scene-web/src/views/home/index.tsx

import { defineComponent, ref } from 'vue';
import JsScript from '@/components/js-script';
import Cover from '../cover';
import Title from './components/title';
import WebVr from './components/web-vr';
import Other from './components/other';
import Guide from './components/guide';
import Vrcon from './components/vrcon';
import Menu from './components/menu';
import GuiLoading from './components/gui-loading';
import Popup from './components/popup';
import HotSpotList from './components/hot-spot-list';
import './index.scss';

export default defineComponent({
  name: 'home',
  components: {
    Title,
    WebVr,
    Other,
    Vrcon,
    GuiLoading,
    JsScript,
    Popup,
  },
  setup() {
    const manageJsLoaded = ref(false);
    const hotJsLoaded = ref(false);
    const coverVisible = ref(true);

    return {
      coverVisible,
      manageJsLoaded,
      hotJsLoaded,
    };
  },
  render() {
    return (
      <div class="home">
        {/* 封面 */}
        {this.coverVisible && (
          <Cover
            onClose={() => {
              this.coverVisible = false;
            }}
          />
        )}

        {/* 进度条加载 */}
        <GuiLoading />

        {/* 加载初始页面 */}
        <div id="gui-thumb" />

        {/* 热点弹出框 */}
        <Popup />

        {/* 场景canvs主容器 */}
        <div id="player" />

        {/* 底部菜单 */}
        <div id="gui-parent">
          {/* 热点气泡 */}
          <div id="hot" />

          <div id="gui" style="display: none;">
            {/* 标题 */}
            <Title />

            {/* 热点列表 */}
            <HotSpotList />

            {/* 底部菜单 */}
            <Menu onShowCover={() => (this.coverVisible = true)} />

            {/* 导览 */}
            <Guide />
          </div>

          <WebVr />
          <Vrcon />
          <Other />
        </div>

        {/* TODO: 没有控制权，耦合严重；放在此处为了防止元素未渲染导致报错 */}
        <JsScript src="./js/manage.js" onLoad={() => (this.manageJsLoaded = true)} />
        {this.manageJsLoaded && (
          <>
            <JsScript src="./js/Hot.js" onLoad={() => (this.hotJsLoaded = true)} />
            {this.hotJsLoaded && (
              <>
                <JsScript src="./js/main_2020_show.js" />
                {/* 延迟加载 */}
                <JsScript src="./js/lib/player-0.0.12.min.js" />
                <JsScript src="./js/lib/Tween.js" />
                <JsScript src="./js/SpecialScene.js" />
                <JsScript src="./js/loadCAD.js" />
              </>
            )}
          </>
        )}
      </div>
    );
  },
});