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

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