view360 使用教程 vue3

view360 使用教程 vue3

地址
other
https://photo-sphere-viewer.js.org/
https://pchen66.github.io/Panolens/

安装

npm install @egjs/vue3-view360@next

使用，如在 VR.vue 文件种

<template>
  <div id="view360" ref="view360">
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import View360, { EquirectProjection } from '@egjs/view360'

const view360 = ref<HTMLElement | null>(null)

onMounted(async () => {
  const viewer = new View360(view360.value!, {
    projection: new EquirectProjection({
      src: '/src/assets/quanjing.jpg',
    }),
    autoplay: true, // 启用自动播放
    zoom: true, // 启用缩放
    disableContextMenu: true, // 禁用上下文菜单
    fov: 50, // 视角
    initialPitch: -20, // 初始俯仰角度
    tabIndex: 1, // 可聚焦元素的tabindex属性值
    zoomRange: { max: 2, min: 0.5 }, // 缩放范围
    initialZoom: 0.5, // 初始缩放比例
    rotate: true, // 启用旋转
    // yawRange: { max: 360, min: -360 }, // 旋转范围
    // pitchRange: { max: 5, min: -5 }, // 俯仰范围
  })

  console.log(viewer)
})
</script>

<style scoped>
#view360 {
  width: 100vw;
  height: 100vh;
}

canvas {
  width: 100%;
  height: 100%;
}

canvas:focus-visible {
  outline: none !important;
}
</style>

热点

<template>
  <div class="view360-container is-16by9" id="view360" ref="view360">
    <canvas class="view360-canvas" ref="canvas"></canvas>
    <!-- Hotspot container -->
    <div class="view360-hotspots">
      <!-- Hotspots -->
      <div class="view360-hotspot Hotspot01" data-yaw="0" data-pitch="0" @click="handleClick">
        1
      </div>
      <!-- You can use either Yaw(Y-axis rotation), Pitch(X-axis rotation) for hotspot position -->
      <div class="view360-hotspot Hotspot01" data-yaw="-90" data-pitch="0">2</div>
      <!-- You can also use direct 3D coordinates. -->
      <div class="view360-hotspot Hotspot01" data-position="0 1 0">3</div>
      <!-- View 360 only places the hotspot in the appropriate location. -->
      <!-- You can decorate your hotspots however you want! -->
      <div class="view360-hotspot Hotspot01" data-yaw="-90" data-pitch="-90">
        <div>It doesn't matter what content you put inside the hotspot or what size you have.</div>
        <img src="/src/assets/logo.svg" alt="Of course, you can display images." />
      </div>
    </div>
  </div>
  <!-- <div class="Hotspot01"></div> -->
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import View360, {
  EquirectProjection,
  CubestripProjection,
  EquiangularProjection,
} from '@egjs/view360'
import '@egjs/view360/css/view360.min.css'

const view360 = ref<HTMLElement | null>(null)
const viewer = ref()

onMounted(async () => {
  viewer.value = new View360(view360.value!, {
    projection: new EquiangularProjection({
      src: '/src/assets/quanjing.jpg',
    }),
    autoplay: true, // 启用自动播放
    zoom: true, // 启用缩放
    tabIndex: 5,
    hotspot: {
      zoom: true,
    },
  })

  console.log(viewer)
})

const handleClick = () => {
  console.log('click', viewer.value)

  // viewer.value.projection = new EquirectProjection({
  //   src: '/src/assets/quanjing5.jpg',
  // })

  viewer.value.load(
    new EquirectProjection({
      src: '/src/assets/quanjing5.jpg',
      video: false,
    }),
  )

  // viewer.value.
}
</script>

<style scoped>
.view360-container {
  width: 100vw;
  height: 100vh;
  padding: 0 !important;
}

.view360-canvas {
  padding: 0 !important;
}

.view360-canvas:focus-visible {
  outline: none !important;
}

.Hotspot01 {
  width: 50px;
  height: 50px;
  background-color: brown;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: width 0.3s ease-in-out;
  transition: height 0.3s ease-in-out;
}

.Hotspot01:hover {
  width: 70px;
  height: 70px;
  background-color: brown;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>