使用krpano新写vr页面

src/components/krpanoImg/index.scss

@@ -24,6 +24,8 @@
         pointer-events: none;
         > img {
             width: 100%;
+			object-fit: cover;
+			position: absolute;
         }
     }
     .krpano-img-after {

src/components/krpanoImg/panoramic.xml

@@ -1,6 +1,6 @@
 <krpano version="1.20.9" title="Virtual Tour">
 
-	<include url="%VIEWER%/skin/vtourskin.xml" />
+	<!-- <include url="%VIEWER%/skin/vtourskin.xml" /> -->
 
 	<skin_settings maps="false"
 	               maps_type="google"
@@ -102,18 +102,55 @@
 
 		<control bouncinglimits="calc:image.cube ? true : false" />
 
-		<view hlookat="50.082" vlookat="12.404" fovtype="MFOV" fov="120.000" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
+		<view hlookat="50.082" vlookat="12.404" fovtype="MFOV" fov="90.000" maxpixelzoom="2.0" fovmin="70" fovmax="120" limitview="auto" />
 
 		<preview url="https://elab-marketing-web.oss-cn-shanghai.aliyuncs.com/fairyMountain/layout/hospital/panos/ceshi.tiles/preview.jpg" />
 
 		<image if="!(webvr.isenabled OR device.mobilevr)">
-			<cube url="https://elab-marketing-web.oss-cn-shanghai.aliyuncs.com/fairyMountain/layout/hospital/panos/ceshi.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg" multires="512,1024,2048" />
+			<!-- <cube url="https://elab-marketing-web.oss-cn-shanghai.aliyuncs.com/fairyMountain/layout/hospital/panos/ceshi.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg" multires="512,1024,2048" /> -->
+			<sphere url="https://elab-marketing-web.oss-accelerate.aliyuncs.com/aiBeauty/1702533120761.png" />
 		</image>
 
 		<image if="webvr.isenabled OR device.mobilevr">
-			<cube url="https://elab-marketing-web.oss-cn-shanghai.aliyuncs.com/fairyMountain/layout/hospital/panos/ceshi.tiles/vr/pano_%s.jpg" />
+			<!-- <cube url="https://elab-marketing-web.oss-cn-shanghai.aliyuncs.com/fairyMountain/layout/hospital/panos/ceshi.tiles/vr/pano_%s.jpg" /> -->
+			<sphere url="https://elab-marketing-web.oss-accelerate.aliyuncs.com/aiBeauty/1702533120761.png" />
 		</image>
-
+		<!--火车站-->
+		<!-- <hotspot name="spot2" url="skin/plugin.png" distorted="true" keep="false" ath="145.763" atv="22" visible="true"></hotspot>
+		<plugin  parent="hotspot[spot2]" name="hottiyan_2" type="container"  width="40" bgalpha="0.0" bgcapture="true" >
+			<layer  name="title2_hottiyan" style="text" align="bottom" x="0" y="75" width="100%" html="火车站" css="text-align:center; color:#5D7B53; font-family:Arial; font-weight:400; font-size:17px;border: 0px solid #fff;border-radius:10px;padding: 10px 5px; box-sizing: border-box;background: rgba(255, 255, 255, 0.2);border-radius: 10px;backdrop-filter: blur(50px);">
+			</layer>
+			<layer  name="title2_line1_hottiyan" style="text" align="top center" x="0" y="-80" height="80px" css="background-color:#fff;width:1px;height:80px"  />
+			<layer  name="title2_line2_hottiyan" style="text" align="top center" x="0" y="0" css="background-color:#fff;width:6px;height:6px;border-radius:50%;"  />
+		</plugin> -->
+		<!-- <preview url="test3333.png"/> -->
+		<hotspot name="video"
+				ath="145.763" atv="22"
+		        url="https://dm.static.elab-plus.com/videoplayer.js"
+		        videourl="https://dm.static.elab-plus.com/miniProgram/green.mp4"
+		        chromakey="0x238E54|0.294|0.133"
+		        loop="true"
+		        distorted="true"
+		        zoom="true"
+		        scale="0.3"
+		        ondown="draghotspot();"
+		        onclick="togglepause();"
+		        cursor="grab"
+				ondown.addevent="set(cursor,grabbing);"
+				onup.addevent="set(cursor,grab);"
+		        
+		/>
+		<action name="draghotspot">
+			spheretoscreen(ath, atv, hotspotcenterx, hotspotcentery, calc(mouse.stagex LT stagewidth/2 ? 'l' : 'r'));
+			sub(drag_adjustx, mouse.stagex, hotspotcenterx);
+			sub(drag_adjusty, mouse.stagey, hotspotcentery);
+			asyncloop(pressed,
+				sub(dx, mouse.stagex, drag_adjustx);
+				sub(dy, mouse.stagey, drag_adjusty);
+				screentosphere(dx, dy, ath, atv);
+		
+			  );
+		</action>
 	</scene>
 
 

src/components/panoramic/index.scss

@@ -1,4 +1,5 @@
 .panoramic-components {
+	position: relative;
     font-size: 12px;
     .refresh-btn {
         position: fixed;
@@ -13,7 +14,7 @@
         }
     }
     .krpano-img-before {
-        position: fixed;
+        position: absolute;
         top: 0;
         left: 0;
         z-index: 1;
@@ -26,7 +27,7 @@
             width: 100%;
         }
     }
