Отрисовка с помощью Three.js, загрузка моделей GLTF и текстур PNG | Rendering with Three.js, loading of GLTF models and PNG textures
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

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