Advertisement
Void-voiD

Untitled

Aug 7th, 2020
152
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.37 KB | None | 0 0
  1. let scene, camera, renderer, width, height, radiusOfBoundCylinder = 0.1, controls;
  2.  
  3.  
  4. // изменение размеров окна сцены при изменении размеров окна браузера
  5. const resizeScene = () => {
  6. width = window.innerWidth * 0.8;
  7. height = window.innerHeight * 0.7;
  8. renderer.setViewport(0, 0, width, height);
  9. camera.aspect = width / height;
  10. camera.updateProjectionMatrix();
  11. }
  12.  
  13.  
  14. const initThreeJS = () => {
  15. // создание сцены, ее настройка
  16. scene = new THREE.Scene();
  17. width = window.innerWidth * 0.8;
  18. height = window.innerHeight * 0.7;
  19. camera = new THREE.PerspectiveCamera(90, width / height, 0.001, 25);
  20. renderer = new THREE.WebGLRenderer({canvas: glcanvas});
  21. renderer.setSize(width, height);
  22. renderer.render(scene, camera);
  23.  
  24. // задаем функцию отслеживания изменений размера
  25. window.onresize = resizeScene;
  26.  
  27. // управление камерой
  28. // w - вперед, s - назад
  29. // a - влево, d - вправо
  30. // q - вниз, e - вверх
  31. document.addEventListener('keydown', function(e) {
  32. let key = e.keyCode || e.which;
  33. console.log(camera.position);
  34. switch (key) {
  35. // w
  36. case 87:
  37. camera.position.z += 0.05;
  38. // s
  39. case 83:
  40. camera.position.z -= 0.05;
  41. // a
  42. case 65:
  43. camera.position.x += 0.05;
  44. // d
  45. case 68:
  46. camera.position.x -= 0.05;
  47. // q
  48. case 81:
  49. camera.position.y += 0.05;
  50. // e
  51. case 69:
  52. camera.position.y -= 0.05;
  53. }
  54. console.log(camera.position);
  55. renderer.render(scene, camera);
  56. console.log(camera.position);
  57. }, false);
  58. }
  59.  
  60.  
  61. const drawMoleculaStick = () => {
  62. let count = molecula.bonds.length;
  63. // определяем наибольшую z координату молекул для определения оптимального положения камеры
  64. let maxZ = -100;
  65. // цикл для отрисовки кадой связи молекулы
  66. for (let i = 0; i < count; i++) {
  67. // получение информации о молекулах, соединяемых текущей связью
  68. let currentBond = molecula.bonds[i];
  69. let startAtom = molecula.atoms[currentBond.atom1 - 1];
  70. let finishAtom = molecula.atoms[currentBond.atom2 - 1];
  71.  
  72. if (startAtom.coords[2] > maxZ) {
  73. maxZ = startAtom.coords[2];
  74. }
  75. if (finishAtom.coords[2] > maxZ) {
  76. maxZ = finishAtom.coords[2];
  77. }
  78.  
  79. // вычисление параметров цилиндра, изображающего связь между молекулами
  80. console.log(startAtom.coords[0], startAtom.coords[1], startAtom.coords[2]);
  81. console.log(finishAtom.coords[0], finishAtom.coords[1], finishAtom.coords[2]);
  82. let x = finishAtom.coords[0] - startAtom.coords[0],
  83. y = finishAtom.coords[1] - startAtom.coords[1],
  84. z = finishAtom.coords[2] - startAtom.coords[2];
  85. let cylinderHeight = Math.sqrt(x ** 2 + y ** 2 + z ** 2);
  86. let angleX = Math.acos(Math.abs(x) / cylinderHeight);
  87. let angleY = Math.acos(Math.abs(y) / cylinderHeight);
  88. let angleZ = Math.acos(Math.abs(z) / cylinderHeight);
  89.  
  90. // создание первой половины цилиндра (так как разные половинки разных цветов (по цвету атома, к которому они примыкают))
  91. let geometry1 = new THREE.CylinderGeometry(radiusOfBoundCylinder, radiusOfBoundCylinder,
  92. cylinderHeight / 2, 30, 1, true);
  93. let material1 = new THREE.MeshBasicMaterial({color: startAtom.atom.color});
  94. let cylinder1 = new THREE.Mesh(geometry1, material1);
  95. cylinder1.position.set(startAtom.coords[0], startAtom.coords[1], startAtom.coords[2]);
  96. cylinder1.rotation.set(angleX, angleY, angleZ);
  97. scene.add(cylinder1);
  98.  
  99. // вторая половинка
  100. let geometry2 = new THREE.CylinderGeometry(radiusOfBoundCylinder, radiusOfBoundCylinder,
  101. cylinderHeight / 2, 30, 1, true);
  102. let material2 = new THREE.MeshBasicMaterial({color: finishAtom.atom.color});
  103. let cylinder2 = new THREE.Mesh(geometry2, material2);
  104. cylinder2.position.set(startAtom.coords[0] + x / 2, startAtom.coords[1] + y / 2, startAtom.coords[2] + z / 2);
  105. cylinder1.rotation.set(angleX, angleY, angleZ);
  106. scene.add(cylinder2);
  107. }
  108. // отрисовка сцены
  109. camera.position.z = maxZ + 0.5;
  110. renderer.render(scene, camera);
  111. }
  112.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement