Отрисовка с помощью Three.js, загрузка моделей GLTF и текстур PNG | Rendering with Three.js, loading of GLTF models and PNG textures
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

151 Zeilen
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. };