<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="./css/view.min.css">
<link rel="stylesheet" href="./css/base.css">
<script src="./js/zepto_1.1.3.js"></script>
<title>实现全景图预览</title>
</head>
<body>
<div class="playBtn"></div>
<audio src="./js/szovo.mp3" id="audios" style="position: absolute;left: 99999999999999px;top: 999999999px;" loop="true"></audio>
<div id="photosphere"></div>
<script src="./js/three.js"></script>
<script src="./js/D.min.js"></script>
<script src="./js/uEvent.js"></script>
<script src="./js/doT.js"></script>
<script src="./js/CanvasRenderer.js"></script>
<script src="./js/Projector.js"></script>
<script src="./js/DeviceOrientationControls.js"></script>
<script src="./js/view.min.js"></script>
<div class="szovo">
<svg version="1.1" id="dc-spinner" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width: "38"="" height: "38"="" viewBox="0 0 38 38" preserveAspectRatio="xMinYMin meet">
<text x="14" y="21" font-family="Monaco" font-size="2px" style="letter-spacing:0.6" fill="#99cc33">LOADING
<animate attributeName="opacity" values="0;1;0" dur="1.8s" repeatCount="indefinite"></animate>
</text>
<path fill="#373a42" d="M20,35c-8.271,0-15-6.729-15-15S11.729,5,20,5s15,6.729,15,15S28.271,35,20,35z M20,5.203
C11.841,5.203,5.203,11.841,5.203,20c0,8.159,6.638,14.797,14.797,14.797S34.797,28.159,34.797,20
C34.797,11.841,28.159,5.203,20,5.203z">
</path>
<path fill="#373a42" d="M20,33.125c-7.237,0-13.125-5.888-13.125-13.125S12.763,6.875,20,6.875S33.125,12.763,33.125,20
S27.237,33.125,20,33.125z M20,7.078C12.875,7.078,7.078,12.875,7.078,20c0,7.125,5.797,12.922,12.922,12.922
S32.922,27.125,32.922,20C32.922,12.875,27.125,7.078,20,7.078z">
</path>
<path fill="#2AA198" stroke="#2AA198" stroke-width="0.6027" stroke-miterlimit="10" d="M5.203,20
c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z" transform="rotate(7.50829 20 20)">
<animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" calcMode="spline" keySplines="0.4, 0, 0.2, 1" keyTimes="0;1" dur="2s" repeatCount="indefinite"></animateTransform>
</path>
<path fill="#859900" stroke="#859900" stroke-width="0.2027" stroke-miterlimit="10" d="M7.078,20
c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203
C12.875,32.922,7.078,27.125,7.078,20z" transform="rotate(276.329 20 20)">
<animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1.8s" repeatCount="indefinite"></animateTransform>
</path>
</svg>
</div>
<script>
$(function(){
var panos = [{
url: './img/1.jpg',
desc: '全景主页',
target: {
longitude: 3.848,
latitude: -0.244
}
}, {
url: './img/2.jpg',
desc: '全景详情',
target: {
longitude: 0,
latitude: 0
}
}];
var isCahe = true;
var PSV = new PhotoSphereViewer({
container: 'photosphere',
panorama: panos[0].url,
caption: panos[0].desc,
time_anim: false,
default_long: Math.PI / 2,
loading_img: '',
loading_txt: '',
cache_texture:10,
navbar: [
'autorotate', 'zoom', 'markers',
'spacer-1',
'caption', 'gyroscope', 'fullscreen'
],
anim_speed: "0.6rpm",
markers: (function() {
return common();
}())
});
PSV.on('ready',function(){
PSV.toggleAutorotate();
$('#audios')[0].play();
$('.szovo').hide();
$('.playBtn').show();
});
PSV.on('select-marker', function(marker) {
console.log(marker);
if(marker.data && marker.data.deletable) {
if(isCahe){
$('.szovo').show();
isCahe = false;
}
PSV.clearMarkers();
PSV.setPanorama(panos[1].url, panos[1].target, true)
.then(function() {
$('.szovo').hide();
PSV.setCaption(panos[1].desc);
var len = common2().length;
for(var k = 0; k < len; k++) {
PSV.addMarker(common2()[k]);
}
PSV.setCaption(panos[1].desc);
});
}
if(marker.data && marker.data.deletables) {
if(isCahe){
$('.szovo').show();
isCahe = false;
}
PSV.clearMarkers();
PSV.setPanorama(panos[0].url, panos[0].target, true)
.then(function() {
$('.szovo').hide();
PSV.setCaption(panos[1].desc);
var len = common().length;
for(var k = 0; k < len; k++) {
PSV.addMarker(common()[k]);
}
PSV.setCaption(panos[0].desc);
});
}
});
$('.playBtn').click(function() {
if($(this).hasClass('pause')) {
$(this).removeClass('pause')
$('#audios')[0].play()
} else {
$(this).addClass('pause')
$('#audios')[0].pause()
}
});
function common() {
var a = [];
a.push({
id: '#0',
tooltip: '另一个房间',
latitude: -0.4,
longitude: -1.80,
image: './img/pin2.png',
width: 64,
height: 64,
anchor: 'bottom center',
data: {
deletable: true
}
});
a.push({
id: 'text',
longitude: -0.5,
latitude: -0.28,
html: '床头柜',
anchor: 'bottom right',
style: {
maxWidth: '320px',
color: '#fff',
fontSize: '20px',
fontFamily: 'Helvetica, sans-serif',
textAlign: 'center'
},
tooltip: {
content: '这里可以放注释',
position: 'right'
}
});
a.push({
id: 'circle',
tooltip: '这是坐窗的坐垫',
circle: 20,
svgStyle: {
fill: 'rgba(255,255,0,0.3)',
stroke: 'yellow',
strokeWidth: '2px'
},
// longitude: 0.14842681258549928,
// latitude: -0.8678522571819425,
x: 8395,
y: 6827,
anchor: 'center right'
});
return a
}
function common2() {
var a = [];
a.push({
id: '#1',
tooltip: '第一个房间',
latitude: -0.5,
longitude: -2.00,
image: './img/pin2.png',
width: 64,
height: 64,
anchor: 'bottom center',
data: {
deletables: true
}
});
a.push({
id: 'text',
longitude: -0.5,
latitude: -0.28,
html: '挂壁电视',
anchor: 'bottom right',
style: {
maxWidth: '320px',
color: '#fff',
fontSize: '20px',
fontFamily: 'Helvetica, sans-serif',
textAlign: 'center'
},
tooltip: {
content: '可以休闲看电视',
position: 'right'
}
});
a.push({
id: 'circle',
tooltip: '这是一个床头桌',
circle: 10,
svgStyle: {
fill: 'rgba(255,255,0,0.3)',
stroke: '#4693e2',
strokeWidth: '1px'
},
longitude: 1.666216355886427,
latitude:-0.24621449385904493,
anchor: 'center right'
});
return a
}
function transToThreeCoord(x, y) {
let mouse = new THREE.Vector3();
mouse.x = (x / 14620) * 2 - 1;
mouse.y = -(y / 7310) * 2 + 1;
return mouse;
}
/**
* 当用户点击某个地方时,创建一个新的标记,获取经纬度
*/
PSV.on('click', function (e) {
// PSV.addMarker({
// id: '#' + Math.random(),
// longitude: e.longitude,
// latitude: e.latitude,
// image: 'http://photo-sphere-viewer.js.org/assets/pin-red.png',
// width: 32,
// height: 32,
// anchor: 'bottom center',
// tooltip: 'Generated pin',
// data: {
// generated: true
// }
// });
console.log(e.longitude,e.latitude)
});
})
</script>
</body>
</html>
three.js+photo-sphere-viewer.js 全景场景切换,全景家居,全景图效果预览