-    .krpano-img-after {
+    .hide {
         opacity: 0;
     }
     .play-img {
@@ -53,7 +54,7 @@
         transform: scale(1);
     }
     .prompt-720-img {
-        position: fixed;
+        position: absolute;
         z-index: 10;
         top: 0;
         bottom: 0;
@@ -108,7 +109,7 @@
         }
     }
     #panoramic-krpano {
-        position: fixed;
+        position: relative;
         left: 0;
         right: 0;
         top: 0;

src/components/krpanoVideo/index.vue

@@ -0,0 +1,203 @@
+<template>
+    <!-- @touchstart="touchstartFunc" -->
+    <div class="panoramic-components">
+        <!-- 刷新按钮 -->
+        <!-- <div class="refresh-btn" @click="refreshPage">
+            <img src="https://dm.static.elab-plus.com/refresh-btn.png">
+        </div> -->
+        <!-- 引导用户  触屏图片 -->
+        <div class="prompt-720-img" :class="isTouchstart ? 'img-hide' : ''">
+            <img src="https://dm.static.elab-plus.com/guide-mask.png" />
+        </div>
+        <!-- 封面引导 蒙层图 -->
+        <div class="krpano-img-before" :class="videoBefore ? '' : 'hide'">
+            <img src="https://dm.static.elab-plus.com/hqc-loading.png" />
+        </div>
+        <!-- <div class="play-img" :class="isPlayImg ? 'play-img-show': ''">
+            <img src="https://dm.static.elab-plus.com/hqc-img/play-img.png" />
+        </div> -->
+        <!-- 免责声明 -->
+        <!-- <div class="disclaimer">
+            <a
+                href="https://dm-mng.elab-plus.cn/touFangBao/index.html#/pages/preview?id=3176&templateCode=0&brandId=52&foot=no">本资料仅供宣传参考示意</a>
+        </div> -->
+        <!-- krpano -->
+        <div id="panoramic-krpano" :style="{'height':canvasHeight+'px'}"></div>
+    </div>
+</template>
+
+<script>
+    // import BScroll from 'better-scroll';
+    const panoramicXML = require("./panoramic.xml");
+    export default {
+        data() {
+            return {
+                tabList: [],
+                selectTabIndex: 0,
+                isPayVoice: false,
+                isPromptShow: true,
+                sceneObj: { id: '', name: '' },
+                isTouchstart: false, // 是否触屏一次
+                isShowOneGuideMask: false, //是否显示过一次引导用户出的操作
+                videoBefore: true,//显示引导蒙层图
+            }
+        },
+		props:{
+			videoUrl: {
+				type: String,
+				default: '',
+			},
+			muted: {
+				type: [Boolean,String],
+				default: true,
+			},
+			scale: {
+				type: [Number,String],
+				default: 0.1,
+			},
+		},
+		watch: {
+			videoUrl: {
+				handler(newVal,oldVal) {
+					if (newVal && newVal.length>0) {
+						console.warn("***videoUrl-webgl_rxdz_krpanoVideo***", newVal,oldVal)
+						if(this.panoramicKrpano){
+							// alert("**playSceneName****")
+							console.warn("***playSceneName0***")
+							wx.config({
+								debug: false,
+								appId: '',
+								timestamp: '',
+								nonceStr: '',
+								signature: '',
+								jsApiList: []
+							})
+							wx.ready(()=> {
+								// 在这里面进行操作即可，估计应该是微信的sdk对Safari的内核做了一些对应的操作吧
+								this.panoramicKrpano.call(`playSceneName(${newVal})`);
+							})
+						}
+					}
+				},
+				deep:true,
+			},
+			muted: {
+				handler(newVal,oldVal) {
+					console.warn("***muted-webgl_rxdz_krpanoVideo***", newVal,oldVal)
+					if(this.panoramicKrpano){
+						this.panoramicKrpano.call(`toggleMute(${newVal})`);
+					}
+				},
+				immediate: true,
+			},
+			scale: {
+				handler(newVal,oldVal) {
+					console.warn("***scale-webgl_rxdz_krpanoVideo***", newVal,oldVal)
+					if(this.panoramicKrpano){
+						this.panoramicKrpano.call(`scaleChange(${newVal})`);
+					}
+				},
+				immediate: true,
+			},
+		},
+        methods: {
+            panoramic() {
+				console.warn("***panoramicKrpano***",this.videoUrl)
+                this.panoramicKrpano = document.getElementById('panoramic');
+				if(this.videoUrl){
+					console.warn("***playSceneName1***")
+					// this.panoramicKrpano.call(`playSceneName(${this.videoUrl})`);
+					wx.config({
+						debug: false,
+						appId: '',
+						timestamp: '',
+						nonceStr: '',
+						signature: '',
+						jsApiList: []
+					})
+					wx.ready(()=> {
+						// 在这里面进行操作即可自动播放视频，估计应该是微信的sdk对Safari的内核做了一些对应的操作吧
+						this.panoramicKrpano.call(`playSceneName(${this.videoUrl})`);
+					})
+				}
+                // 设置播放的场景
+				window.sceneload = ()=>{
+					console.warn("***sceneLoad***")
+					this.videoBefore = false;
+				}
+                // 视频加载完
+                window.videoready = () => {
+					console.warn("***videoready***",this.$parent.isIOS,this.isTouchstart)
+                    // 兼容苹果手机， 当视频加载完也算触屏了, 显示引导用户触屏
+					if(this.$parent.isIOS){
+						if (!this.isShowOneGuideMask) {
+						    // 视频加载完
+						    this.isTouchstart = true;
+						}
+					}
+                };
+                // 视频暂停了,自动刷新页面, 并且保存,当前的参数
+                window.videopausedFunc = () => {
+                }
+				document.addEventListener("touchend", ()=> {
+					if(this.isShowOneGuideMask==false){
+						this.isShowOneGuideMask = true;
+						this.isTouchstart = true;
+					}
+					// console.warn("***kpanoraTouch***",this.isTouchstart)
+				})
+				window.getScaleHandle = (scale) => {
+					console.warn("***getScaleHandle***",scale)
+				}
+            },
+            // 切换场景
+            // switchScene(videoUrl) {
+            //     // 视频加载之前, 加载遮住层
+            //     this.videoBefore = true;
+            //     this.panoramicKrpano.call(`playSceneName(${videoUrl})`);
+            // },
+			getScale(){
+				let video = this.panoramicKrpano.get("hotspot[video]");
+				console.warn("***getScale***",video.scale);
+			},
+			getPosition(){
+				let video = this.panoramicKrpano.get("hotspot[video]");
+				console.warn("***getPosition***",video.ath,video.atv);
+			},
+        },
+        mounted() {
+            embedpano({
+                swf: "https://dm.static.elab-plus.com/krpano.swf",
+                xml: panoramicXML,
+                bgcolor: "#fff",
+                target: "panoramic-krpano",
+                passQueryParameters: false,
+                consolelog: true,
+                id: "panoramic",
+                mobilescale: 0.5, //移动设备缩放，1表示不缩放，默认0.5
+                onready: this.panoramic
+            });
+        },
+        created() {
+			console.warn("***this.type***")
+			let screenWidth = window.screen.width;
+			let screenHeight = window.screen.height;
+			if (window.innerWidth && window.screen.width) {
+				screenWidth = Math.min(window.innerWidth, window.screen.width)
+			}
+			if (window.innerHeight && window.screen.height) {
+				screenHeight = Math.min(window.innerHeight, window.screen.height)
+			}
+			this.canvasHeight = screenWidth;
+            // // 监听屏幕大小变化
+            // window.addEventListener('resize', ()=>{
+            // });
+        },
+        beforeDestroy() {
+            // this.panoramicKrpano.call(`closeVoice()`);
+        }
+    }
+</script>
+<style scoped lang="scss">
+    @import "index.scss";
+</style>

