背景介绍

在UniApp中实现微信小程序的全景图效果是一个挑战性的任务。在这篇博客中，将分享一些的尝试和经验，以及所遇到的一些问题和解决方案。

选择合适的技术

问题与解决方案

1.threejs

• 尝试使用 Three.js 实现全景图效果，但在小程序中遇到了一些问题，例如无法正确定义 canvas 容器的宽高。
• 考虑了使用 Three.js 的小程序版本three-platformize，但也面临各种问题。
• 最终，考虑采用嵌入 HTML 的方式来解决问题。

2.使用photo-sphere-viewer.js

• 通过使用 photo-sphere-viewer.js 实现了 HTML 格式的全景图，然后通过 UniApp 的 web-view 组件访问 HTML，并动态控制不同全景图的参数。
• 然而，由于小程序端不支持本地 HTML，只能采用外链 HTML 的形式，需要配置业务域名才能访问。

3.krpano

• 利用 krpano 工具直接生成 HTML 全景图，其优势在于提供了更多功能，如热点等。
• 与 photo-sphere-viewer 不同，krpano 生成了一堆文件，需要在不同文件夹下进行控制，因此只能通过不同全景图文件夹名来控制访问。【这里访问同样是使用web-view】
• 在真机调试的时候，还需要注意一些问题，首先是业务域名的配置。其次是krpano生成的全景图访问的时候会去加载配置（即外部域名），导致无法访问的情况，需要在webvr.xml中去掉webvr.loadsettings()这个方法，最终才算能在真机上进行访问。

【代码实现】

<template>
  <view>
    <web-view :src="path" style="width: 100vw; height: 100vh;"></web-view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
	const path = ref('')
	onLoad((options) => {
		localHtmlPath.value = `xxx/${options.path}/tour.html`
	})
</script>