Отрисовка с помощью 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.

140 Zeilen
4.0KB

  1. // // // //
  2. ОтслеживатьНажатияВРисователе = мир =>
  3. {
  4. мир.отслеживатьНажатияВРисователе = true;
  5. уведомитьОНажатии = (событие) =>
  6. {
  7. if (!мир.отслеживатьНажатияВРисователе)
  8. {
  9. return;
  10. }
  11. var позиция = new THREE.Vector2();
  12. var ширина = window.innerWidth * мир.масштаб;
  13. var высота = window.innerHeight * мир.масштаб;
  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. var ширина = window.innerWidth * мир.масштаб;
  51. var высота = window.innerHeight * мир.масштаб;
  52. мир.камера.aspect = ширина / высота;
  53. мир.камера.updateProjectionMatrix();
  54. мир.рисователь.setSize(ширина, высота);
  55. var размер = мир.масштаб * 100;
  56. мир.канва.style = `
  57. position: absolute;
  58. left: 0;
  59. top: 0;
  60. max-width: ${размер}%;
  61. max-height: ${размер}%;
  62. width: ${размер}%;
  63. height: ${размер}%;
  64. `;
  65. };
  66. // // // //
  67. ОтслеживатьИзменениеРазмераОкнаБраузера = мир =>
  68. {
  69. window.addEventListener(
  70. "resize",
  71. function() {
  72. мир.уведомить("изменили размер окна браузера");
  73. }
  74. );
  75. };
  76. // // // //
  77. НастроитьРисователя = мир =>
  78. {
  79. мир.сцена = new THREE.Scene();
  80. мир.камера = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);
  81. мир.ловец = new THREE.Raycaster();
  82. мир.модельер = new THREE.GLTFLoader();
  83. мир.текстурщик = new THREE.TextureLoader();
  84. мир.масштаб = 1;
  85. мир.канва = document.createElement("canvas");
  86. document.body.prepend(мир.канва);
  87. мир.рисователь = new THREE.WebGLRenderer({canvas: мир.канва, antialias: true});
  88. };
  89. // // // //
  90. УстановитьBase64JS = мир =>
  91. {
  92. var модуль = мир.модули.модульПоУказателю(УКАЗАТЕЛЬ_ЭТОГО_МОДУЛЯ);
  93. var содержимое = модуль.содержимое["/base64js.min.js"];
  94. eval(содержимое);
  95. мир.база64ИзДвоичногоМассива = base64js.fromByteArray;
  96. мир.база64ВДвоичныйМассив = base64js.toByteArray;
  97. };
  98. // // // //
  99. УстановитьThreeJS = мир =>
  100. {
  101. var модуль = мир.модули.модульПоУказателю(УКАЗАТЕЛЬ_ЭТОГО_МОДУЛЯ);
  102. var код = модуль.содержимое["/three.js"];
  103. var скрипт = document.createElement("script");
  104. скрипт.innerHTML = код;
  105. document.body.appendChild(скрипт);
  106. };