src/components/panoramic/index.vue

@@ -24,7 +24,7 @@
         <!-- krpano -->
         <div id="panoramic-krpano"></div>
 
-        <div class="panoramic-tab-content">
+        <!-- <div class="panoramic-tab-content">
             <div class="voice">
                 <div class="sales-head">
                     <img src="https://dm.static.elab-plus.com/image/hqc/img_girl_head.png">
@@ -49,7 +49,7 @@
                 </div>
                 <div class="btn-line"></div>
             </div>
-        </div>
+        </div> -->
     </div>
 </template>
 

src/components/krpanoVideo/panoramic.xml

@@ -0,0 +1,148 @@
+<krpano version="1.20.9" title="Virtual Tour">
+
+	<action name="mytest">
+	  screentosphere(mouse.x, mouse.y, toh, tov);
+	  jscall(calc('console.log("'+toh+'")'));
+	  jscall(calc('console.log("'+tov+'")'));
+	</action>
+	
+	<events
+		onclick="mytest();"
+	/>
+	
+	<!-- startup action - load the first scene -->
+	<action name="startup" autorun="onstart">
+		if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
+		loadscene(get(startscene), null, MERGE);
+		if(startactions !== null, startactions() );
+	</action>
+	<events onloadcomplete="sceneload"></events>
+	<action name="sceneload">
+	    jscall('window.sceneload()');
+	</action>
+	<!-- <events onenterfullscreen=""          切换到全屏显示执行
+	        onexitfullscreen=""           从全屏切换回普通视图时执行
+	        onxmlcomplete=""              XML文件加载完成时执行
+	        onpreviewcomplete=""          预览图加载完成时执行
+	        onloadcomplete=""             全景切片图片加载完毕时执行
+	        onnewpano=""                  当启动新的全景场景时执行
+	        onremovepano=""               当前场景被关闭时执行（加载新场景前）
+	        onnewscene=""                 新场景加载完成时执行
+	        onloaderror=""                加载错误时执行，执行被设置后，屏幕将不显示默认的错误信息
+	        οnkeydοwn=""                  当某个键盘被按下时执行
+	        οnkeyup=""                    当某个键盘松开时执行
+	        οnclick=""                    当鼠标点击全景场景时执行
+	        οnmοusedοwn=""                当鼠标按下时执行
+	        οnmοuseup=""                  当鼠标松开时执行
+	        onmousewheel=""               当鼠标滚轮滚动时执行
+	        onidle=""                     当无用户操作在设定秒数后执行
+	        onviewchange=""               当场景转变时执行（渲染开始时）
+	        onviewchanged=""              当场景转变时执行（渲染完成时）
+	        οnresize=""                   当浏览器大小改变时执行
+	        /> -->
+	<!-- <events onloadcomplete="visible_hotspotGroupA"></events> -->
+	<scene name="mainScene" onstart=""
+		havevrimage.mobilevr="false" 
+		havevrimage.no-mobilevr="true" lat="" lng="" heading="">
+
+		<control bouncinglimits="calc:image.cube ? true : false" />
+
+		<view hlookat="50.082" vlookat="12.404" fovtype="MFOV" fov="90.000" maxpixelzoom="2.0" fovmin="70" fovmax="120" limitview="auto" />
+
+		<preview url="https://elab-marketing-web.oss-cn-shanghai.aliyuncs.com/fairyMountain/layout/hospital/panos/ceshi.tiles/preview.jpg" />
+
+		<image if="!(webvr.isenabled OR device.mobilevr)">
+			<!-- <cube url="https://elab-marketing-web.oss-cn-shanghai.aliyuncs.com/fairyMountain/layout/hospital/panos/ceshi.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg" multires="512,1024,2048" /> -->
+			<sphere url="https://elab-marketing-web.oss-accelerate.aliyuncs.com/aiBeauty/1702533120761.png" />
+		</image>
+
+		<image if="webvr.isenabled OR device.mobilevr">
+			<!-- <cube url="https://elab-marketing-web.oss-cn-shanghai.aliyuncs.com/fairyMountain/layout/hospital/panos/ceshi.tiles/vr/pano_%s.jpg" /> -->
+			<sphere url="https://elab-marketing-web.oss-accelerate.aliyuncs.com/aiBeauty/1702533120761.png" />
+		</image>
+		<!--火车站-->
+		<!-- <hotspot name="spot2" url="skin/plugin.png" distorted="true" keep="false" ath="145.763" atv="22" visible="true"></hotspot>
+		<plugin  parent="hotspot[spot2]" name="hottiyan_2" type="container"  width="40" bgalpha="0.0" bgcapture="true" >
+			<layer  name="title2_hottiyan" style="text" align="bottom" x="0" y="75" width="100%" html="火车站" css="text-align:center; color:#5D7B53; font-family:Arial; font-weight:400; font-size:17px;border: 0px solid #fff;border-radius:10px;padding: 10px 5px; box-sizing: border-box;background: rgba(255, 255, 255, 0.2);border-radius: 10px;backdrop-filter: blur(50px);">
+			</layer>
+			<layer  name="title2_line1_hottiyan" style="text" align="top center" x="0" y="-80" height="80px" css="background-color:#fff;width:1px;height:80px"  />
+			<layer  name="title2_line2_hottiyan" style="text" align="top center" x="0" y="0" css="background-color:#fff;width:6px;height:6px;border-radius:50%;"  />
+		</plugin> -->
+		<!-- <preview url="test3333.png"/> -->
+		<hotspot name="video"
+				ath="50.082" atv="22"
+		        url.html5="https://dm.static.elab-plus.com/videoplayer.js"
+				url.flash="https://dm.static.elab-plus.com/videoplayer.swf"
+		        videourl=""
+				width="90"
+				height="160"
+				borderwidth="1"
+				bordercolor="0xAAAAAA"
+		        chromakey="0x238E54|0.294|0.133"
+				preload="true"
+				pausedonstart="false"
+		        loop="true"
+		        distorted="true"
+				muted="true"
+		        zoom="true"
+				autopause="true"
+				autoresume="true"
+		        scale="1"
+				onvideoready="videoreadyFunc"
+		        ondown="draghotspot();"
+		        onclick="togglepause();"
+		        cursor="grab"
+				ondown.addevent="set(cursor,grabbing);"
+				onup.addevent="set(cursor,grab);"
+		        
+		/>
+		<action name="draghotspot">
+			spheretoscreen(ath, atv, hotspotcenterx, hotspotcentery, calc(mouse.stagex LT stagewidth/2 ? 'l' : 'r'));
+			sub(drag_adjustx, mouse.stagex, hotspotcenterx);
+			sub(drag_adjusty, mouse.stagey, hotspotcentery);
+			asyncloop(pressed,
+				sub(dx, mouse.stagex, drag_adjustx);
+				sub(dy, mouse.stagey, drag_adjusty);
+				screentosphere(dx, dy, ath, atv);
+		
+			  );
+		</action>
+		<action name="mobilescale" autorun="preinit" devices="mobile">
+		    mul(stagescale,0.5);
+		</action>
+		<action name="playSceneName">
+			def(scale, string, get(hotspot[video].scale));
+		    <!-- 打印日志 -->
+		    <!-- showlog(true, top); -->
+		    mobilescale();
+		    <!-- 播放视频 -->
+		    hotspot[video].playvideo(%1, '', false);
+			set(hotspot[video].scale, get(scale));
+			<!-- set(hotspot[video].videourl, %1); -->
+		</action>
+		<!-- 设置缩放大小 -->
+		<action name="scaleChange">
+			set(hotspot[video].scale, %1);
+		</action>
+		<!-- 获取缩放大小 -->
+		<action name="getmyScale">
+			def(scale, string, get(hotspot[video].scale));
+			jscall(calc("window.getScaleHandle('"+ get(scale) +"')") );
+		</action>
+		<!-- 切换状态播放，暂停 -->
+		<action name="toggleMute">
+			set(hotspot[video].muted, %1);
+		</action>
+		<!-- 视频初始化完成 -->
+		<action name="videoreadyFunc">
+		    jscall('window.videoready()');
+			<!-- set(hotspot[video].scale, 0.3); -->
+		</action>
+		<!-- 引导图加载完成后 -->
+		<!-- <action name="suspendedPlay">
+		    set(hotspot[video].isVideoreadyType, true);
+		</action> -->
+	</scene>
+
+
+</krpano>

