threepipe
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Interaction Prompt Plugin</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <!-- Import maps polyfill -->
  8. <!-- Remove this when import maps will be widely supported -->
  9. <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
  10. <script type="importmap">
  11. {
  12. "imports": {
  13. "threepipe": "./../../dist/index.mjs",
  14. "@threepipe/plugin-tweakpane": "./../../plugins/tweakpane/dist/index.mjs"
  15. }
  16. }
  17. </script>
  18. <style id="example-style">
  19. html, body, #canvas-container, #mcanvas {
  20. width: 100%;
  21. height: 100%;
  22. margin: 0;
  23. overflow: hidden;
  24. }
  25. </style>
  26. <script type="module" src="../examples-utils/global-loading.mjs"></script>
  27. <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
  28. <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
  29. </head>
  30. <body>
  31. <div id="canvas-container">
  32. <canvas id="mcanvas"></canvas>
  33. <div class="line"></div>
  34. <div class="line2"></div>
  35. <style>
  36. .line, .line2{
  37. position: absolute; z-index: 100;
  38. background-color: black;
  39. }
  40. .line{
  41. width: 1px; height: 100%;
  42. top: 0; left: calc(50% - 0.5px);
  43. }
  44. .line2{
  45. height: 1px; width: 100%;
  46. left: 0; top: calc(50% - 0.5px);
  47. }
  48. </style>
  49. </div>
  50. </body>