webgl_rxdz_vr.html 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!--
  2. * @Author: caodongdong caodongdoong@gmail.com
  3. * @Date: 2023-05-17 15:46:34
  4. * @LastEditors: caodongdong caodongdoong@gmail.com
  5. * @LastEditTime: 2023-06-30 16:20:04
  6. * @FilePath: \h5-uniApp-miniprogrgm\webgl\pages\webgl_rxdz\webgl_rxdz.html
  7. * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  8. -->
  9. <div class="main-view">
  10. <!-- <mynavbar :barData='navbar' @navbarBackCallback="navbarBackClk" /> -->
  11. <!-- 主要操作视图 -->
  12. <!-- <viewShell pageType="2" :spaceObj="curSpaceObj" @hideOrShowActor="hideOrShowActor"></viewShell> -->
  13. <!-- <my-loading ref="myLoading" :myLoadingStatus="myLoadingStatus"></my-loading>
  14. <div id="status" style="position:fixed;top:100px;left:30px;cursor:pointer;opacity:0.9;z-index:10000">
  15. <canvas id="FPS" type="2d" style="width:80px;height:48px"></canvas>
  16. <canvas id="MS" type="2d" style="width:80px;height:48px"></canvas>
  17. </div> -->
  18. <div class="mapDiv" ref="webgl">
  19. <div class="voice-btn rows justify-center" @click="updateMuted">
  20. <span :class="[muted?'iconfont icon-jingyin':'iconfont icon-yinliang']" style="color: #ffffff;"></span>
  21. </div>
  22. </div>
  23. <canvas id="canvas_webgl" type="webgl" ref="glcanvas"
  24. width="100vw"
  25. :style="{'height':canvasHeight+'px'}">
  26. </canvas>
  27. <div class="slide-mask"></div>
  28. <!-- 数字人大小滚动条 -->
  29. <div class="slide-view columns rows-between">
  30. <div class="slide-tips">数字人<br>大小</div>
  31. <div class="slide-word">放大</div>
  32. <el-slider
  33. class="rangeview"
  34. v-model="rangeValue"
  35. vertical
  36. :min="10"
  37. :max="100"
  38. :show-tooltip="false"
  39. @change="rangeChange"
  40. >
  41. </el-slider>
  42. <div class="slide-word">缩小</div>
  43. </div>
  44. <div class="guide-mask" id="guide-mask" v-if="!isIOS">
  45. <img src="https://dm.static.elab-plus.com/guide-mask.png">
  46. </div>
  47. <!-- AI数字人组件 -->
  48. <viewAI ref="viewAI" @aiPeopleChange="aiPeopleChange" style="z-index: 13;"></viewAI>
  49. <!-- 生成截屏的画布对象 -->
  50. <canvas id="canvas" type="2d" :style="{'height':canvasHeight+'px','top':'100vh'}"></canvas>
  51. <video id="myvideo" style="display: none;" loop :muted="muted"
  52. autoplay controls="false" ></video>
  53. </div>