src/pages/webgl_rxdz_krpanoVideo/webgl_rxdz_krpanoVideo.html

@@ -0,0 +1,33 @@
+<!--
+ * @Author: caodongdong caodongdoong@gmail.com
+ * @Date: 2023-05-17 15:46:34
+ * @LastEditors: caodongdong caodongdoong@gmail.com
+ * @LastEditTime: 2023-06-30 16:20:04
+ * @FilePath: \h5-uniApp-miniprogrgm\webgl\pages\webgl_rxdz\webgl_rxdz.html
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<div class="main-view">
+	<krpanoVideo :videoUrl="videoUrl" :muted="muted" :scale="scale"></krpanoVideo>
+	<div class="voice-btn rows justify-center" @click="updateMuted">
+		<span :class="[muted?'iconfont icon-jingyin':'iconfont icon-yinliang']" style="color: #ffffff;"></span>
+	</div>
+	<div class="slide-mask"></div>
+	<!-- 数字人大小滚动条 -->
+	<div class="slide-view columns rows-between">
+		<div class="slide-tips">数字人<br>大小</div>
+		<div class="slide-word">放大</div>
+		<el-slider
+			class="rangeview"
+		    v-model="rangeValue"
+		    vertical
+			:min="10"
+			:max="100"
+			:show-tooltip="false"
+			@change="rangeChange"
+		    >
+		</el-slider>
+		<div class="slide-word">缩小</div>
+	</div>
+	<!-- AI数字人组件 -->
+	<viewAI ref="viewAI" @aiPeopleChange="aiPeopleChange" style="z-index: 13;"></viewAI>
+</div>

