数字人

src/components/newBottomCom/viewAI/viewAI.html

@@ -0,0 +1,19 @@
+<div class="ai-view">
+	<div class="ai-title rows">
+		<div class="title-btn rows justify-center" :class="{active:tabIndex==0}" @click.stop="tabChange(0)">平台数字人</div>
+		<div class="title-btn rows justify-center" :class="{active:tabIndex==1}" @click.stop="tabChange(1)">明星数字人</div>
+	</div>
+	<div class="ai-tips">
+		点击下面人物替换到全景中，可调整大小和拖动到摆放位置
+	</div>
+	<div class="ai-people">
+		<div class="main rows">
+			<div :class="['item', selectIndex==idx ? 'active': '']" v-for="(item, idx) in dataList"
+				:key="idx" @click="selectAction(item,idx)">
+				<img class="itemImg" :src="item.icon"/>
+				<div class="item-name rows justify-center">{{item.value}}</div>
+			</div>
+		</div>
+	</div>
+	<div class="ai-bottom rows justify-center" @click.stop="mynavigateFuc">发布全景</div>
+</div>

src/components/newBottomCom/viewAI/viewAI.scss

@@ -0,0 +1,198 @@
+.ai-view{
+	position: relative;
+	width: 100%;
+	height: calc(100% - 750px);
+	background: #fff;
+	padding-top: 36px;
+	.ai-title{
+		position: relative;
+		width: 100%;
+		padding-left: 40px;
+		margin-bottom: 20px;
+		.title-btn{
+			width: 210px;
+			height: 56px;
+			border-radius: 16px;
+			font-family: "Verdana";
+			font-weight: 400;
+			font-size: 30px;
+			background: #fff;
+			color: #4e4e4e;
+		}
+		.title-btn.active{
+			background: #343434;
+			color: #cef5bc;
+		}
+	}
+	.ai-tips{
+		position: relative;
+		width: 100%;
+		padding-left: 40px;
+		font-family: "Verdana";
+		font-weight: 400;
+		font-size: 26px;
+		color: #4e4e4e;
+		opacity: 0.5;
+		margin-bottom: 30px;
+	}
+	.ai-people{
+		position: relative;
+		width: 100%;
+		padding-left: 40px;
+		overflow-x: auto;
+		.main{
+			.item{
+				margin-right: 20px;
+				font-size: 0px;
+				.item-name{
+					font-family: "Verdana";
+					font-weight: 400;
+					font-size: 28px;
+					color: #4e4e4e;
+				}
+				.itemImg{
+					width: 150px;
+					height: 210px;
+					border-radius: 20px;
+					border: solid 4px transparent;
+					font-size: 0px;
+					margin-bottom: 10px;
+					box-sizing: border-box;
+				}
+			}
+			.item:last-child{
+				margin-right: 0px;
+			}
+			.item.active{
+				color: #85b474;
+			}
+			.active > .itemImg{
+				border: solid 4px #94DB75;
+			}
+			
+			
+		}
+	}
+	.ai-bottom{
+		position: absolute;
+		left: 116px;
+		bottom: 60px;
+		width: 518px;
+		height: 80px;
+		border-radius: 40px;
+		background: linear-gradient(130.79deg, #a0ed84 0%, #e8f4b7 100%);
+		border: 2px solid rgba(255, 255, 255, 0.22);
+		font-family: "DIN Alternate Bold";
+		font-weight: 700;
+		font-size: 34px;
+		color: #365d39;
+	}
+}
+
+.plus_park {
+	position: relative;
+}
+.shell-view{
+	position: fixed;
+	left: 0px;
+	bottom: 0px;
+	width: 100vw;
+	height: 200px;
+	border-radius: 40px 40px 0 0;
+	background: #fff;
+	box-shadow: 0 -6px 12px #0000001f;
+	box-sizing: border-box;
+	z-index: 315;
+	padding:0px 40px;
+	padding-top:30px;
+	padding-bottom:60px;
+	transition: height 1s;
+}
+.shell-view2{
+	height: 800px;
+}
+.shell-signscoll{
+	position: absolute;
+	top:-50px;
+	left:275px;
+	width:200px;
+	height: 100px;
+	z-index: 120;
+	/* padding-top:50px; */
+	box-sizing: border-box;
+}
+.signscoll-block{
+	position: absolute;
+	width: 90px;
+	height: 10px;
+	border-radius: 5px;
+	background: #707070;
+	opacity: 0.6;
+	bottom: 30px;
+}
+.floor-view{
+	position: absolute;
+	transform: translateY(-150%);
+	left:30px;
+	width: 72px;
+	border-radius: 12px;
+	background: rgba(0, 0, 0, 0.4);
+	overflow: hidden;
+}
+.floor-item{
+	height: 60px;
+	color: #fff;
+	font-size: 28px;
+}
+.floor-item.active{
+	color: #faa040;
+	background: #fff;
+	border-radius: 12px;
+}
+.tips-view{
+	position: absolute;
+	left:50%;
+	transform:translateX(-50%);
+	top:-50px;
+	font-family: "Verdana";
+	font-weight: 400;
+	font-size: 26px;
+	line-height: 30px;
+	text-align: center;
+	color: #2b2b2b;
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+.zoom-view{
+	position: fixed;
+	top:42px;
+	right:30px;
+	width: 52px;
+	height: 52px;
+}
+.zoom-view .icon {
+	width: 52px;
+	height: 52px;
+}
+.connect-view{
+	position: absolute;
+	width: 139px;
+	height: 184px;
+	background: transparent;
+	top:-190px;
+	right:24px; 
+	box-sizing: border-box;
+	.defaultHead{
+		width: 139px;
+		height: 184px;
+	}
+}
+button{
+	background-color: unset;
+	line-height: unset;
+	padding: unset;
+}
+button::after {
+    border: none;
+}

src/components/newBottomCom/viewAI/viewAI.vue

@@ -0,0 +1,119 @@
+<template src="./viewAI.html">
+
+</template>
+<script>
+	const util = require('@/utils/util.js').default;
+	import { MessageBox } from 'mint-ui';
+	import { Indicator } from 'mint-ui';
+	import { Toast } from 'mint-ui';
+	// import commonMethod from '@/common/commonMethod.js';
+	// import touchHandle from '@/mixins/touchHandle.js';
+	// import requestConfig from '@/static/lib/requestConfig';
+
+	export default {
+		data: function() {
+			return {
+				leftList:[],
+				rightList:[],
+				dataList:[],
+				tabIndex:0,//当前选中的tab序号
+				selectIndex:0,
+			}
+		},
+		props:{
+			
+		},
+		// mixins: [touchHandle],
+		async mounted() {
+			// await this.getCityHouseList();		
+			console.warn("***viewAI***")
+			this.getDatalist();
+		},
+		// 页面被展示时执行
+		onPageShow: function() {  
+			
+		},
+		//页面被隐藏时执行
+        onPageHide: function() {
+        	// console.warn("***detached-hide***")
+        },
+		methods:{
+			tabChange(index){
+				if(this.tabIndex == index){
+					return false;
+				}
+				this.tabIndex = index;
+				if(this.tabIndex==0){
+					this.dataList = this.leftList;
+				}else{
+					this.dataList = this.rightList;
+				}
+				this.selectIndex = 0;
+				this.aiPeopleChange(this.dataList[this.selectIndex])
+			},
+			//空间或者风格切换
+			selectAction(selItem,index) {
+				console.log('点击动作111：', selItem,index)
+				if(this.selectIndex == index){
+					return false
+				}
+				this.selectIndex = index;
+				this.aiPeopleChange(this.dataList[this.selectIndex])
+			},
+			// 获取瀑布流数据
+			async getDatalist() {
+				Indicator.open('加载中...');
+				var parmas = {
+					"type": "Virtual_Human",
+					// "brandId": $config.brandId,
+				}
+				let res = await requestConfig('queryEnumList', parmas)
+				Indicator.close();
+				this.dataList = [];
+				this.selectIndex = 0;
+				if (res && res.success && res.list) {
+					let list = res.list;
+					this.leftList = list.filter(it=>it.name=='platform');
+					this.rightList = list.filter(it=>it.name=='star');
+					this.dataList = this.leftList;
+					this.aiPeopleChange(this.dataList[this.selectIndex])
+				}
+			},
+			catchTouchMove: function() {
+				return false;
+			},
+			// hideOrShowActor(type){
+			// 	this.$emit('hideOrShowActor',type);//隐藏所有视角
+			// },
+			//种子户型变更-户型大类变更
+			aiPeopleChange(item){
+				this.$emit("aiPeopleChange", item);//通知页面，户型大类发生了变更
+			},
+			
+			mynavigateFuc(e) {
+				if (e) {
+					let param = {
+						type: 'CLK', //埋点类型
+						clkId: 'clk_2cmina_23080408', //点击ID
+						clkName: 'WeCom_clk', //点击前往的页面名称
+						clkParams: {
+							locusName: "联系定制",
+						}
+					};
+					util.trackRequest(param);
+					if(window.__wxjs_environment === 'miniprogram'){
+						wx.miniProgram.navigateTo({url: '/extraPackage/pages/aiPublishPage/aiPublishPage?event=openCustomerServiceChat&houseId='+this.$store.state.houseId})
+					}else{
+						Toast({
+							message: '敬请期待',
+						});
+					}
+				}
+			},
+		}
+	}
+</script>
+<style lang="scss" scoped>
+    @import "./viewAI.scss";
+	/* @import "@/common/css/common.css"; */
+</style>

src/pages/webgl_rxdz_vr/webgl_rxdz_vr.html

@@ -15,14 +15,13 @@
 		<canvas id="FPS" type="2d" style="width:80px;height:48px"></canvas>
 		<canvas id="MS" type="2d" style="width:80px;height:48px"></canvas>
 	</div> -->
-	<div id="mapDiv" ref="webgl"></div>
+	<div class="mapDiv" ref="webgl"></div>
 	<canvas id="canvas_webgl" type="webgl" ref="glcanvas"
 		 width="100vw" 
 		:style="{'height':canvasHeight+'px'}">
 	</canvas>
-	<!-- AI结果覆盖层 -->
-	<!-- <viewMask ref="viewMask" @switchActor="switchActor" style="z-index: 13;"
-	  :spaceObj="curSpaceObj" ></viewMask> -->
+	<!-- AI数字人组件 -->
+	<viewAI ref="viewAI" @aiPeopleChange="aiPeopleChange" style="z-index: 13;"></viewAI>
 	<!-- 生成截屏的画布对象 -->
 	<canvas id="canvas" type="2d" :style="{'height':canvasHeight+'px','top':'100vh'}"></canvas>
 	<!-- <video id="myvideo" loop muted autoplay width="304" height="540" webkit-playsinline="webkit-playsinline" playsinline="playsinline" src="https://dm.static.elab-plus.com/miniProgram/001.mp4"></video> -->

src/pages/webgl_rxdz_vr/webgl_rxdz_vr.scss

@@ -3,9 +3,10 @@
 	height:100vh;
 	overflow: hidden;
 }
-canvas { width:100vw; height:calc(100vh - 408px);z-index: 10;}
-#mapDiv{
+canvas { z-index: 10;}
+.mapDiv{
 	background-color: #fff;
+	font-size: 0px;
 }
 page {
     -webkit-user-select: none;

src/pages/webgl_rxdz_vr/webgl_rxdz_vr.vue

@@ -4,23 +4,18 @@
 <script>
 	import * as THREE from 'three';
 	import Stats from 'three/addons/libs/stats.module.js';
-	import {
-		OrbitControls
-	} from 'three/addons/controls/OrbitControls.js';
+	import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 	import { DragControls } from 'three/addons/controls/DragControls.js';
-	import {
-		getStorage
-	} from '@/utils/localStorage';
+	import {getStorage} from '@/utils/localStorage';
 	var requestId = "";
 	const util = require('@/utils/util.js').default;
-	import viewShell from '@/components/newBottomCom/viewShell/viewShell.vue';
-	import viewMask from '@/components/newBottomCom/viewMask/viewMask.vue';
+	import viewAI from '@/components/newBottomCom/viewAI/viewAI.vue';
 
 	import commonPageMethod from '@/mixins/commonPageMethod.js';
 	// import commonPageMethod from '@/common/commonPageMethod.js';
 	export default {
 		components: {
-			viewMask
+			viewAI
 		},
 		mixins: [commonPageMethod],
 		/**
@@ -28,15 +23,15 @@
 		 */
 		data() {
 			return {
-				pvCurPageName: "room_show",
-				locusBehaviorName: "房间展示",
+				pvCurPageName: "add_AI_people",
+				locusBehaviorName: "添加数字人",
 				pvCurPageParams: null,
 				houseId: "",
 				pvId: 'p_2cmina_23080402',
 				canvas: null,
 				navbar: {
 					showCapsule: 1,
-					title: '客厅',
+					title: '添加数字人',
 					titleColor: '#000',
 					navPadding: 0,
 					navPaddingBg: 'transparent',
@@ -109,7 +104,7 @@
 			var that = this;
 			console.warn("***webgl_rxdz_roam-options***", this.$route.query)
 			this.isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
-			this.videoUrl = this.$route.query.videoUrl || 'https://dm.static.elab-plus.com/miniProgram/005.mp4';
+			this.videoUrl = this.$route.query.videoUrl || '';
 			this.bgUrl = this.$route.query.bgUrl || 'https://dm.static.elab-plus.com/miniProgram/tears_of_steel_bridge_2k.jpg';
 			
 			// alert("***mounted-webgl_rxdz_roam***"+this.isIOS + this.curHouseObj)
@@ -122,7 +117,8 @@
 				screenHeight = Math.min(window.innerHeight, window.screen.height)
 			}
 			let unit = screenWidth / 750; //单位rpm 对应 px 的值
-			this.canvasHeight = screenHeight - (600 * unit) + (40 * unit);
+			// this.canvasHeight = screenHeight - (600 * unit) + (40 * unit);
+			this.canvasHeight = screenWidth;
 			this.houseId = this.$route.query.houseId ? this.$route.query.houseId : '';
 			this.spaceId = this.$route.query.spaceId ? this.$route.query.spaceId : '';
 			let container = this.$refs.webgl;
@@ -143,7 +139,7 @@
 			// this.attendEvent = attendEvent;
 			this.starRender = starRender; //对外暴露启动渲染的方法
 			this.stopRender = stopRender; //对外暴露停止渲染的方法
-
+			this.videoHandle = videoHandle;	//视频处理方法
 			function init() {
 				// 创建相机位置
 				camera = new THREE.PerspectiveCamera(120, screenWidth / that.canvasHeight, 0.1, 10000);
@@ -156,12 +152,13 @@
 				// const ambientLight = new THREE.AmbientLight(0xFFEFE0, 3.5);
 				// scene.add(ambientLight);
 				// 辅助方格
-				const axesHelper = new THREE.AxesHelper( 50 );
-				scene.add( axesHelper );
-				const gridHelper = new THREE.GridHelper(50, 10, 0xcccccc, 0xcccccc);
-				gridHelper.position.y = 0;
-				gridHelper.position.x = 0;
-				scene.add(gridHelper);
+				// const axesHelper = new THREE.AxesHelper( 50 );
+				// scene.add( axesHelper );
+				// const gridHelper = new THREE.GridHelper(50, 10, 0xcccccc, 0xcccccc);
+				// gridHelper.position.y = 0;
+				// gridHelper.position.x = 0;
+				// scene.add(gridHelper);
+				
 				//加载环境720贴图
 				const loader = new THREE.TextureLoader();
 				const texture = loader.load(that.bgUrl, () => {
@@ -201,12 +198,18 @@
 				});
 				camera.lookAt(that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z);
 				starRender(); //启动渲染
-				setTimeout(() => {
-					videoHandle()
-				}, 500);
+				// setTimeout(() => {
+				// 	videoHandle()
+				// }, 500);
 			}
 
 			function videoHandle() {
+				if(!that.videoUrl){
+					return false;
+				}
+				if(videoMesh){
+					that.scene.remove(videoMesh);
+				}
 				// 创建视频元素
 				var video = document.createElement('video');
 				video.src = that.videoUrl; // 视频文件的路径
@@ -433,6 +436,14 @@
 			clearHandle() {
 				this.clearEvent();
 			},
+			aiPeopleChange(item){
+				console.warn("***aiPeopleChange***",item);
+				if(!item || !item.url){
+					return false;
+				}
+				this.videoUrl = item.url;
+				this.videoHandle();
+			}
 		}
 	}
 </script>

src/services/requestConfig.js

@@ -36,7 +36,8 @@ const endpoints = {
 	generateProcess: 'elab-marketing-content/aiGenerateImg/getResult', // 获取任务进度-阿里云
 	img2img_local: 'elab-marketing-content/aiGenerateImg/img2img_local', // 生成图第一次请求
 	getPredictions: 'elab-marketing-content/aiGenerateImg/getPredictions', // 获取任务进度-新版
-	shareDetail: '/elab-marketing-content/aiDreamHouse/V3.0/shareDetail', // 分享查看
+	shareDetail: 'elab-marketing-content/aiDreamHouse/V3.0/shareDetail', // 分享查看
+	queryEnumList: 'elab-marketing-user/enum/queryEnumList', // 获取数字人
 	// predictions: "https://api.replicate.com/v1/deployments/feathers-wing/spacely-realistic-style-softedge-a100/predictions", // 分享查看
 };
 window.requestConfig = async(endpoint, options, isHideLoading = false, preventDoubleClick = false, method = 'post') => {