sdk-vr.html 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>Document</title>
  7. <style>
  8. html,
  9. body {
  10. width: 100%;
  11. height: 100%;
  12. margin: 0;
  13. overflow: hidden;
  14. }
  15. .scene {
  16. width: 100%;
  17. height: 100%;
  18. }
  19. #toolbar {
  20. position: absolute;
  21. left: 50%;
  22. top: 0;
  23. z-index: 10000;
  24. }
  25. [xui_tags_view] .tag-body {
  26. position: absolute;
  27. left: 50%;
  28. bottom: 50px;
  29. width: 100px;
  30. height: 100px;
  31. background-color: bisque;
  32. transform: translateX(-50%) scale(0);
  33. transform-origin: bottom;
  34. transition: all 0.3s cubic-bezier(0.35, 0.32, 0.65, 0.63);
  35. pointer-events: none;
  36. }
  37. [xui_tags_view] .tag-body.show {
  38. transform: translateX(-50%) scale(1);
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <div id="scene" class="scene"></div>
  44. <div id="toolbar">
  45. <button onclick="vr">VR</button>
  46. </div>
  47. <script src="./js/vconsole.js"></script>
  48. <script>
  49. new VConsole()
  50. </script>
  51. <script src="../dist/sdk/kankan-sdk-deps.js"></script>
  52. <script src="../dist/sdk/kankan-sdk.js"></script>
  53. <script>
  54. var kankan = new KanKan({
  55. dom: '#scene',
  56. num: 'jp-WsFATf66F',
  57. vr: {
  58. markerHeight: 1,
  59. },
  60. server: 'https://www.4dkankan.jp/',
  61. resource: 'https://oss.4dkankan.jp/',
  62. })
  63. kankan.use('Controls')
  64. kankan.render()
  65. function vr(){
  66. kankan.Camera.vr()
  67. }
  68. </script>
  69. </body>
  70. </html>