src/pages/webgl_rxdz_krpanoVideo/webgl_rxdz_krpanoVideo.scss

@@ -0,0 +1,134 @@
+.main-view{
+	width:100vw;
+	height:100vh;
+	overflow: hidden;
+	position: relative;
+}
+canvas { z-index: 10;}
+.mapDiv{
+	position: relative;
+	background-color: #fff;
+	font-size: 0px;
+}
+page {
+    -webkit-user-select: none;
+    user-select: none;
+    width: 100%;
+	height:100vh;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+/* 生成截屏的画布对象 */
+#canvas {
+	width: 100vw;
+	z-index: -1;
+	left:0px;
+}
+.canvas-view{
+	position:relative;
+}
+.lable-view{
+	position:absolute;
+	width:100vw;
+}
+.voice-btn{
+	position: absolute;
+	width: 72px;
+	height: 72px;
+	background: rgba(0, 0, 0, 0.5);
+	left: 20px;
+	top: 650px;
+	border-radius: 50%;
+}
+.slide-mask{
+	position: absolute;
+	right: 0px;
+	top: 0px;
+	width: 126px;
+	height: 750px;
+	background: linear-gradient(90.13deg, #00000000 0%, #00000080 100%);
+	z-index: 9;
+}
+.slide-view{
+	position: absolute;
+	right: 10px;
+	top: 80px;
+	width: 72px;
+	height: calc(750px - 60px - 60px);
+	z-index: 10;
+	.slide-tips{
+		font-family: "Verdana Bold";
+		font-weight: 700;
+		font-size: 24px;
+		color: #fff;
+		text-align: center;
+		margin-bottom: 20px;
+	}
+	.slide-word{
+		font-family: "Verdana";
+		font-weight: 400;
+		font-size: 24px;
+		text-align: center;
+		color: #b9ff98;
+	}
+	.rangeview{
+		right: 0px;
+		height: 472px;
+		margin-top: 10px;
+		margin-bottom: 10px;
+	}
+}
+
+// /deep/.el-slider.is-vertical .el-slider__button-wrapper{
+// 	top: 50%;
+// 	left: 50%;
+// 	transform: translate(-50%,-50%);
+// }
+/deep/.el-slider__button-wrapper{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+}
+/deep/.el-slider__bar{
+	background-color: #B9FF98;
+}
+/deep/.el-slider__button{
+	border: 2px solid #B9FF98;
+}
+/deep/.el-slider.is-vertical .el-slider__bar{
+	width: 8px;
+	border-radius: 0 0 4px 4px;
+}
+/deep/.el-slider.is-vertical .el-slider__runway{
+	width: 8px;
+	background-color: rgba(255, 255, 255, 0.5);
+}
+.guide-mask {
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.3);
+	z-index: 90;
+	position: fixed;
+	margin: auto;
+	pointer-events: none;
+	transition: opacity 0.5s ease-out;
+}
+
+.guide-mask>img {
+	width: 280px;
+	height: 406px;
+	bottom: 100px;
+	right: 0;
+	margin: auto;
+	position: fixed;
+	left: 0;
+}
+.guide-mask-hide {
+	opacity: 0;
+	pointer-events: none;
+}

