如何引入babylonjs到项目中

babylonjs中文文档
https://doc.cnbabylon.com/3-0-how-to-get-babylon-js/

“@babylonjs/core”: “^5.0.0”,

BabylonOne.vue

<template>
<div class="mainbox " @touchmove.prevent><div :class="tipsBox?'tipsBox ' : 'tipsBox changeAni-leave-to changeAni-leave-active'" @click="tipsBoxClick()" v-if="tipsBox1"><img src="@/assets/tishi.png" alt="" class="tips"></div><div class="booBig"><img src="@/assets/zhuzi1.png" class="boo1 animated tada slowerer infinite"><img src="@/assets/zhuzi2.png" class="boo2 animated pulse slow infinite"></div><div class="booSmallBox"><img src="@/assets/zhuye1.png" alt="" class="boo3"><img src="@/assets/zhuye2.png" alt="" class="boo4"><img src="@/assets/zhuye3.png" alt="" class="boo5"><img src="@/assets/zhuye4.png" alt="" class="boo5"></div><div class="jz" v-if="jzs"><div class="jiazai">加载中...</div></div><!-- <div class="jzkuang"><div class="jdt"></div></div> --><img src="@/assets/logo.png" class="titleImg"><!-- <audio  src="/vue/media/music.7d8f1c8c.mp3" loop="loop"></audio> --><!-- 箭头 --><block v-if="vr_sence"><!-- 菜单 --><div :class="topBtns==true ? 'menuBox ' : 'menuBox menuBoxUp'  " @click="topBtnClick()"><img src="@/assets/dibu.png" class="topBtn"><img src="@/assets/shangjiantou.png" class="topBtnUp" v-if="topBtns" ><img src="@/assets/xiajiantou.png" class="topBtnDown" v-else ></div><div :class=" topBtns==false?'menuNav show': 'menuNav ' " v-if="topBtns==false"><nav class="navBox"><div class="font itemboxt" @click="activeClick(1)"><img src="@/assets/bsgk.png" class="item"><img src="@/assets/xuanzhong.png" v-if="xznum==1" class="active"></div><div class="font " @click="activeClick(2)"><img src="@/assets/ycxq.png" class="item"><img src="@/assets/xuanzhong.png" v-if="xznum==2" class="active"></div><div class="font " @click="activeClick(3)"><img src="@/assets/yl.png" class="item"><img src="@/assets/xuanzhong.png" v-if="xznum==3" class="active"></div><div class="font " @click="activeClick(4)"><img src="@/assets/gnbj.png" class="item"><img src="@/assets/xuanzhong.png" v-if="xznum==4" class="active"></div><div class="font " @click="activeClick(5)"><img src="@/assets/yy.png" class="item"><img src="@/assets/xuanzhong.png" v-if="xznum==5" class="active"></div><div class="font " @click="activeClick(6)"><img src="@/assets/zx.png" class="item"><img src="@/assets/xuanzhong.png" v-if="xznum==6" class="active"></div></nav></div></block><block v-else><!-- 返回 --><div :class="topBtns==true ? 'menuBox ' : 'menuBox menuBoxUp'  " @click="topBtnClick()"><img src="@/assets/dibu.png" class="topBtn"><img src="@/assets/shangjiantou.png" class="topBtnUp" v-if="topBtns" ><img src="@/assets/xiajiantou.png" class="topBtnDown" v-else ></div><div :class=" topBtns==false?'menuNav show': 'menuNav ' " v-if="topBtns==false"><nav class="navBox"><div class="font itemboxt" @click="fanhuiClick()"><img src="@/assets/fanhui.png" class="item" style="width: 2.25rem;"></div></nav></div></block><!-- 别墅概况 --><div v-if="modelBox1"><span><div :class="modelBox?'modelBox animated zoomIn ':'modelBox animated zoomOutUp'"><div class="contentBox"><div class="start"><p class="title">VILLA OVERVIEW</p><p class="name">别墅概况</p></div><div class="center"><div class="inforBox"><p class="title">开间</p>：<p class="sub">17.5m</p></div><div class="inforBox"><p class="title">进深</p>：<p class="sub">11.5m</p></div><div class="inforBox"><p class="title">建筑高度</p>：<p class="sub">8.99m</p></div><div class="inforBox"><p class="title">占地面积</p>：<p class="sub">182.95m*</p></div><div class="inforBox"><p class="title">建筑面积</p>：<p class="sub">344.76m*</p></div><div class="inforBox"><p class="title">结构类型</p>：<p class="sub">砖混结构</p></div></div><div class="end" @click="closebsgk"><img src="@/assets/guanbi.png" class="close"></div></div></div></span></div><!-- 功能布局 --><div :class="gnbj ? 'mapBox animated zoomIn' : 'mapBox animated zoomOutUp' " v-if="gnbj1"><img src="@/assets/buju.png" class="map"><img src="@/assets/guanbi.png" class="closeIcon" @click="closeClick()"></div><audio ref="audioTip" id="myaudio" :src="audio.src" loop autoplay style="display:none;" ><!-- <source :src="audio.src"> --></audio><!-- 全景 --><div v-if="vr" id="viewer" class="viewer"></div><!-- <canvas></canvas>  --><canvas v-show="sence" id="renderCanvas"  class="buidingBox" touch-action="none" width="100%" height="100%" style="touch-action: none;"></canvas><!-- 地板 --><div v-if="Mone"><span><div :class="d_Mone?'modelBox animated zoomIn ':'modelBox animated zoomOutUp'"><div class="contentBox" @click="closebsgk()"><div class="start"><p class="title">GROUND</p><p class="name">地砖</p></div><div class="center"><div class="inforBox"><p class="title">品牌</p>：<p class="sub">艾泽森</p></div><div class="inforBox"><p class="title">纹理</p>：<p class="sub">仿石纹</p></div><div class="inforBox"><p class="title">风格</p>：<p class="sub">田园</p></div><div class="inforBox"><p class="title">尺寸</p>：<p class="sub">800mm * 800mm</p></div></div><div class="end" ><img src="@/assets/guanbi.png" class="close" @click="closebsgk()"></div></div></div></span></div><!-- 屋顶 --><div v-if="Mtwo"><span><div :class="d_Mtwo?'modelBox animated zoomIn ':'modelBox animated zoomOutUp'"><div class="contentBox"><div class="start"><p class="title">ROOF TILE</p><p class="name">屋面瓦</p></div><div class="center"><div class="inforBox"><p class="title">产品类型</p>：<p class="sub">PVC屋面瓦</p></div><div class="inforBox"><p class="title">产品特性</p>：<p class="sub">耐候卓越，使用寿命不低于五十年防水性能突出，免设防水层 抗风、抗震，装饰安全可靠色彩丰富，个性新颖，持久稳定防火性能良好</p></div><div class="inforBox"><p class="title">尺寸</p>：<p class="sub">400mm X 240mm</p></div></div><div class="end" @click="closebsgk()"><img src="@/assets/guanbi.png" class="close" @click="closebsgk()"></div></div></div></span></div><!-- 墙 --><div v-if="Mthree"><span><div :class="d_Mthree?'modelBox animated zoomIn ':'modelBox animated zoomOutUp'"><div class="contentBox"><div class="start"><p class="title">EXTERIOR WALL</p><p class="name">外墙砖</p></div><div class="center"><div class="inforBox"><p class="title">产品类型</p>：<p class="sub">劈开砖</p></div><div class="inforBox"><p class="title">品牌</p>：<p class="sub">长兴</p></div><div class="inforBox"><p class="title">风格</p>：<p class="sub">时尚简约</p></div><div class="inforBox"><p class="title">尺寸</p>：<p class="sub">240*60*12(mm)</p></div></div><div class="end" @click="closebsgk()"><img src="@/assets/guanbi.png" class="close" @click="closebsgk()"></div></div></div></span></div>
</div>
</template><script >import { defineComponent, } from 'vue';
// import { BabylonScene } from '../BabylonOne/BabylonScene ';import {Viewer} from 'photo-sphere-viewer'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'import { Scene, Engine,SceneLoader,MeshBuilder,Texture,Color4,ActionManager,ExecuteCodeAction,PBRMaterial, ArcRotateCamera, HemisphericLight,ShadowGenerator, Vector3,Color3, DirectionalLight } from "@babylonjs/core"
import "@babylonjs/loaders";import yuanlin from '../assets/yuanlintif.jpg'
import zhuangxiutif from '../assets/zhuangxiutif.jpg'let spot1 = null
let spot2 = null
let spot3 = null
let audio= null
export default defineComponent({    name: 'BabylonOne',data(){return{topBtns:true,//返回vr_sence:true,xznum:0,//菜单gnbj:false,//功能布局gnbj1:false,tipsBox:true,//提示tipsBox1:true,modelBox:false,//别墅概况modelBox1:false,Mone:false,d_Mone:false,Mtwo:false,d_Mtwo:false,Mthree:false,d_Mthree:false,sence:true,//模型vr:false,vr_image:'',audio:{    //消息通知src:require("../assets/yinyue.mp3"),},audioB:true,audios: new Audio(),ycxq:false,jzs:true,}},created(){this.timeout() this.jztime()},methods:{timeout(){if (this.tipsBox1==true) {setTimeout(()=>{this.tipsBox1=falselet audio=document.getElementById('myaudio');audio.play()},5000)}},jztime(){setTimeout(()=>{this.jzs=false},1500)},tipsBoxClick(){this.tipsBox=falsesetTimeout(() => { this.tipsBox1=false}, 2000);let audio=document.getElementById('myaudio');audio.play()console.log('特性')},topBtnClick(){if (this.topBtns==false) {this.topBtns = true}else{this.topBtns = false}},// 点击菜单activeClick(index){this.xznum=indexif(index==1){this.modelBox=truethis.modelBox1=true}if (index==3) {this.vr=truethis.vr_image=yuanlinsetTimeout(()=>{this.xznum=3this.topBtns=truethis.sence=falsethis.vr_sence= falsethis.vropen()},10)}if (index==2) {if (this.ycxq) {this.ycxq=false}else{this.ycxq=true// this.opensence()}                spot1.visibility = this.ycxq;spot1.setEnabled(this.ycxq);spot2.visibility = this.ycxq;spot2.setEnabled(this.ycxq);spot3.visibility = this.ycxq;spot3.setEnabled(this.ycxq);}if (index==5) {audio=document.getElementById('myaudio');if (this.audioB==false) {this.audioB=trueaudio.play()}else{this.audioB=falseaudio.pause()console.log('关闭')}}if (index==6) {this.vr=truethis.vr_image=zhuangxiutifsetTimeout(()=>{this.xznum=3this.topBtns=truethis.sence=falsethis.vr_sence= falsethis.vropen()},10)}if (index==4) {this.gnbj=truethis.gnbj1=true}this.topBtns=true},fanhuiClick(){this.xznum=0this.sence=truethis.topBtns=truethis.vr_sence=truethis.vr=falsethis.ycxq=false},// 关闭closebsgk(){this.modelBox=falsethis.d_Mone=falsethis.d_Mtwo=falsethis.d_Mthree=falseconsole.log('进入 ')var ctime = setTimeout(() => {this.modelBox1=falsethis.Mone=falsethis.Mtwo=falsethis.Mthree=false}, 1000);clearTimeout(ctime)console.log('进入 ')this.xznum = 0},  // 关闭功能布局closeClick(){this.gnbj=falsevar times = setTimeout(() => {this.gnbj1=false}, 2000);clearTimeout(times)this.xznum = 0},vropen(){this.viewer = new Viewer({container:document.querySelector('#viewer'),panorama:this.vr_image,size:{width: '100vw',height: '100%',},navbar:[{hidden:false}],loadingImg:'',loadingTxt:'',defaultZoomLvl: 0,mousewheel:false,});},opens(index){if (index==1) {this.Mone=truethis.d_Mone=trueconsole.log(this.d_Mone)}if (index==2) {this.Mtwo=truethis.d_Mtwo=trueconsole.log(this.Mtwo)} if(index==3) {this.Mthree=truethis.d_Mthree=trueconsole.log(this.d_Mthree)}},opensence(){let that = this// const canvas = document.querySelector("canvas")let canvas = document.getElementById("renderCanvas");let engine= new Engine(canvas, true);let scene = new CreateScene(canvas, engine);engine.runRenderLoop( function(){ scene.Render(); } );function CreateScene  (canvas,engine){let scene = new Scene(engine);let camera=new ArcRotateCamera("camera", Math.PI/-3, Math.PI/6, 70, new Vector3(0,0,0), scene);camera.attachControl(canvas, true,0),camera.setTarget(new Vector3(0,0,0)),camera.lowerRadiusLimit=30,camera.upperRadiusLimit=90,camera.lowerBetaLimit=Math.PI/12,camera.upperBetaLimit=Math.PI/2-Math.PI/12,camera.wheelDeltaPercentage=.01;camera.wheelPrecision = 1.8;let hlight=new HemisphericLight("hlight", new Vector3(0,0.2,0), scene);hlight.intensity=.01;hlight.diffuse=new Color3(136,180,230);hlight.ambientColor=new Color3(0,136,255);let dlight=new DirectionalLight("dlight", new Vector3(1,-2,1), scene);dlight.intensity=5;dlight.ambientColor = new Color3(0,136,255)dlight.position=new Vector3(-40,1,10);dlight.direction = new Vector3(2,-1,2);//创建阴影生成器，size为number越大阴影分辨率越高，light为产生阴影的光源var shadowSize = 1024;var shadowGenerator = new ShadowGenerator(shadowSize, dlight);//为阴影添加泊松分布采样滤镜shadowGenerator.usePoissonSampling=true;//PCF,webgl2可用，在加载性能上有很大提升shadowGenerator.usePercentageCloserFiltering=true;//可以通过手动降低滤镜质量来进一步提高性能//shadowGenerator.filteringQuality = BABYLON.ShadowGenerator.QUALITY_LOW;SceneLoader.ImportMesh("","https://demo.sishoe.com/viewer/models/","bieshu.glb", scene, function(meshes){// scene.createDefaultCameraOrLight(true, true, true);// scene.createDefaultEnvironment();for(var n=0;n<meshes.length;n++) {shadowGenerator.addShadowCaster(meshes[n], { includeDescendants:!0 } );if(meshes[n].id == "node_Line002_11362"){console.log(meshes[n].position+'--')meshes[n].position.z += -100;console.log(meshes[n].position)}}shadowGenerator.getShadowMap().renderList.forEach( function(A){ A.receiveShadows=true } );const spotMat = new PBRMaterial("spotMat");spotMat.albedoColor = new Color3(1,1,1);spotMat.albedoTexture = new Texture("https://demo.sishoe.com/viewer/models/spot.png");spotMat.metallic = 0;                    spotMat.albedoTexture.uScale = 1/16;spotMat.albedoTexture.vScale = 1;spotMat.albedoTexture.vOffset = 0;spotMat.albedoTexture.hasAlpha = true;let uOffset = 0; setInterval(() => {// console.log(uOffset);uOffset+= spotMat.albedoTexture.uScale;                     if(uOffset>=1) uOffset = 0;        spotMat.albedoTexture.uOffset = uOffset; },50);//地砖，1; 屋顶，2; 墙，3spot1 = MeshBuilder.CreateGround("spot1", {width:1, height: 1}, scene);spot1.position = new Vector3(3,1.5,-6.8);spot1.scaling = new Vector3(3,3,3);spot1.material = spotMat;spot1.visibility = false;spot1.setEnabled(false);spot2 = MeshBuilder.CreateGround("spot2", {width:1, height: 1}, scene);spot2.position = new Vector3(0,6.8,-1.0);spot2.rotation = new Vector3(-0.7,0,0);spot2.scaling = new Vector3(3,3,3);spot2.material = spotMat;spot2.visibility = false;spot2.setEnabled(false);spot3 = MeshBuilder.CreateGround("spot3", {width:1, height: 1}, scene);spot3.position = new Vector3(2.4,3.2,11.3);spot3.rotation = new Vector3(-1.5708,0,0);spot3.scaling = new Vector3(3,3,3);spot3.material = spotMat;spot3.visibility = false;spot3.setEnabled(false);spot1.actionManager = new ActionManager(scene);spot1.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnLeftPickTrigger,function(event){const sourceBox = event.meshUnderPointer;console.log("1当前点击了 ", sourceBox.name);that.opens(1)}));spot2.actionManager = new ActionManager(scene);spot2.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnLeftPickTrigger,function(event){const sourceBox = event.meshUnderPointer;console.log("2当前点击了 ", sourceBox.name);that.opens(2)}));spot3.actionManager = new ActionManager(scene);spot3.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnLeftPickTrigger,function(event){const sourceBox = event.meshUnderPointer;console.log("3当前点击了 ", sourceBox.name);that.opens(3)}));});scene.registerBeforeRender(function () {    // console.log(camera.rotation.x+'输出');if(camera.rotation.x>0.5  ){//look downcamera.rotation.x = 0.5;}else if(camera.rotation.x<-0.3){//look upcamera.rotation.x = -0.3;}  })this.Render = function(){scene.autoClear = false;scene.clearColor = new Color4(0, 0, 0,0);scene.render();}// return scene;}}},mounted(){ this.opensence()}})
</script>
<style>
.viewer{z-index: 103;
}
.psv-navbar {display: none !important;;
}
.jzkuang{position: fixed;bottom: 10rem;left: 10%;width: 80%;height: 20px;border: 1px solid #000;background-color: #000;margin: 0 auto;
}
.jdt{width: 0%;height: 20px;background-color: blue;animation: jindutiao 2s 1;animation-fill-mode:forwards;
}
@keyframes jindutiao{0% {width: 0%;}20% {width: 20%;}40% {width: 40%;}60% {width: 60%;}80%{width: 80%;}100%{width:  100%}
}
.jz{width: 100%;height: 100vh;background: url(../assets/beijing.jpg) no-repeat;background-size: cover;z-index: 107;position: absolute;left: 0;
}
.jiazai {position: fixed;bottom: 15rem;left: 45%;margin: auto;animation: shaking 2s infinite;}
@keyframes shaking {0% {transform: scale(1);}25% {transform: scale(1.25);}75% {transform: scale(1);}}.buidingBox {background: transparent;position: absolute;top: 0;left: 0;width: 100%;height: 100%;-ms-touch-action: none;touch-action: none;z-index: 104;}.booSmallBox{width: 100%;height: 100%;position: absolute;overflow: hidden;top: 0;left: 0;}.booSmallBox .boo3{animation: boo3-data-v-1f87e4c5 15s infinite;-webkit-animation-delay: 0s;animation-delay: 0s;-webkit-animation: boo3-data-v-1f87e4c5 15s infinite;position: absolute;max-width: 100%;height: auto;}.booSmallBox .boo4{animation: boo4-data-v-1f87e4c5 20s infinite;-webkit-animation-delay: 4s;animation-delay: 4s;-webkit-animation: boo4-data-v-1f87e4c5 20s infinite;position: absolute;max-width: 100%;height: auto;}.booSmallBox .boo5{animation: boo5-data-v-1f87e4c5 35s infinite;-webkit-animation-delay: 8s;animation-delay: 8s;-webkit-animation: boo5-data-v-1f87e4c5 35s infinite;position: absolute;max-width: 100%;height: auto;}.booSmallBox .boo6{-webkit-animation-delay: 10s;animation-delay: 10s;animation: boo6-data-v-1f87e4c5 25s infinite;-webkit-animation: boo6-data-v-1f87e4c5 25s infinite;position: absolute;max-width: 100%;height: auto;}.mainbox{width: 100%;height: 100%;background: url(../assets/beijing.jpg) no-repeat;background-size: cover;}.tipsBox {width: 100%;height: 100%;z-index: 107;position: absolute;display: flex;justify-content: center;/* top: 0;left: 0; */}.changeAni-leave-to {-webkit-transform: scaleX(0);transform: scaleX(0)}.changeAni-leave-active{-webkit-transition: -webkit-transform .8s;transition: -webkit-transform .8s;transition: transform .8s;transition: transform .8s,-webkit-transform .8s}.tipsBox .tips {width: 15.5rem;height: 6.5rem;position: absolute;bottom: 6.2rem;/* left: 12%; */}.booBig {width: 100%;height: 100%;overflow: hidden;position: absolute;top: 0;left: 0;}.booBig .slowerer{-webkit-animation-duration: 24s;animation-duration: 24s;}.booBig .boo1 {width: 10.02rem;height: 9.38rem;position: absolute;top: -.4rem;right: -1rem;}.animated.infinite {-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}.animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}.tada {-webkit-animation-name: tada;animation-name: tada;}@-webkit-keyframes tada {0% {-webkit-transform: scaleX(1);transform: scaleX(1)}10%,20% {-webkit-transform: scale3d(.9,.9,.9) rotate(-3deg);transform: scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90% {-webkit-transform: scale3d(1.1,1.1,1.1) rotate(3deg);transform: scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80% {-webkit-transform: scale3d(1.1,1.1,1.1) rotate(-3deg);transform: scale3d(1.1,1.1,1.1) rotate(-3deg)}to {-webkit-transform: scaleX(1);transform: scaleX(1)}
}@keyframes tada {0% {-webkit-transform: scaleX(1);transform: scaleX(1)}10%,20% {-webkit-transform: scale3d(.9,.9,.9) rotate(-3deg);transform: scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90% {-webkit-transform: scale3d(1.1,1.1,1.1) rotate(3deg);transform: scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80% {-webkit-transform: scale3d(1.1,1.1,1.1) rotate(-3deg);transform: scale3d(1.1,1.1,1.1) rotate(-3deg)}to {-webkit-transform: scaleX(1);transform: scaleX(1)}
}/* zhuzi2 */.booBig .boo2{width: 3.62em;height: 5.64rem;position: absolute;top: 10.2rem;right: 0;}.animated.slow {-webkit-animation-duration: 2s;animation-duration: 2s;}.pulse {-webkit-animation-name: pulse;animation-name: pulse;}@-webkit-keyframes pulse {0% {-webkit-transform: scaleX(1);transform: scaleX(1)}50% {-webkit-transform: scale3d(1.05,1.05,1.05);transform: scale3d(1.05,1.05,1.05)}to {-webkit-transform: scaleX(1);transform: scaleX(1)}
}@keyframes pulse {0% {-webkit-transform: scaleX(1);transform: scaleX(1)}50% {-webkit-transform: scale3d(1.05,1.05,1.05);transform: scale3d(1.05,1.05,1.05)}to {-webkit-transform: scaleX(1);transform: scaleX(1)}
}.mainbox .titleImg {width: 2.96rem;height: 3.14rem;position: absolute;z-index: 20;left: 1.56rem;top: 3rem;}@keyframes boo3-data-v-1f87e4c5 {0% {top: 20%;right: -10%}to {top: 80%;right: 100%}
}@-webkit-keyframes boo3-data-v-1f87e4c5 {0% {top: 20%;right: -10%}to {top: 80%;right: 100%}
}@keyframes boo4-data-v-1f87e4c5 {0% {top: 26%;right: -20%}to {top: 90%;right: 100%}
}@-webkit-keyframes boo4-data-v-1f87e4c5 {0% {top: 26%;right: -20%}to {top: 90%;right: 100%}
}@keyframes boo5-data-v-1f87e4c5 {0% {top: 20%;right: -30%}to {top: 80%;right: 100%}
}@-webkit-keyframes boo5-data-v-1f87e4c5 {0% {top: 20%;right: -30%}to {top: 80%;right: 100%}
}@keyframes boo6-data-v-1f87e4c5 {0% {top: 35%;right: -40%}to {top: 85%;right: 100%}
}@-webkit-keyframes boo6-data-v-1f87e4c5 {0% {top: 35%;right: -40%}to {top: 85%;right: 100%}
}
.menuBox {width: 100%;height: 1.5rem;position: absolute;z-index: 105;bottom: 0;left: 0;-webkit-transition: bottom .5s;transition: bottom .5s;
}
.menuBoxUp {bottom: 9.4rem;-webkit-transition: bottom .68s;transition: bottom .68s;
}
.menuBox .topBtn {width: 100%;height: auto;position: absolute;bottom: 0;left: 0;
}
.menuBox .topBtnUp{width: 2.2rem;height: 1.5rem;position: absolute;top: -60%;left: calc(50% - 1rem);
}
.menuBox .topBtnDown{width: 2.2rem;height: 1.5rem;position: absolute;top: -60%;left: calc(50% - 1rem);
}.menuNav {width: 100%;height: 9.4rem;position: absolute;bottom: 0;left: 0;z-index: 105;
}
@keyframes frame{from{bottom:-9.4rem;}to{bottom:0rem;}}.show{display: block;animation: frame 0.5s linear;animation-fill-mode: forwards;}
.menuNav .navBox {width: 100%;height: 9.4rem;background: rgba(47,59,83,.95);position: absolute;bottom: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;-ms-flex-pack: distribute;justify-content: space-around;-webkit-box-sizing: border-box;box-sizing: border-box;padding: .4rem .3rem;padding-left: 0;
}.itemboxt {border-left: none!important;
}
.menuNav .navBox .font {height: 100%;border-left: .01rem solid #fff;-webkit-box-sizing: border-box;box-sizing: border-box;padding-left: 0.8rem;position: relative;
}
.font  .item {position: relative;width:1.4rem;height: auto;
}.font  .active {width: 1.5rem;height: 120%;position: absolute;top: -1.6rem;left: calc(50% - .3rem);opacity: .6;
}/* 功能布局 */
.mapBox{width: 100%;height: 100%;position: absolute;z-index: 106;top: 0;left: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;
}
@-webkit-keyframes zoomOutUp {40% {opacity: 1;-webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0);transform: scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);animation-timing-function: cubic-bezier(.55,.055,.675,.19)}to {display: none;opacity: 0;-webkit-transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin: center bottom;transform-origin: center bottom;-webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);animation-timing-function: cubic-bezier(.175,.885,.32,1)!important}
}@keyframes zoomOutUp {40% {opacity: 1;-webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0);transform: scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);animation-timing-function: cubic-bezier(.55,.055,.675,.19)}to {opacity: 0;display: none;-webkit-transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin: center bottom;transform-origin: center bottom;-webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);animation-timing-function: cubic-bezier(.175,.885,.32,1)}
}.zoomOutUp {-webkit-animation-name: zoomOutUp;animation-name: zoomOutUp;display: none!important;
}@-webkit-keyframes zoomIn {0% {opacity: 0;-webkit-transform: scale3d(.3,.3,.3);transform: scale3d(.3,.3,.3)}50% {opacity: 1}
}@keyframes zoomIn {0% {opacity: 0;-webkit-transform: scale3d(.3,.3,.3);transform: scale3d(.3,.3,.3)}50% {opacity: 1}
}.zoomIn {-webkit-animation-name: zoomIn;animation-name: zoomIn;animation-fill-mode: forwards;
}.mapBox .map{width: 15.8rem;height: 24.22rem;
}
.mapBox .closeIcon{padding-top: 1.3rem;width: 5.6rem;height: 1.6rem;
}
/* 别墅概况 */
.modelBox {width: 100%;height: 100%;position: absolute;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;z-index: 106;
}
.modelBox .contentBox {width: 70%;height: auto;background: url(@/assets/kuang.png) no-repeat;background-size: 100% 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;font-size: .3rem;color: #fff;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 1.8rem 1.6rem .5rem 1.6rem;
}
.modelBox .contentBox .start {text-align: left;
}
.modelBox .contentBox .start .title {padding: 0 0 0.3rem;font-size: 1.2rem;
}
.modelBox .contentBox .start .name {font-size: 1rem;padding-bottom: 1.4rem;
}
.modelBox .contentBox .center .inforBox {display: -webkit-box;display: -ms-flexbox;display: flex;font-size: 0.9rem;
}
.modelBox .contentBox .center .inforBox .title{-webkit-box-flex: 0;-ms-flex: 0 0 4.2rem;flex: 0 0 4.2rem;text-align: justify;
}
.modelBox .contentBox .center .inforBox p{line-height: 1.42rem;
}
.modelBox .contentBox .center .inforBox .sub {padding-left: 0rem;text-align: left;
}
.modelBox .contentBox .center .inforBox p {line-height: 1.42rem;
}
#app p {margin: 0;font-family: fzfs;
}
.modelBox .contentBox .end .close{padding-top: 1.3rem;padding-bottom: 1.3rem;width: 5.4rem;height: 1.58rem;position: relative;left: 42%;-webkit-transform: translateX(-100%);transform: translateX(-100%);
}
</style>

App.vue

<template><!-- <img alt="Vue logo" src="./assets/logo.png"> --><!-- <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> --><BabylonOne></BabylonOne>
</template><script lang="ts">
import { Options, Vue } from 'vue-class-component';
import BabylonOne from './components/BabylonOne.vue';
@Options({components: {BabylonOne,},
})
export default class App extends Vue {}
</script><style>
@import url('./assets/css/reset.css');
html, body {width: 100%;height: 100%;
}
#app {width: 100%;height: 100%;font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}
::-webkit-scrollbar {width: 0 !important;
}
::-webkit-scrollbar {width: 0 !important;height: 0;
}
</style>