草庐IT

前端-全景图-VR

云高风轻 2023-03-28 原文

1. 前言

  1. 最近有人问到这个前端实现这个vr看房,看车这种的需求,如何实现
  2. 实现的方案大致有2种,一种是通过某些工具来制作vr/全景图的网页,只要准备好图片就行,其他的都是自动配置,自动生成,然后把生产的网页放到服务器,前端请求获取这个网页的链接,然后显示,小程序用webView的src属性接收就行,其他的vue啥的也都更简单;
  3. 工具可用krpano 生产全景图,3d图,还有其他很多好用的工具,欢迎留言,大家分享
  4. 另外一种方式就是用第三方的库比如photo-sphere-viewer ,three.js

2. photo-sphere-viewer

1.这里使用photo-sphere-viewer 来讲解,全景图/VR效果

3. 传统方式

  1. 就是直接写个html的方式,来说明
  2. 因为用起来是在简单
<head>
    <meta charset="utf-8">
    <title>全景图</title>
    <style>
        #viewer {
            width: 100vw;
            height: 100vh;
        }
    </style>
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css" />
</head>
<body>
    <div id="viewer"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js"></script>
<script>
    var viewer = new PhotoSphereViewer.Viewer({
        container: document.querySelector('#viewer'),
      // 图片地址
        panorama: './img/A.jpg'
    });
</script>

4. 效果

  1. 效果演示
    演示.gif
  2. 因为上传的图片不能超过10M,所以这个录屏的时候 把这个宽高改下了
  3. 最后的白屏是因为点击了右下角的全屏,录屏软件录不上去,所以白屏了
  4. 更多功能自己可以研究哦photo-sphere-viewer 来讲解,全景图/VR效果
  5. 演示的这个全景图,如有侵权,请告知,我会删除
  6. 代码不多吧,所以就用起来吧

5. vue中使用 环境准备

  1. 小程序 react uniApp当然都可以使用
  2. 安装依赖
npm install photo-sphere-viewe --save
  1. 我这里是 "photo-sphere-viewer": "^4.6.4",版本

6. 页面使用

  1. 这里使用了setup语法糖
  2. panorama用来配置全景图的地址
  3. 地址不能直接赋值,下面是错误的写法
panorama:''../assets/al.jpg"
  1. 注意 初始化要写在mounted里面,不要写在created里面
<template>
    <div id="viewer"></div>
</template>

<script setup>
import * as PhotoSphereViewer from 'photo-sphere-viewer'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
import { onMounted, ref } from "vue"

let vrImg = ref()
vrImg = require('../assets/al.jpg')
onMounted(() => {
    initViewer()
})
const initViewer = () => {
    //全景图展示
    var viewer = new PhotoSphereViewer.Viewer({
        container: document.querySelector('#viewer'),
        panorama: vrImg
    });
}
</script>

7. 后记

  1. 这个只是最简单的使用,指明一个前端搞vr,全景图的技术路线而已
  2. 更多的配置自己研究,后续有空我也会在看看,欢迎交流

参考资料

photo-sphere-viewer
three.js

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;如有错误,欢迎交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
VR前端codeblockquoteviewer