src/pages/webgl_rxdz_panor/webgl_rxdz_panor.vue

@@ -1,13 +1,14 @@
-<template src="./webgl_rxdz_panor.html">
+<template src="./webgl_rxdz_krpanoVideo.html">
 
 </template>
 <script>
-	import Panoramic from "../../components/panoramic/index.vue";
+	import krpanoVideo from "@/components/krpanoVideo/index.vue";
 	import commonPageMethod from '@/mixins/commonPageMethod.js';
+	import viewAI from '@/components/newBottomCom/viewAI/viewAI.vue';
 	// import commonPageMethod from '@/common/commonPageMethod.js';
 	export default {
 		components: {
-			Panoramic
+			krpanoVideo,viewAI
 		},
 		mixins: [commonPageMethod],
 		/**
@@ -38,14 +39,17 @@
 				isIOS: false,
 				videoUrl:'',
 				bgUrl:'',
+				rangeValue:50,
+				scale:1,
+				muted:true,
 			}
 		},
 		beforeDestroy() {
-			console.warn("***beforeDestroy-webgl_rxdz_panor***");
+			console.warn("***beforeDestroy-webgl_rxdz_krpanoVideo***");
 		},
 		mounted(options) {
 			var that = this;
-			console.warn("***webgl_rxdz_panor-options***", this.$route.query)
+			console.warn("***webgl_rxdz_krpanoVideo-options***", this.$route.query)
 			this.isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
 			this.videoUrl = this.$route.query.videoUrl || '';
 			this.bgUrl = this.$route.query.bgUrl || 'https://elab-marketing-web.oss-accelerate.aliyuncs.com/replicate_images/1702457671501.png';
@@ -58,15 +62,30 @@
 			updateMuted(){
 				this.muted = !this.muted;
 			},
-			iosPlay(){
-				this.videoHandle();
-				this.hasOneTouch = true;
+			rangeChange(e){
+				let sca = (this.rangeValue - 50)/50 + 1;
+				if(sca >= 1){
+					sca = sca *2;
+				}
+				this.scale = sca;
+				// this.videoMeshChange(this.rangeValue)
 			},
-			
+			aiPeopleChange(item){
+				let self = this;
+				console.warn("***aiPeopleChange***",item);
+				if(!item || !item.url){
+					Toast({
+						message: '没有地址...请稍后再试',
+					});
+					return false;
+				}
+				self.videoUrl = item.url;
+				// self.videoHandle();
+			}
 		}
 	}
 </script>
 <style lang="scss" scoped>
-	@import "./webgl_rxdz_panor.scss";
+	@import "./webgl_rxdz_krpanoVideo.scss";
 	/* @import "@/common/css/common.css"; */
 </style>

src/pages/webgl_rxdz_panor/webgl_rxdz_panor.html

@@ -1,11 +0,0 @@
-<!--
- * @Author: caodongdong caodongdoong@gmail.com
- * @Date: 2023-05-17 15:46:34
- * @LastEditors: caodongdong caodongdoong@gmail.com
- * @LastEditTime: 2023-06-30 16:20:04
- * @FilePath: \h5-uniApp-miniprogrgm\webgl\pages\webgl_rxdz\webgl_rxdz.html
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--->
-<div class="main-view">
-	<Panoramic></Panoramic>
-</div>

src/pages/webgl_rxdz_panor/webgl_rxdz_panor.scss

@@ -1,21 +0,0 @@
-.main-view{
-	width:100vw;
-	height:100vh;
-	overflow: hidden;
-	position: relative;
-}
-canvas { z-index: 10;}
-.mapDiv{
-	position: relative;
-	background-color: #fff;
-	font-size: 0px;
-}
-page {
-    -webkit-user-select: none;
-    user-select: none;
-    width: 100%;
-	height:100vh;
-    overflow-x: hidden;
-    overflow-y: hidden;
-}
-

src/router/index.js

@@ -12,7 +12,7 @@ import webgl_rxdz_customize from '@/pages/webgl_rxdz_customize/webgl_rxdz_custom
 import webgl_rxdz_vr from '@/pages/webgl_rxdz_vr/webgl_rxdz_vr.vue'
 import webgl_rxdz_720 from '@/pages/webgl_rxdz_720/webgl_rxdz_720.vue'
 import webgl_rxdz_clipImg from '@/pages/webgl_rxdz_clipImg/webgl_rxdz_clipImg';//webgl 截图功能
-import webgl_rxdz_panor from '@/pages/webgl_rxdz_panor/webgl_rxdz_panor';//krpanoImg-720视频
+import webgl_rxdz_krpanoVideo from '@/pages/webgl_rxdz_krpanoVideo/webgl_rxdz_krpanoVideo';//krpanoImg-720视频
 import webgl_rxdz_krpanoImg from '@/pages/webgl_rxdz_krpanoImg/webgl_rxdz_krpanoImg';//krpanoImg-720图
 
 Vue.use(Router)
@@ -90,9 +90,9 @@ const router = new Router({
 			}
 		},
 		{
-			path: '/pages/webgl_rxdz_panor',
-			name: 'webgl_rxdz_panor',
-			component: webgl_rxdz_panor,
+			path: '/pages/webgl_rxdz_krpanoVideo',
+			name: 'webgl_rxdz_krpanoVideo',
+			component: webgl_rxdz_krpanoVideo,
 			meta:{
 				keepAlive:false
 			}