Отрисовка с помощью Three.js, загрузка моделей GLTF и текстур PNG | Rendering with Three.js, loading of GLTF models and PNG textures
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.

151 lines
4.5KB

  1. // // // //
  2. ОтслеживатьНажатияВРисователе = мир =>
  3. {
  4. мир.отслеживатьНажатияВРисователе = true;
  5. уведомитьОНажатии = (событие) =>
  6. {
  7. if (!мир.отслеживатьНажатияВРисователе)
  8. {
  9. return;
  10. }
  11. var позиция = new THREE.Vector2();
  12. var ширина = мир.ширинаОкна;
  13. var высота = мир.высотаОкна;
  14. позиция.x = ((событие.clientX + window.pageXOffset) / ширина ) * 2 - 1;
  15. позиция.y = - ((событие.clientY + window.pageYOffset) / высота) * 2 + 1;
  16. мир.позицияНажатияВРисователе = позиция;
  17. мир.уведомить("нажатие в рисователе");
  18. };
  19. // Палец.
  20. window.addEventListener(
  21. "touchstart",
  22. function(событие) {
  23. уведомитьОНажатии(событие.touches[0]);
  24. }
  25. );
  26. // Мышь.
  27. window.addEventListener(
  28. "click",
  29. function(событие) {
  30. уведомитьОНажатии(событие);
  31. }
  32. );
  33. // iOS.
  34. // https://stackoverflow.com/a/31459240/3404710
  35. мир.рисователь.domElement.style.cursor = "pointer";
  36. };
  37. // // // //
  38. ЗапуститьРисователя = мир =>
  39. {
  40. function отрисовать(время)
  41. {
  42. requestAnimationFrame(отрисовать);
  43. мир.рисователь.render(мир.сцена, мир.камера);
  44. мир.времяРисования = время;
  45. мир.уведомить("отрисовали кадр");
  46. }
  47. отрисовать();
  48. };
  49. // // // //
  50. ПрименитьРазмерРисователя = мир =>
  51. {
  52. мир.камера.aspect = мир.ширинаОкна / мир.высотаОкна;
  53. мир.камера.updateProjectionMatrix();
  54. var чёткостьApple = 2;
  55. мир.рисователь.setSize(мир.ширинаОкна * чёткостьApple, мир.высотаОкна * чёткостьApple);
  56. мир.канва.style = `
  57. position: absolute;
  58. left: 0;
  59. top: 0;
  60. width: ${мир.ширинаОкнаПроц}%;
  61. max-width: ${мир.ширинаОкнаПроц}%;
  62. height: ${мир.высотаОкнаПроц}%;
  63. max-height: ${мир.высотаОкнаПроц}%;
  64. `;
  65. };
  66. // // // //
  67. ИзменитьРазмерРисователя = мир =>
  68. {
  69. мир.ширинаОкна = window.innerWidth * мир.масштаб;
  70. мир.высотаОкна = window.innerHeight * мир.масштаб;
  71. мир.ширинаОкнаПроц = мир.масштаб * 100;
  72. мир.высотаОкнаПроц = мир.масштаб * 100;
  73. };
  74. // // // //
  75. ОтслеживатьИзменениеРазмераОкнаБраузера = мир =>
  76. {
  77. window.addEventListener(
  78. "resize",
  79. function() {
  80. мир.уведомить("изменили размер окна браузера");
  81. }
  82. );
  83. };
  84. // // // //
  85. НастроитьРисователя = мир =>
  86. {
  87. мир.сцена = new THREE.Scene();
  88. мир.камера = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);
  89. мир.ловец = new THREE.Raycaster();
  90. мир.модельер = new THREE.GLTFLoader();
  91. мир.текстурщик = new THREE.TextureLoader();
  92. мир.масштаб = 1;
  93. мир.канва = document.createElement("canvas");
  94. document.body.prepend(мир.канва);
  95. мир.рисователь = new THREE.WebGLRenderer({canvas: мир.канва, antialias: true});
  96. };
  97. // // // //
  98. УстановитьBase64JS = мир =>
  99. {
  100. var модуль = мир.модули.модульПоУказателю(УКАЗАТЕЛЬ_ЭТОГО_МОДУЛЯ);
  101. var содержимое = модуль.содержимое["/base64js.min.js"];
  102. eval(содержимое);
  103. мир.база64ИзДвоичногоМассива = base64js.fromByteArray;
  104. мир.база64ВДвоичныйМассив = base64js.toByteArray;
  105. };
  106. // // // //
  107. УстановитьThreeJS = мир =>
  108. {
  109. var модуль = мир.модули.модульПоУказателю(УКАЗАТЕЛЬ_ЭТОГО_МОДУЛЯ);
  110. var код = модуль.содержимое["/three.js"];
  111. var скрипт = document.createElement("script");
  112. скрипт.innerHTML = код;
  113. document.body.appendChild(скрипт);
  114. };