Автор оригинала: Victor Gerard Temprano.
Я скажу вам прямо с летучей мыши: делая Периодическая таблица Виктора было супер весело. Но также тяжело. Любовь такая.
Хорошо, что я принимал химию и исчисление, и что я вторженный и JavaScript Geek. Предупреждение : Этот пост содержит некоторые очень научно-популярные вещи, если вы не догадались от названия.
Я собираюсь сломать процесс создания сложного 3D-зрителя, как это в Триес Отказ Это будет с вида птицы – я собираюсь избежать кода, в основном, по крайней мере,. Слишком сложно соответствовать всем этому в один пост. Иди посмотри на источник Если ты такой человек.
Но если вы хотите тренировки или код TrieJS или код из этого проекта … просто оставьте мне комментарий. Я определенно сделаю сообщение, если вы сделаете.
Я ботаник
Мне 30 лет, у меня есть магистр (в религиозных исследованиях, из всех вещей), и я веб-разработчик, но в прошлом году я получил желание принять некоторые научные занятия. Я живу прямо рядом с общественным колледжем, поэтому я пошел и взял первый год Chem, Bio и Calc. Это было действительно весело. Да, исчисление это весело, я сказал это. Как только вы начнете становиться немного старше, приятно найти новый способ посмотреть на мир: И для меня, это была математика.
Химия действительно понравилась мне, и я люблю думать о атомах и электронах. Это чертовски нереально, что наш мир, все, что из них сделано из них. Я хотел бы лучше визуализировать атом, и я не мог найти никаких действительно хороших модельных зрителей в Интернете. Были некоторые Фотографии в наших учебниках и Несколько хороших 3D периодические столы , но они не были то, что я хотел. Они помогли, хотя – особенно Этот орбитальный зритель Отказ
То, что я действительно хотел увидеть, было не только ядра и протоны/нейтроны, но электроны … Да, электроны! Спасибо случайно на своих орбиталях, в трехмерной модели, которая была полностью интерактивной. Это то, что я хотел. И я собирался построить это.
Я построил вещи, используя WebGL в TrieJS, прежде чем, ничего сумасшедшего, но у меня было чувство, что я мог бы попробовать его и посмотреть, как далеко я мог бы получить. Закатал мои рукава. Работа в Therjs не шутка, мои друзья, верь мне.
Начать кодирование
Существует процесс для создания любого веб-приложения или нового проекта, особенно если это сложно. Думайте с высокого уровня сначала. Что вам действительно нужно на самом деле начать попасть где-то?
Для меня водород был отправной точкой. Я знаю, что 1S Orbital – это просто сфера, поэтому мне действительно нужно было сделать несколько разных сфер в трижды: тот, который представлял собой ядро, и более крупный полупрозрачный, который представлял орбиталь. Легко, верно?
То, что вы думаете, просто не всегда просто – это, безусловно, верно в TrieJS. Размещая объект в центре экрана, правильно освещая сцену и позволяя увеличить масштабирование и вращаться вокруг … Они не так просто, как они могут показаться сначала. Но в конце концов я получил его с помощью многих онлайн-учебников. Добавление текста также удивительно трудно, как новичок.
Одной из проблем с THREJS – это то, что это очень зависит от версии, и у него много, много версий. Учебники, которые вы найдете, могут быть в любой версии, и вы не представляете, если вы можете адаптировать код или, если он никогда не будет работать. Есть больше проб и ошибок, чем почти любые другие рамки или библиотеки, которую я использовал.
Во всяком случае, я в конечном итоге получил освещенную сцену, и мои сферы. Это было классно. Но я сразу хотел сделать больше. Гелий Далее – тогда более сложные P-орбитали.
Увеличение сложности
Я должен был адаптировать некоторые из моих растущих знаний исчисления, чтобы помочь мне рассчитать возможные позиции электрона, случайно появляющихся и исчезающих внутри орбитали. Моя формула выглядит сложным в коде, но действительно просто:
var shellRadius = Math.abs((shellConstraints.x2-shellConstraints.x1)/2);
var angleTheta = Math.acos(Math.abs(xPosition)/shellRadius);
var maxValues = Math.sin(angleTheta);
if(Math.abs(yPosition)>maxValues) {
yPosition = (maxValues * Math.sign(yPosition)) + shellConstraints.offset.y;
}
if(Math.abs(zPosition)>maxValues) {
zPosition = (maxValues * Math.sign(zPosition)) + shellConstraints.offset.z;
}
По сути, я настроил электрон для случайного пробега через функцию, определяющую переменные положения в соответствии с радиусом соответствующего орбиталя. Это было немного сложно, но когда-то я получил его отлично от времени.
Существует также много насильственного позиционирования, происходящих на орбиталях, чтобы иметь их воздушные шар и растягиваться в правильных направлениях. Мне пришлось экспериментировать и много играть со шкалой и положением, но посмотрите на совершенно великолепные атомы, которые оказались созданными!
В какой-то момент я начал тщательно разделить мои файлы в серии: атомная сцена, атомные функции, интерфейс и т. Д. Я держал свою действительно математическую и сложную работу в функциях и переместил сцену, освещение и показывать/скрывать работу на этапе.
Я также должен был построить интерфейс в конце концов и сделать его работать с переключением и очисткой сцены. Я использовал jQuery, просто чтобы вызвать события, необходимые для показать и скрывать элементы. Это было вообще нелегко постоянно убирать и повторно пересмотреть свой код, чтобы попытаться сделать его управляемым и масштабируемым для более крупных и больших атомов. Но на данный момент я умирал, чтобы поделиться этим с кем-то, и мне нужно было работать!
Где сейчас?
Я поделился сайтом с моим учителем химии, и многом к моим смущению (или восторге?) Она поделилась этим с классом. Работал, ошибка бесплатно – что было довольно мило. Люди были впечатлены, в некотором роде жалость.
Дальнейшее развитие этого? Я вообще не продвинул это. Я не так хорош в маркетинге. Я думаю, что это может быть превращено в более широкий учебный инструмент, если я хотел отправить по электронной почте со стороны профессоров и прочее. У тебя есть идеи?
Но и на данный момент я не уверен, насколько WebGL может надежно принимать более сложные орбитали. Я мог бы бросить некоторые более ранние раковины или разрешать только внешние раковины, но я также немного менее заинтересован в этом проекте, чем раньше. Но мой компьютер определенно становится горячим, как только снаряды становятся толстыми на этих более тяжелых элементах.
Я пытался просто дать вам очень быстрый взгляд на то, как я прошел сложный проект TrieJS, как это. Я хотел бы, чтобы я мог получить больше в кишку Кодекса, но, честно говоря, пройти бегемот. Я буду, хотя – если вы хотите узнать, как сделать что-то вроде этого самого себя!
Я всегда буду огромным ботаником. Свяжитесь со мной о ваших божественных проектах и давайте сделаем что-то вместе!