VR+看房(Showings)
VR+看房
- 示例
- CSS
- JS
更多有趣示例 尽在 知屋安砖社区
示例
CSS
html,
body {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;
}
JS
const PREFIX = 'https://vrlab-image.ljcdn.com/release/auto3dhd/e61cd08df96ab6a2dce7f8cd2aa83379/images/high_cube/0/df4325d6f15cdf18551f7f88cf4ba44c/';var imageArr = {'up': '0_u.jpg.q_70.jpg','down': '0_d.jpg.q_70.jpg','left': '0_l.jpg.q_70.jpg','right': '0_r.jpg.q_70.jpg','front': '0_f.jpg.q_70.jpg','back': '0_b.jpg.q_70.jpg'
};class VRController {constructor() {this.renderer = null;this.scene = null;this.camera = null;this.vrEvent = null;this.init();this.animate();}init() {// 渲染器this.renderer = new THREE.WebGLRenderer({ antialias: true });this.renderer.setPixelRatio(window.devicePixelRatio);this.renderer.setSize(window.innerWidth, window.innerHeight);// 照相机this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, .1, 1000);// 场景this.scene = new THREE.Scene();document.body.appendChild(this.renderer.domElement);this.setSceneBg();this.vrEvent = new VREvent(this.renderer, this.camera);}setSceneBg() {const urls = [];const posMap = {0: 'right', 1: 'left', 2: 'up', 3: 'down', 4: 'front', 5: 'back'};for (var i = 0; i < 6; i++) {const pos = posMap[i];urls.push(imageArr[pos]);}const textureCube = new THREE.CubeTextureLoader().setPath(PREFIX).load(urls);this.scene.background = textureCube;}animate() {requestAnimationFrame(() => this.animate());// -85 到 85 度之间const lat = Math.max(-85, Math.min(85, this.vrEvent.lat));// degToRad,角度转 PIconst phi = THREE.Math.degToRad(lat);const theta = THREE.Math.degToRad(this.vrEvent.lon);this.camera.lookAt(new THREE.Vector3(1 * Math.cos(phi) * Math.cos(theta),1 * Math.sin(phi),1 * Math.cos(phi) * Math.sin(theta)));this.renderer.render(this.scene, this.camera);}
}class VREvent {constructor(renderer, camera) {this.renderer = renderer;this.camera = camera;this.onPointerDownPointerX = 0;this.onPointerDownPointerY = 0;this.onPointerDownLon = 0;this.onPointerDownLat = 0;this.lon = 0;this.lat = 0;this.onWindowResized = this.onWindowResized.bind(this);this.onDocumentMouseDown = this.onDocumentMouseDown.bind(this);this.onDocumentMouseWheel = this.onDocumentMouseWheel.bind(this);window.addEventListener('resize', this.onWindowResized, false);document.addEventListener('mousedown', this.onDocumentMouseDown, false);document.addEventListener('wheel', this.onDocumentMouseWheel, false);}onWindowResized(event) {this.renderer.setSize(window.innerWidth, window.innerHeight);this.camera.aspect = window.innerWidth / window.innerHeight;this.camera.updateProjectionMatrix();}onDocumentMouseDown(event) {event.preventDefault();this.onPointerDownPointerX = event.clientX;this.onPointerDownPointerY = event.clientY;this.onPointerDownLon = this.lon;this.onPointerDownLat = this.lat;this.onDocumentMouseMove = this.onDocumentMouseMove.bind(this);this.onDocumentMouseUp = this.onDocumentMouseUp.bind(this);document.addEventListener('mousemove', this.onDocumentMouseMove, false);document.addEventListener('mouseup', this.onDocumentMouseUp, false);}onDocumentMouseMove(event) {var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;this.lon -= movementX * 0.1;this.lat += movementY * 0.1;}onDocumentMouseUp(event) {document.removeEventListener('mousemove', this.onDocumentMouseMove, false);document.removeEventListener('mouseup', this.onDocumentMouseUp, false);}onDocumentMouseWheel(event) {var fov = this.camera.fov + event.deltaY * 0.05;this.camera.fov = THREE.Math.clamp(fov, 10, 75);this.camera.updateProjectionMatrix();}
}
new VRController()
VR+看房(Showings)相关推荐
- 微信小程序---实现VR看房效果
1.前言 客户需求需要实现VR看房功能.使用技术为微信小程序+spring boot. 2.工具 ① 下载PtGui绘制全景图工具:https://www.jb51.net/softs/743790. ...
- 接触webGl(three.js)之全景(VR)看房的实现旅程总结
文章目录 前言 实现全景(VR)看房的方式 一.纯Three.js方式 1.安装包 2.实现的业务代码 3.实现演示 二. 使用photo-sphere-viewer 1.安装包 2.实现的业务代码 ...
- VR看房:全景图和移动切换的实现
VR看房 导读 前段时间一直在做 VR看房的全景图漫游,其中包括有一些难点,也有一些学习心得,今天在此做个总结,一来是复习,二来是在此记录下学习的过程,有些bug还未调好,在此先附上链接,看一下效果. ...
- VR看房火热背后,简单谈谈拍摄VR全景图片——普及贴
VR看房是云看房的标配,今年恒大的恒房通,一个月成交的房子合同超过了500亿元! 九商VR全景支持视频.音频.三维产品等全景互动功能,还可在微信.微博.网站.小程序等平实现高质量的全景展示和分享,并已 ...
- Vue使用photo-sphere-viewer360°×180°全景插件模拟VR看房、房间切换和自定义标注
Vue使用photo-sphere-viewer360°×180°全景插件模拟VR看房.房间切换和自定义标注 photo-sphere-viewer 下载插件 使用 常用参数 Markers插件 使用 ...
- THREE.JS实现看房自由(VR看房)
VR看房 一.前言 二.基础知识 三.场景 3.1 网络模型 3.2 光照 3.2.1 环境光 3.2.2 平行光 3.2.3 点光源 3.2.4 聚光灯 3.2.5 半球光 四.相机 4.1 正交相 ...
- 什么是VR看房,VR看房的优势?
其实VR看房不是一个新概念,而是早就已经实现的一项技术.简单来说,VR看房是通过VR与全景展示技术让用户在线上全方位了解房屋的户型和内部细节,带给用户身临其境的虚拟体验. VR看房是如何制作的? 目前 ...
- vr全景视频如何制作? vr看房有什么好处!
说到vr,在很早以前就已经拥有了这些技术.只是那时候只应用到娱乐场所中,因为这些技术能让人有一股身临其境的感觉.所以人们用vr全景技术能短暂避免一些烦恼从而获取幸福.随着科技越来越发达,vr全景已经不 ...
- 中小中介公司,如何应对链家推出的贝壳找房那种VR看房模式
链家推出「贝壳找房」已有一段时间,其对市场和同业的影响力正在不断发酵.据了解,对于VR看房,链家是耗费2年并投入2个亿来做了这件事,他们从硬件到技术再到内容,全部是自己团队包办的.而对于我们国内的普通 ...
最新文章
- 25个经典的Spring面试问答
- 服务器修改虚拟机地址,服务器修改虚拟机地址
- 数字类 default 0和 default 0_数字化转型从0到N,只需这三步
- 支持向量机(SVM)复习总结
- oracle重启 日志_超详细的数据库主机及数据库日志收集总结
- UVa10006 Carmichael Numbers【素数判定+快速模幂】
- ios经验6:提交APP上架流程
- QT视频教程系列:QuickTester概述
- UEFI中的Protocol
- linux下测硬盘读写速率,linux下测试硬盘读写速度 互联网技术圈 互联网技术圈
- idea类和方法注释模板配置
- arcgis字段计算器python最大余数法计算面积百分比
- 数字资产期权新手入门手册 | TokenInsight
- 网易邮箱接收ibm的邮件_在IBM Integration Bus中发送和接收带有大型附件的SOAP消息
- A股动量策略有效性验证
- android自动对焦第一次对焦,Android自定义相机实现自动对焦和手动对焦
- 以STM32F103RCT6为例分析单片机的RAM以及ROM使用情况
- 『TensorFlow』模型载入方法汇总
- snmp v3 参数_SNMP V3的配置指南
- YML是一种数据存储格式