Vue中实现全景房看图3D

原创

于 2023-09-11 08:02:26 发布 · 430 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #3d #前端 #javascript #ecmascript

本文介绍了如何在Vue项目中利用photo-sphere-viewer库创建3D全景房看图功能。首先，通过安装插件来引入所需组件，然后详细展示了组件的完整代码实现。此外，还提到了视频号的变现策略，如如何插入带货商品链接以及互联网红利的探讨。

示例代码

安装photo-sphere-viewer

yarn add -D photo-sphere-viewer

组件引入插件

import { Viewer } from 'photo-sphere-viewer';
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'; // 引入样式
import MarkersPlugin from 'photo-sphere-viewer/dist/plugins/markers'; // 引入标记

完整组件

<template>
    <div class="PSViewer" ref="psvdbg"  :style="{height:height,width:width}"></div>
  </template>
  
  <script>
  import { Viewer } from 'photo-sphere-viewer';
  import 'photo-sphere-viewer/dist/photo-sphere-viewer.css';
  import MarkersPlugin from 'photo-sphere-viewer/dist/plugins/markers';
  import BaseImg from "./base.jpg";
  export default {
    name: 'quanjing3D',
    props: {
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '700px'
      }
    },
    data() {
      return {
        img: BaseImg
      };
    },
    mounted() {
      this.init();
  &nb

最低0.47元/天解锁文章