在IT领域,尤其是在Web开发中,创建沉浸式3D体验是一项常见的挑战。"three.js"是一个流行的JavaScript库,专门用于在浏览器中进行3D图形渲染,而"photo-sphere-viewer.js"则是一个与three.js结合使用的插件,用于展示全景图像和场景。下面将详细解释这两个技术以及如何在实际项目中应用它们。 `three.js` 是一个强大的3D图形库,它利用WebGL API来在浏览器中呈现复杂的三维模型和场景。WebGL是一种JavaScript接口,允许在浏览器中进行硬件加速的3D图形渲染,无需任何插件。three.js通过提供简洁的API,降低了WebGL的使用门槛,使得开发者能够轻松创建交互式的3D内容。 在全景图方面,`photo-sphere-viewer.js` 是一个专为three.js设计的插件,它简化了全景图的显示和交互。这个插件可以处理360度全景图像,提供平滑的滚动、缩放和旋转功能,使用户能够自由地探索虚拟环境。此外,photo-sphere-viewer.js还支持添加标记和热点,这些元素可以在全景图上点击或触摸,以触发特定的事件,如跳转到其他全景场景。 在"全景场景切换,全景家居,全景图效果预览"的项目中,开发者可能会使用three.js创建不同的3D场景,每个场景代表一个家居空间的不同部分,如客厅、卧室或厨房。photo-sphere-viewer.js可以帮助在这些场景间平滑过渡,提供一种类似虚拟漫游的体验。用户可以通过点击标记或者按照预设路径导航,无缝地从一个全景场景切换到另一个。 项目中的`index.htm`是主HTML文件,可能包含了必要的HTML结构和脚本引用,以加载和运行three.js及photo-sphere-viewer.js。`js`目录可能包含自定义的JavaScript代码,用于配置和控制全景图的显示,例如设置初始视角、加载全景图、定义场景和对象,以及处理用户交互。`css`目录中的样式表文件可能用于调整界面布局和视觉效果。`img`目录通常存储全景图和其他图像资源。 实现这样的功能需要对three.js和photo-sphere-viewer.js有深入的理解,包括3D坐标系统、光照、材质、纹理以及事件监听等概念。开发者还需要掌握基本的HTML、CSS和JavaScript知识,以便将这些元素整合到网页中。通过熟练运用这些技术,可以创造出引人入胜的在线全景体验,适用于房地产展示、旅游景点介绍、产品展示等多种应用场景。











