有关前端-全景图-VR的更多相关文章

  1. ruby-on-rails - 在 Rails 应用程序的前端获取实时日志 - 2

    在Rails3.x应用程序中，我正在使用net::ssh并向远程pc运行一些命令。我想向用户的浏览器显示实时日志。比如，如果两个命令在net中运行::ssh执行即echo"Hello",echo"Bye"被传递然后"Hello"应该在执行后立即显示在浏览器中。这是代码我在ruby​​onrails应用程序中使用ssh连接和运行命令Net::SSH.start(@servers['local'],@machine_name,:password=>@machine_pwd,:timeout=>30)do|ssh|ssh.open_channeldo|channel|channel.requ

  2. ruby - 如何在转换器插件中访问页面属性(YAML 前端) - 2

    我正在为Jekyll编写一个转换器插件，需要访问一些页眉(YAML前端)属性。只有内容被传递给主要的转换器方法，似乎无法访问上下文。例子:moduleJekyllclassUpcaseConverter关于如何在转换器插件中访问页眉数据有什么想法吗？ 最佳答案 基于Jekyll源代码，无法在转换器中检索YAML前端内容。根据您的情况，我看到了两种可行的解决方案。您的文件扩展名可以具有足够的描述性，以提供您本应包含在前言中的信息。看起来Converter插件的设计就是这么基本的。如果修改Jekyll是一个选项，您可以更改Convert

  3. threejs 720/360全景工具开发心得 - 2

    前言最近做了一个720全景工具，有很多开发人员觉得全景图很简单，github上也有很多全景图的源码，但当实际使用的时候会发现有很多坑，还达不到真正意义上的商用级别，下面我会把我们开发这个项目遇到的一些坑和解决方案都梳理处理，已经发布到线上https://720.h5ds.com/工具简介：H5-720全景（简称H5-720）是一款基于threejs+h5的全景图制作工具，用户可上传全景图片制作全景图，H5-720可以预设按钮，添加元素，添加热点，添加特效，添加多种交互方式，一键开启重力感应，VR眼镜支持，PC端制作后可以适配多端查看。什么是全景图？在这之前，简单的介绍下全景图，可以360度无死

  4. 前端实现文件上传（点击+拖拽） - 2

    一、简介之前在Vue项目中使用过element的上传组件，实现了点击上传+拖拽上传的两种上传功能。然后我就在想是否可以通过原生的html+js来实现文件的点击上传和拖拽上传，说干就干。首先是点击获取上传文件自然没的说，只需要借助input标签即可，但原生的点击上传按钮，实在是过于简陋，所以我的想法是通过一个div，模拟成上传按钮，然后监听其点击事件，通过input.click()去模拟点击真正的上传元素。然后是拖拽获取上传文件，这个稍有难度，我的想法是通过HTML5新增的drag拖放API+dataTransfer来实现文件的拖拽获取，但是由于是html5新增的，所以可能在某些低版本IE浏览器

  5. 视频融合技术解决方案，三维全景拼接赋能平台 - 2

    近年来，随着信息化时代的到来，三维全景拼接以视频监控领域为代表的智能硬件公司迅速崛起，随后全国各地在视频监控领域进行了大量的建设。但随着摄像头数量的增加，视频监控画面离散、庞杂、关联性差等诸多问题日渐凸显。如何优化现有视频技术，助力管理者或使用者有效、直观、准确地掌控现场实时动态，成为我国信息化前行路上面临的新课题。视频融合技术平台解决方案北京智汇云舟科技有限公司成立于2012年，专注于创新性的“视频孪生（实时实景数字孪生）”技术研发与应用。公司依托自研三维地理信息引擎（3DGIS），融合建筑信息模型（BIM）、视频监控（Video）、人工智能（AI）及物联网（IOT）等多种技术，并在此基础上

  6. 教你如何使用vercel服务免费部署前端项目和serverless api - 2

    一、介绍一下vercelvercel是一个站点托管平台，提供CDN加速，同类的平台有Netlify和GithubPages，相比之下，vercel国内的访问速度更快，并且提供Production环境和development环境，对于项目开发非常的有用的，并且支持持续集成，一次push或者一次PR会自动化构建发布，发布在development环境，都会生成不一样的链接可供预览。但是vercel只是针对个人用户免费，teams是收费的首先vercel零配置部署，第二访问速度比github-page好很多，并且构建很快，还是免费使用的，对于部署个人前端项目路、接口服务非常方便vercel类似于git

  7. 前端基于DOM或者Canvas实现页面水印 - 2

    🐱个人主页：不叫猫先生🙋‍♂️作者简介：前端领域新星创作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！💫系列专栏：vue3从入门到精通、TypeScript从入门到实践📢资料领取：前端进阶资料以及文中源码可以找我免费领取🔥前端学习交流：博主建立了一个前端交流群，汇集了各路大神，一起交流学习，期待你的加入！(文末有我wx或者私信)目录前言一、vue自定义指令directive讲解二、基于DOM的实现方式1.思路整理2.新建index.vue3.新建`directives`文件4.在`directives`文件下创建`index.ts`文件5.在`main.ts`中全局引

  8. 「前端代码简洁之路」后台系统之详情页设计 - 2

    一、乱花迷人眼我就是被迷的那双眼。有时候需求来了，用熟悉的套路进行开发，确实很节省时间也能保证功能的稳定，但是这些开发的惯性无形中阻碍了我对技术的探索。我一直想改造详情页，解放重复功能开发的劳动力，但是详情页一眼望都是内容平铺，好像并没有什么可做的代码设计。后来我拨开繁花，发现详情页的组件化不必想的过于复杂，后台系统风格统一即可。因为大部分的详情页面是内容的展示，偶尔会出现少量的操作功能。将风格统一的部分进行组件化处理，操作功能使用回调函数放回当前页面，避免组件里做过多的业务逻辑。看，这不就成了。项目基于React框架开发的，所以代码写法是JSX语法，组件开发使用的hooks函数式组件，UI框

  9. 《EDA前端软件开发工程师面试指南》 - 2

    2023届EDA领域校招总结，完结撒花！！！目录前言一、EDA公司介绍二、项目面试1.自我介绍2.项目深入3.专业经验4.成果和技能5.对面试官有什么问题三、C++面试1、高频考点2、其他知识点3、算法题四、逻辑综合面试1.逻辑综合知识详解2.开源逻辑综合ABC五、简历制作总结前言2022/08/26：本人2023年6月毕业，于2022年7-10月参加秋招，面试总结纯属个人经验，仅供参考面试的是EDA前端软件开发岗位，也会掺杂一些EDA其他流程的面试在面试过程中发现自己准备的很乱，没有一个清晰的思路，现在把自己面试的所有经历和题型整理出来，在这里做一个小的总结，不仅帮助自己整理思路，也给大家做

  10. PICO 4评测：Pancake光学新标杆，VR娱乐VR健身就选它 - 2

    最近一年多时间里，国内消费级VR环境发生了不小的变化，各个品牌纷纷发布VR一体机，给了国内玩家不同于PCVR的新选择，而这一切则源自于PICONeo3的发布。Neo3可以说是打开了国内双6DoFVR一体机市场，在自研光学追踪算法和内容引进上加大投入，实现了用户规模的大幅增长，甚至在加速引领国内VR一体机生态的发展。被字节收购之后，PICO在视频、VR演唱会等影视内容方向发力，扩充VR在游戏之外的玩法，同时也加快了硬件迭代速度。如今PICO4正式亮相，它不仅在硬件方面有不小的改进，同时在VR健身应用场景全面展开布局。带着众多期待，让我们一起来看看PICO4的具体表现吧。硬件参数全新的PICO4带

随机推荐