vue3使用panolens实现360全景图片预览

最新推荐文章于 2024-04-03 09:40:37 发布

codekkx

最新推荐文章于 2024-04-03 09:40:37 发布

阅读量718

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_47035970/article/details/129201917

版权

panolens.js + three.js 实现全景图片预览

index.html 中引入 three.min.js 和 panolens.min.js
注意先后顺序，先引入three，three版本必须是 0.105.2

<head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    
    <!-- 注意先后顺序，先引入three，three版本必须是 0.105.2 -->
    <script src="./js/three.min.js"></script>
    <script src="./js/panolens.min.js"></script>
</head>

初始化容器和部分设置

<template>
  <div id="panolens"  style="height: 70vh"></div>
</template>
<script setup>
import { reactive, onMounted } from "vue";
const data = reactive({
  viewer: null,
  panorama: null,
});
const init = () => {
  data.viewer = new PANOLENS.Viewer({
     container: document.querySelector("#container"),
     controlButtons: ["fullscreen", "setting", "video"],
     autoRotate: true, //自动播放
     autoRotateActivationDuration: 2000, //时长
     autoRotateSpeed: 0.3, //速度
  });
  data.panorama = new PANOLENS.ImagePanorama("xxxxxx.jpg");//图片地址要是线上地址 注意配置跨域
  data.viewer.add(data.panorama);
};
onMounted(() => {
  init();
});
</script>