- 1

- 粉丝: 2
- 资源: 2
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源
- STM32指纹考勤机源码集成:录入管理、指纹开锁、报警提示、实时考勤及APP远程控制功能,STM32指纹考勤机源码集成:录入管理、指纹开锁、报警提示、实时考勤及APP远程控制功能,stm32指纹考勤机
- (源码)基于C语言嵌入式系统的PPP和LwIP集成实现.zip
- 基于Java和Shell语言的2025寒训医生端后端设计源码
- 基于TypeScript语言的舜和酒店设计源码示例
- 基于Go语言的通达信通信协议设计源码
- 基于文献的10kW虚拟同步发电机VSG预同步并网控制策略matlab仿真研究:电压电流双闭环与PLL实现无过冲并网,基于Matlab仿真的10kW虚拟同步发电机VSG预同步并网控制策略研究与实现,10
- (源码)基于ROS 2的CyberDog机器人系统.zip
- 自抗扰技术与永磁同步电机矢量控制之完美融合,基于自抗扰技术的永磁同步电机矢量精准控制策略,基于自抗扰(ADRC)的永磁同步电机矢量控制 ,基于自抗扰(ADRC)的永磁同步电机; 矢量控制; 电机控制
- 基于Vue框架的漫画系统前端设计源码
- (源码)基于Vite框架的书签工具生成插件项目-vitepluginbookmarklet.zip
- 基于SpringBoot和Vue.js的校园流浪宠物救助小程序设计源码
- (源码)基于STM32F4系列微控制器的嵌入式系统项目.zip
- 大型锂电池生产项目:三菱Q06UDV PLC与威纶通触摸屏程序的深度集成应用与实践教学范例,《三菱Q06UDV锂电池项目:大型PLC与触摸屏程序集成解决方案》,锂电池项目三菱Q06UDV,威纶通触摸屏
- 基于鸿蒙操作系统组件的线上发型师管理系统源码
- (源码)基于Arduino和RTC模块的季节性灯光控制器.zip
- FPGA图像处理技术:从算法到实践-MATLAB算法、Modelsim仿真及两大工程实践解析,FPGA图像处理技术中的算法探索与工程实践:matlab算法与模型仿真并行实施研究,FPGA图像处理,



- 1
- 2
前往页