Привет.
Я просто хочу шаг за шагом сделать пример таблицы Менделеева в документации three.js.
Прежде всего, что такое three.js?
Three.js - это библиотека для простого использования WebGL, отображающая объекты внутри нашего браузера. Вы можете много прочитать об этом с помощью небольшого поиска в Google.
Вы можете увидеть пример, который мы хотим сделать здесь:
Https://threejs.org/examples/css3d_periodictable.html
Давай займемся этим.
Необходимые файлы, папки, библиотеки
Прежде всего, нам нужно создать необходимые файлы, папки и загрузить необходимые библиотеки.
Файлы:
1- index.html
2- main.js
Папки:
1- библиотека
2- библиотека / элементы управления
3- библиотеки / рендереры
Библиотеки:
1- Загрузите три основных файла js:
Https://github.com/mrdoob/three.js/raw/master/build/three.min.js
Затем скопируйте его в папку lib
2- Загрузите файл библиотеки анимации:
Https://github.com/mrdoob/three.js/raw/master/examples/js/libs/tween.min.js
Затем скопируйте его в папку lib
3- Загрузите файл TrackballControls:
Https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js
Затем скопируйте его в lib / controls
4 - Загрузите файл CSS3DRenderer:
Https://github.com/mrdoob/three.js/raw/master/examples/js/renderers/CSS3DRenderer.js
Затем скопируйте его в lib / controls
Запуск файлов и среды
1- index.html
Это наша HTML-часть, которая довольно проста и мала.
Эта часть просто подключает наши коды javascript к HTML и загружает библиотеки внутри папки lib в проект и создает пару кнопок для управления таблицей.
Так что просто скопируйте и вставьте эти строки кода в index.html:
<!DOCTYPE html>
<html>
<head>
<title>Three.js Periodic Table Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
html, body {
height: 100%;
}
body {
background-color: #000000;
margin: 0;
font-family: Helvetica, sans-serif;;
overflow: hidden;
}
a {
color: #ffffff;
}
#menu {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
.element {
width: 120px;
height: 160px;
box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.5);
border: 1px solid rgba(127, 255, 255, 0.25);
text-align: center;
cursor: default;
}
.element:hover {
box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.75);
border: 1px solid rgba(127, 255, 255, 0.75);
}
.element .number {
position: absolute;
top: 20px;
right: 20px;
font-size: 12px;
color: rgba(127, 255, 255, 0.75);
}
.element .symbol {
position: absolute;
top: 40px;
left: 0px;
right: 0px;
font-size: 60px;
font-weight: bold;
color: rgba(255, 255, 255, 0.75);
text-shadow: 0 0 10px rgba(0, 255, 255, 0.95);
}
.element .details {
position: absolute;
bottom: 15px;
left: 0px;
right: 0px;
font-size: 12px;
color: rgba(127, 255, 255, 0.75);
}
button {
color: rgba(127, 255, 255, 0.75);
background: transparent;
outline: 1px solid rgba(127, 255, 255, 0.75);
border: 0px;
padding: 5px 10px;
cursor: pointer;
}
button:hover {
background-color: rgba(0, 255, 255, 0.5);
}
button:active {
color: #000000;
background-color: rgba(0, 255, 255, 0.75);
}
</style>
</head>
<body>
<script src="./lib/three.js"></script>
<script src="./lib/Tween.min.js"></script>
<script src="./lib/controls/TrackballControls.js"></script>
<script src="./lib/renderers/CSS3DRenderer.js"></script>
<div id="container"></div>
<div id="menu">
<button id="table">TABLE</button>
<button id="sphere">SPHERE</button>
<button id="helix">HELIX</button>
<button id="grid">GRID</button>
</div>
<script src="./main.js"></script>
</body>
</html>
Внутри этого тега будет загружен материал Three.js:
<div id="container"></div>
Если мы откроем index.html в нашем браузере, мы увидим черный экран с 4 неоновыми кнопками, примерно так:
2- main.js
В main.js добавим
Массив периодической таблицы для выборки данных
Функция инициализации для запуска камеры, сцены, объектов и некоторых других вещей внутри нее.
Функция анимации, которая на самом деле представляет собой цикл для рендеринга нашего проекта со скоростью 60 кадров в секунду, и мы сможем увидеть изменения.
Итак, наш файл выглядит так:
var table = [
"H", "Hydrogen", "1.00794", 1, 1,
"He", "Helium", "4.002602", 18, 1,
"Li", "Lithium", "6.941", 1, 2,
"Be", "Beryllium", "9.012182", 2, 2,
"B", "Boron", "10.811", 13, 2,
"C", "Carbon", "12.0107", 14, 2,
"N", "Nitrogen", "14.0067", 15, 2,
"O", "Oxygen", "15.9994", 16, 2,
"F", "Fluorine", "18.9984032", 17, 2,
"Ne", "Neon", "20.1797", 18, 2,
"Na", "Sodium", "22.98976...", 1, 3,
"Mg", "Magnesium", "24.305", 2, 3,
"Al", "Aluminium", "26.9815386", 13, 3,
"Si", "Silicon", "28.0855", 14, 3,
"P", "Phosphorus", "30.973762", 15, 3,
"S", "Sulfur", "32.065", 16, 3,
"Cl", "Chlorine", "35.453", 17, 3,
"Ar", "Argon", "39.948", 18, 3,
"K", "Potassium", "39.948", 1, 4,
"Ca", "Calcium", "40.078", 2, 4,
"Sc", "Scandium", "44.955912", 3, 4,
"Ti", "Titanium", "47.867", 4, 4,
"V", "Vanadium", "50.9415", 5, 4,
"Cr", "Chromium", "51.9961", 6, 4,
"Mn", "Manganese", "54.938045", 7, 4,
"Fe", "Iron", "55.845", 8, 4,
"Co", "Cobalt", "58.933195", 9, 4,
"Ni", "Nickel", "58.6934", 10, 4,
"Cu", "Copper", "63.546", 11, 4,
"Zn", "Zinc", "65.38", 12, 4,
"Ga", "Gallium", "69.723", 13, 4,
"Ge", "Germanium", "72.63", 14, 4,
"As", "Arsenic", "74.9216", 15, 4,
"Se", "Selenium", "78.96", 16, 4,
"Br", "Bromine", "79.904", 17, 4,
"Kr", "Krypton", "83.798", 18, 4,
"Rb", "Rubidium", "85.4678", 1, 5,
"Sr", "Strontium", "87.62", 2, 5,
"Y", "Yttrium", "88.90585", 3, 5,
"Zr", "Zirconium", "91.224", 4, 5,
"Nb", "Niobium", "92.90628", 5, 5,
"Mo", "Molybdenum", "95.96", 6, 5,
"Tc", "Technetium", "(98)", 7, 5,
"Ru", "Ruthenium", "101.07", 8, 5,
"Rh", "Rhodium", "102.9055", 9, 5,
"Pd", "Palladium", "106.42", 10, 5,
"Ag", "Silver", "107.8682", 11, 5,
"Cd", "Cadmium", "112.411", 12, 5,
"In", "Indium", "114.818", 13, 5,
"Sn", "Tin", "118.71", 14, 5,
"Sb", "Antimony", "121.76", 15, 5,
"Te", "Tellurium", "127.6", 16, 5,
"I", "Iodine", "126.90447", 17, 5,
"Xe", "Xenon", "131.293", 18, 5,
"Cs", "Caesium", "132.9054", 1, 6,
"Ba", "Barium", "132.9054", 2, 6,
"La", "Lanthanum", "138.90547", 4, 9,
"Ce", "Cerium", "140.116", 5, 9,
"Pr", "Praseodymium", "140.90765", 6, 9,
"Nd", "Neodymium", "144.242", 7, 9,
"Pm", "Promethium", "(145)", 8, 9,
"Sm", "Samarium", "150.36", 9, 9,
"Eu", "Europium", "151.964", 10, 9,
"Gd", "Gadolinium", "157.25", 11, 9,
"Tb", "Terbium", "158.92535", 12, 9,
"Dy", "Dysprosium", "162.5", 13, 9,
"Ho", "Holmium", "164.93032", 14, 9,
"Er", "Erbium", "167.259", 15, 9,
"Tm", "Thulium", "168.93421", 16, 9,
"Yb", "Ytterbium", "173.054", 17, 9,
"Lu", "Lutetium", "174.9668", 18, 9,
"Hf", "Hafnium", "178.49", 4, 6,
"Ta", "Tantalum", "180.94788", 5, 6,
"W", "Tungsten", "183.84", 6, 6,
"Re", "Rhenium", "186.207", 7, 6,
"Os", "Osmium", "190.23", 8, 6,
"Ir", "Iridium", "192.217", 9, 6,
"Pt", "Platinum", "195.084", 10, 6,
"Au", "Gold", "196.966569", 11, 6,
"Hg", "Mercury", "200.59", 12, 6,
"Tl", "Thallium", "204.3833", 13, 6,
"Pb", "Lead", "207.2", 14, 6,
"Bi", "Bismuth", "208.9804", 15, 6,
"Po", "Polonium", "(209)", 16, 6,
"At", "Astatine", "(210)", 17, 6,
"Rn", "Radon", "(222)", 18, 6,
"Fr", "Francium", "(223)", 1, 7,
"Ra", "Radium", "(226)", 2, 7,
"Ac", "Actinium", "(227)", 4, 10,
"Th", "Thorium", "232.03806", 5, 10,
"Pa", "Protactinium", "231.0588", 6, 10,
"U", "Uranium", "238.02891", 7, 10,
"Np", "Neptunium", "(237)", 8, 10,
"Pu", "Plutonium", "(244)", 9, 10,
"Am", "Americium", "(243)", 10, 10,
"Cm", "Curium", "(247)", 11, 10,
"Bk", "Berkelium", "(247)", 12, 10,
"Cf", "Californium", "(251)", 13, 10,
"Es", "Einstenium", "(252)", 14, 10,
"Fm", "Fermium", "(257)", 15, 10,
"Md", "Mendelevium", "(258)", 16, 10,
"No", "Nobelium", "(259)", 17, 10,
"Lr", "Lawrencium", "(262)", 18, 10,
"Rf", "Rutherfordium", "(267)", 4, 7,
"Db", "Dubnium", "(268)", 5, 7,
"Sg", "Seaborgium", "(271)", 6, 7,
"Bh", "Bohrium", "(272)", 7, 7,
"Hs", "Hassium", "(270)", 8, 7,
"Mt", "Meitnerium", "(276)", 9, 7,
"Ds", "Darmstadium", "(281)", 10, 7,
"Rg", "Roentgenium", "(280)", 11, 7,
"Cn", "Copernicium", "(285)", 12, 7,
"Nh", "Nihonium", "(286)", 13, 7,
"Fl", "Flerovium", "(289)", 14, 7,
"Mc", "Moscovium", "(290)", 15, 7,
"Lv", "Livermorium", "(293)", 16, 7,
"Ts", "Tennessine", "(294)", 17, 7,
"Og", "Oganesson", "(294)", 18, 7
];
init();
animate();
function init() {
}
function animate() {
}
Итак, в конце этого шага мы готовы приступить к основной работе.
Камера, Сцена, Рендерер
Нам нужно запустить базовые инструменты three.js, чтобы иметь возможность видеть вещи внутри нашего окна.
1- Камера
На самом деле камера - это наши глаза в среде three.js, без камеры мы ничего не видим.
Итак, добавьте переменную камеры после переменной таблицы, чтобы иметь возможность использовать ее в других функциях:
var camera;
Затем создайте новый экземпляр перспективной камеры внутри функции init:
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
Перспективная камера получает 5 параметров (поле зрения, соотношение сторон, близко, далеко).
Подробнее об этом читайте в документации three.js:
Когда мы создаем объект внутри three.js, объект будет создан с координатами 0,0,0, поэтому с нашей камерой мы ничего не увидим.
Чтобы увидеть объекты, нам нужно задать ему позицию, которая в нашем случае z = 3000.
Так что добавьте эту строку прямо под инициализацией камеры внутри функции init.
Итак, наша функция инициализации будет выглядеть так.
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.z = 3000;
2- Сцена
Сцена на самом деле представляет собой пространство, в которое мы можем добавлять объекты и камеру.
Добавьте переменную сцены после переменной камеры, чтобы использовать ее в других функциях примерно так:
var camera,scene;
Затем добавьте эту строку в функцию init, чтобы получить новый экземпляр класса сцены:
scene = new THREE.Scene();
Теперь наш файл main.js выглядит так:
var table = [
// just the Table array at the first of article
];
var camera,scene;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 3000;
scene = new THREE.Scene();
}
function animate() {
}
3- Обработчик
Renderer загружает камеру и сцену внутри нашего HTML-тега.
В нашем случае это CSS3DRenderer, о котором вы можете прочитать по этой ссылке:
Нам нужно добавить переменную рендерера после переменных камеры и сцены, чтобы иметь возможность использовать ее внутри других функций:
var camera,scene,renderer;
Затем нам нужно добавить эти строки в функцию инициализации:
renderer = new THREE.CSS3DRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.getElementById( 'container' ).appendChild( renderer.domElement );
В первой строке мы получаем новый экземпляр класса CSS3DRenderer.
Во второй строке мы устанавливаем для нее размер.
В третьей строке мы добавляем средство визуализации к тегу html с идентификатором «контейнера».
Затем нам нужно добавить функцию с именем render, чтобы загрузить нашу сцену и камеру в средство визуализации:
function render() {
renderer.render( scene, camera );
}
Теперь нам нужно добавить функцию с именем onWindowResize:
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
Эта функция будет вызываться каждый раз при изменении размера окна.
Затем нам нужно указать средство визуализации и размер камеры, поэтому, когда мы изменяем размер окна, размер средства визуализации будет изменен, чтобы оставаться в пределах окна.
Кроме того, эта функция будет вызываться при первом запуске с использованием этой строки:
window.addEventListener( 'resize', onWindowResize, false );
Добавьте эту строку в конец функции инициализации.
Итак, он вызовет функцию рендеринга.
Теперь добавьте эту строку внутри функции анимации, чтобы анимировать наш проект вместо статического изображения:
requestAnimationFrame( animate );
Теперь наш файл main.js выглядит так:
var table = [
// just the Table array at the first of article
];
var camera,scene,renderer;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 3000;
scene = new THREE.Scene();
renderer = new THREE.CSS3DRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.getElementById( 'container' ).appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function render() {
renderer.render( scene, camera );
}
function animate() {
requestAnimationFrame( animate );
}
На этом этапе мы добавили три основных элемента three.js в наш файл main.js.
Теперь наша сцена пуста, и мы по-прежнему ничего не видим, кроме черного экрана с 4 кнопками.
Итак, давайте добавим объекты внутрь нашей сцены.
Добавление объектов
В нашем случае нам нужно преобразовать элементы периодической таблицы в переменной в объекты, а затем добавить их в массив, называемый объектами со случайными позициями.
Затем мы добавим их в поле таблицы внутри переменной целей с их правильными позициями внутри периодической таблицы.
Во-первых, мы добавим необходимые переменные после переменных камеры, сцены, рендерера, чтобы использовать их внутри функций:
var objects = [];
var targets = { table: [], sphere: [], helix: [], grid: [] };
Затем создайте функцию с именем «simpleObjectsLayout»:
function simpleObjectsLayout() {
for ( var i = 0; i < table.length; i += 5 ) {
var element = document.createElement( 'div' );
element.className = 'element';
element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')';
var number = document.createElement( 'div' );
number.className = 'number';
number.textContent = ( i / 5 ) + 1;
element.appendChild( number );
var symbol = document.createElement( 'div' );
symbol.className = 'symbol';
symbol.textContent = table[ i ];
element.appendChild( symbol );
var details = document.createElement( 'div' );
details.className = 'details';
details.innerHTML = table[ i + 1 ] + '<br>' + table[ i + 2 ];
element.appendChild( details );
var object = new THREE.CSS3DObject( element );
object.position.x = Math.random() * 4000 - 2000;
object.position.y = Math.random() * 4000 - 2000;
object.position.z = Math.random() * 4000 - 2000;
scene.add( object );
objects.push( object );
}
}
Эта функция выполняет цикл внутри переменной таблицы для преобразования элементов массива в элементы HTML, затем добавляет их как объекты с помощью функции CSS3DObject в сцену и помещает их в массив объектов, чтобы использовать их для рендеринга других макетов.
Вызов функции внутри функции инициализации после строк рендерера:
simpleObjectsLayout();
Теперь наш файл main.js выглядит так:
var table = [
// just the Table array at the first of article
];
var camera,scene,renderer;
var objects = [];
var targets = { table: [], sphere: [], helix: [], grid: [] };
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 3000;
scene = new THREE.Scene();
simpleObjectsLayout();
renderer = new THREE.CSS3DRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.getElementById( 'container' ).appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
}
function simpleObjectsLayout() {
for ( var i = 0; i < table.length; i += 5 ) {
var element = document.createElement( 'div' );
element.className = 'element';
element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')';
var number = document.createElement( 'div' );
number.className = 'number';
number.textContent = ( i / 5 ) + 1;
element.appendChild( number );
var symbol = document.createElement( 'div' );
symbol.className = 'symbol';
symbol.textContent = table[ i ];
element.appendChild( symbol );
var details = document.createElement( 'div' );
details.className = 'details';
details.innerHTML = table[ i + 1 ] + '<br>' + table[ i + 2 ];
element.appendChild( details );
var object = new THREE.CSS3DObject( element );
object.position.x = Math.random() * 4000 - 2000;
object.position.y = Math.random() * 4000 - 2000;
object.position.z = Math.random() * 4000 - 2000;
scene.add( object );
objects.push( object );
}
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function render() {
renderer.render( scene, camera );
}
function animate() {
requestAnimationFrame( animate );
}
Итак, давайте добавим макет таблицы.
function tableLayout() {
for ( var i = 0; i < table.length; i += 5 ) {
var object = new THREE.Object3D();
object.position.x = ( table[ i + 3 ] * 140 ) - 1330;
object.position.y = - ( table[ i + 4 ] * 180 ) + 990;
targets.table.push( object );
}
}
Добавьте эту функцию в main.js.
Эта функция просто добавляет объекты в элемент таблицы целевого объекта с их стандартным положением.
Затем вызовите эту функцию после функции simpleObjectsLayout внутри функции init.
В конце этого шага наш файл main.js выглядит так:
var table = [
// just the Table array at the first of article
];
var camera,scene,renderer;
var objects = [];
var targets = { table: [], sphere: [], helix: [], grid: [] };
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 3000;
scene = new THREE.Scene();
simpleObjectsLayout();
tableLayout();
renderer = new THREE.CSS3DRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.getElementById( 'container' ).appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
}
function simpleObjectsLayout() {
for ( var i = 0; i < table.length; i += 5 ) {
var element = document.createElement( 'div' );
element.className = 'element';
element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')';
var number = document.createElement( 'div' );
number.className = 'number';
number.textContent = ( i / 5 ) + 1;
element.appendChild( number );
var symbol = document.createElement( 'div' );
symbol.className = 'symbol';
symbol.textContent = table[ i ];
element.appendChild( symbol );
var details = document.createElement( 'div' );
details.className = 'details';
details.innerHTML = table[ i + 1 ] + '<br>' + table[ i + 2 ];
element.appendChild( details );
var object = new THREE.CSS3DObject( element );
object.position.x = Math.random() * 4000 - 2000;
object.position.y = Math.random() * 4000 - 2000;
object.position.z = Math.random() * 4000 - 2000;
scene.add( object );
objects.push( object );
}
}
function tableLayout() {
for ( var i = 0; i < table.length; i += 5 ) {
var object = new THREE.Object3D();
object.position.x = ( table[ i + 3 ] * 140 ) - 1330;
object.position.y = - ( table[ i + 4 ] * 180 ) + 990;
targets.table.push( object );
}
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function render() {
renderer.render( scene, camera );
}
function animate() {
requestAnimationFrame( animate );
}
Но по-прежнему мы не видим никаких изменений, и руководство становится скучным.
Итак, давайте добавим в проект анимацию, чтобы увидеть, что из этого получится.
Подросток
На этом этапе мы добавим анимацию внутри нашего проекта для анимации наших объектов.
Для этого мы будем использовать tween.
Добавьте эту функцию в main.js
function transform( targets, duration ) {
TWEEN.removeAll();
for ( var i = 0; i < objects.length; i ++ ) {
var object = objects[ i ];
var target = targets[ i ];
new TWEEN.Tween( object.position )
.to( { x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration )
.easing( TWEEN.Easing.Exponential.InOut )
.start();
new TWEEN.Tween( object.rotation )
.to( { x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration )
.easing( TWEEN.Easing.Exponential.InOut )
.start();
}
new TWEEN.Tween( this )
.to( {}, duration * 2 )
.onUpdate( render )
.start();
}
Эта функция создает анимацию движения для каждого из объектов, а затем преобразует их в соответствующее целевое положение и поворот.
Первая строка полностью очищает внутренний список подростков.
Затем добавьте эту строку в функцию анимации:
TWEEN.update();
Затем вызовите функцию преобразования внутри функции инициализации перед window.eventListener:
transform( targets.table, 2000 );
Теперь файл main.js выглядит так:
var table = [
// just the Table array at the first of article
];
var camera,scene,renderer;
var objects = [];
var targets = { table: [], sphere: [], helix: [], grid: [] };
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 3000;
scene = new THREE.Scene();
simpleObjectsLayout();
tableLayout();
renderer = new THREE.CSS3DRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.getElementById( 'container' ).appendChild( renderer.domElement );
transform( targets.table, 2000 );
window.addEventListener( 'resize', onWindowResize, false );
}
function simpleObjectsLayout() {
for ( var i = 0; i < table.length; i += 5 ) {
var element = document.createElement( 'div' );
element.className = 'element';
element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')';
var number = document.createElement( 'div' );
number.className = 'number';
number.textContent = ( i / 5 ) + 1;
element.appendChild( number );
var symbol = document.createElement( 'div' );
symbol.className = 'symbol';
symbol.textContent = table[ i ];
element.appendChild( symbol );
var details = document.createElement( 'div' );
details.className = 'details';
details.innerHTML = table[ i + 1 ] + '<br>' + table[ i + 2 ];
element.appendChild( details );
var object = new THREE.CSS3DObject( element );
object.position.x = Math.random() * 4000 - 2000;
object.position.y = Math.random() * 4000 - 2000;
object.position.z = Math.random() * 4000 - 2000;
scene.add( object );
objects.push( object );
}
}
function tableLayout() {
for ( var i = 0; i < table.length; i += 5 ) {
var object = new THREE.Object3D();
object.position.x = ( table[ i + 3 ] * 140 ) - 1330;
object.position.y = - ( table[ i + 4 ] * 180 ) + 990;
targets.table.push( object );
}
}
function transform( targets, duration ) {
TWEEN.removeAll();
for ( var i = 0; i < objects.length; i ++ ) {
var object = objects[ i ];
var target = targets[ i ];
new TWEEN.Tween( object.position )
.to( { x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration )
.easing( TWEEN.Easing.Exponential.InOut )
.start();
new TWEEN.Tween( object.rotation )
.to( { x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration )
.easing( TWEEN.Easing.Exponential.InOut )
.start();
}
new TWEEN.Tween( this )
.to( {}, duration * 2 )
.onUpdate( render )
.start();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function render() {
renderer.render( scene, camera );
}
function animate() {
requestAnimationFrame( animate );
TWEEN.update();
}
После сохранения файла main.js откройте index.html в своем браузере или обновите его.
Вы сможете увидеть красивую анимацию при изменении положения элементов таблицы.
Но ни одна из кнопок не работает, так что давайте заставим их работать.
Добавление других макетов
Для этого шага нам нужно сделать другие макеты для проекта.
Так же, как на этапе добавления объектов, мы создадим макеты сфер, спиралей, сетки:
function sphereLayout() {
var vector = new THREE.Vector3();
for ( var i = 0, l = objects.length; i < l; i ++ ) {
var phi = Math.acos( - 1 + ( 2 * i ) / l );
var theta = Math.sqrt( l * Math.PI ) * phi;
var object = new THREE.Object3D();
object.position.setFromSphericalCoords( 800, phi, theta );
vector.copy( object.position ).multiplyScalar( 2 );
object.lookAt( vector );
targets.sphere.push( object );
}
}
function helixLayout() {
var vector = new THREE.Vector3();
for ( var i = 0, l = objects.length; i < l; i ++ ) {
var theta = i * 0.175 + Math.PI;
var y = - ( i * 8 ) + 450;
var object = new THREE.Object3D();
object.position.setFromCylindricalCoords( 900, theta, y );
vector.x = object.position.x * 2;
vector.y = object.position.y;
vector.z = object.position.z * 2;
object.lookAt( vector );
targets.helix.push( object );
}
}
function gridLayout() {
for ( var i = 0; i < objects.length; i ++ ) {
var object = new THREE.Object3D();
object.position.x = ( ( i % 5 ) * 400 ) - 800;
object.position.y = ( - ( Math.floor( i / 5 ) % 5 ) * 400 ) + 800;
object.position.z = ( Math.floor( i / 25 ) ) * 1000 - 2000;
targets.grid.push( object );
}
}
Эти три функции просто создают циклы внутри массива объектов и добавляют их с разными позициями по целевым типам внутри соответствующего элемента целевой функции.
Затем вызовите функции внутри функции инициализации, чтобы файл выглядел так:
var table = [
// just the Table array at the first of article
];
var camera,scene,renderer;
var objects = [];
var targets = { table: [], sphere: [], helix: [], grid: [] };
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 3000;
scene = new THREE.Scene();
simpleObjectsLayout();
tableLayout();
sphereLayout();
helixLayout();
gridLayout();
renderer = new THREE.CSS3DRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.getElementById( 'container' ).appendChild( renderer.domElement );
transform( targets.table, 2000 );
window.addEventListener( 'resize', onWindowResize, false );
}
function simpleObjectsLayout() {
for ( var i = 0; i < table.length; i += 5 ) {
var element = document.createElement( 'div' );
element.className = 'element';
element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')';
var number = document.createElement( 'div' );
number.className = 'number';
number.textContent = ( i / 5 ) + 1;
element.appendChild( number );
var symbol = document.createElement( 'div' );
symbol.className = 'symbol';
symbol.textContent = table[ i ];
element.appendChild( symbol );
var details = document.createElement( 'div' );
details.className = 'details';
details.innerHTML = table[ i + 1 ] + '<br>' + table[ i + 2 ];
element.appendChild( details );
var object = new THREE.CSS3DObject( element );
object.position.x = Math.random() * 4000 - 2000;
object.position.y = Math.random() * 4000 - 2000;
object.position.z = Math.random() * 4000 - 2000;
scene.add( object );
objects.push( object );
}
}
function tableLayout() {
for ( var i = 0; i < table.length; i += 5 ) {
var object = new THREE.Object3D();
object.position.x = ( table[ i + 3 ] * 140 ) - 1330;
object.position.y = - ( table[ i + 4 ] * 180 ) + 990;
targets.table.push( object );
}
}
function sphereLayout() {
var vector = new THREE.Vector3();
for ( var i = 0, l = objects.length; i < l; i ++ ) {
var phi = Math.acos( - 1 + ( 2 * i ) / l );
var theta = Math.sqrt( l * Math.PI ) * phi;
var object = new THREE.Object3D();
object.position.setFromSphericalCoords( 800, phi, theta );
vector.copy( object.position ).multiplyScalar( 2 );
object.lookAt( vector );
targets.sphere.push( object );
}
}
function helixLayout() {
var vector = new THREE.Vector3();
for ( var i = 0, l = objects.length; i < l; i ++ ) {
var theta = i * 0.175 + Math.PI;
var y = - ( i * 8 ) + 450;
var object = new THREE.Object3D();
object.position.setFromCylindricalCoords( 900, theta, y );
vector.x = object.position.x * 2;
vector.y = object.position.y;
vector.z = object.position.z * 2;
object.lookAt( vector );
targets.helix.push( object );
}
}
function gridLayout() {
for ( var i = 0; i < objects.length; i ++ ) {
var object = new THREE.Object3D();
object.position.x = ( ( i % 5 ) * 400 ) - 800;
object.position.y = ( - ( Math.floor( i / 5 ) % 5 ) * 400 ) + 800;
object.position.z = ( Math.floor( i / 25 ) ) * 1000 - 2000;
targets.grid.push( object );
}
}
function transform( targets, duration ) {
TWEEN.removeAll();
for ( var i = 0; i < objects.length; i ++ ) {
var object = objects[ i ];
var target = targets[ i ];
new TWEEN.Tween( object.position )
.to( { x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration )
.easing( TWEEN.Easing.Exponential.InOut )
.start();
new TWEEN.Tween( object.rotation )
.to( { x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration )
.easing( TWEEN.Easing.Exponential.InOut )
.start();
}
new TWEEN.Tween( this )
.to( {}, duration * 2 )
.onUpdate( render )
.start();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function render() {
renderer.render( scene, camera );
}
function animate() {
requestAnimationFrame( animate );
TWEEN.update();
}
Теперь мы готовы их использовать.
Кнопки
Теперь, имея все необходимые макеты, мы можем использовать кнопки для преобразования между ними.
Итак, нам нужно установить прослушиватель кликов для кнопок
Для этого я сделал функцию:
function addClickListener(target,elementId){
var button = document.getElementById( elementId );
button.addEventListener( 'click', function () {
transform( target, 2000 );
}, false );
}
Эта функция добавляет прослушиватель щелчков к элементу по его идентификатору и внутри функции обратного вызова использует целевой параметр для передачи его в функцию преобразования.
Затем используйте его внутри функции инициализации, например:
addClickListener(targets.table,'table'); addClickListener(targets.sphere,'sphere'); addClickListener(targets.helix, 'helix'); addClickListener(targets.grid,'grid');
Сразу после вызова функции gridLayout.
Теперь наш файл выглядит так:
var table = [
// just the Table array at the first of article
];
var camera,scene,renderer;
var objects = [];
var targets = { table: [], sphere: [], helix: [], grid: [] };
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 3000;
scene = new THREE.Scene();
simpleObjectsLayout();
tableLayout();
sphereLayout();
helixLayout();
gridLayout();
addClickListener(targets.table,'table');
addClickListener(targets.sphere,'sphere');
addClickListener(targets.helix, 'helix');
addClickListener(targets.grid,'grid');
renderer = new THREE.CSS3DRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.getElementById( 'container' ).appendChild( renderer.domElement );
transform( targets.table, 2000 );
window.addEventListener( 'resize', onWindowResize, false );
}
function simpleObjectsLayout() {
for ( var i = 0; i < table.length; i += 5 ) {
var element = document.createElement( 'div' );
element.className = 'element';
element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')';
var number = document.createElement( 'div' );
number.className = 'number';
number.textContent = ( i / 5 ) + 1;
element.appendChild( number );
var symbol = document.createElement( 'div' );
symbol.className = 'symbol';
symbol.textContent = table[ i ];
element.appendChild( symbol );
var details = document.createElement( 'div' );
details.className = 'details';
details.innerHTML = table[ i + 1 ] + '<br>' + table[ i + 2 ];
element.appendChild( details );
var object = new THREE.CSS3DObject( element );
object.position.x = Math.random() * 4000 - 2000;
object.position.y = Math.random() * 4000 - 2000;
object.position.z = Math.random() * 4000 - 2000;
scene.add( object );
objects.push( object );
}
}
function tableLayout() {
for ( var i = 0; i < table.length; i += 5 ) {
var object = new THREE.Object3D();
object.position.x = ( table[ i + 3 ] * 140 ) - 1330;
object.position.y = - ( table[ i + 4 ] * 180 ) + 990;
targets.table.push( object );
}
}
function addClickListener(target,elementId){
var button = document.getElementById( elementId );
button.addEventListener( 'click', function () {
transform( target, 2000 );
}, false );
}
function sphereLayout() {
var vector = new THREE.Vector3();
for ( var i = 0, l = objects.length; i < l; i ++ ) {
var phi = Math.acos( - 1 + ( 2 * i ) / l );
var theta = Math.sqrt( l * Math.PI ) * phi;
var object = new THREE.Object3D();
object.position.setFromSphericalCoords( 800, phi, theta );
vector.copy( object.position ).multiplyScalar( 2 );
object.lookAt( vector );
targets.sphere.push( object );
}
}
function helixLayout() {
var vector = new THREE.Vector3();
for ( var i = 0, l = objects.length; i < l; i ++ ) {
var theta = i * 0.175 + Math.PI;
var y = - ( i * 8 ) + 450;
var object = new THREE.Object3D();
object.position.setFromCylindricalCoords( 900, theta, y );
vector.x = object.position.x * 2;
vector.y = object.position.y;
vector.z = object.position.z * 2;
object.lookAt( vector );
targets.helix.push( object );
}
}
function gridLayout() {
for ( var i = 0; i < objects.length; i ++ ) {
var object = new THREE.Object3D();
object.position.x = ( ( i % 5 ) * 400 ) - 800;
object.position.y = ( - ( Math.floor( i / 5 ) % 5 ) * 400 ) + 800;
object.position.z = ( Math.floor( i / 25 ) ) * 1000 - 2000;
targets.grid.push( object );
}
}
function transform( targets, duration ) {
TWEEN.removeAll();
for ( var i = 0; i < objects.length; i ++ ) {
var object = objects[ i ];
var target = targets[ i ];
new TWEEN.Tween( object.position )
.to( { x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration )
.easing( TWEEN.Easing.Exponential.InOut )
.start();
new TWEEN.Tween( object.rotation )
.to( { x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration )
.easing( TWEEN.Easing.Exponential.InOut )
.start();
}
new TWEEN.Tween( this )
.to( {}, duration * 2 )
.onUpdate( render )
.start();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function render() {
renderer.render( scene, camera );
}
function animate() {
requestAnimationFrame( animate );
TWEEN.update();
}
И мы можем использовать кнопки.
Но мы можем сделать это немного поинтереснее.
Элементы управления трекболом
После этого шага мы сможем управлять камерой с помощью трекбола и мыши.
Добавьте контрольную переменную после целевой переменной:
var controls;
Затем добавьте эту функцию в файл:
function initTrackbarControls() {
controls = new THREE.TrackballControls( camera, renderer.domElement );
controls.rotateSpeed = 0.5;
controls.minDistance = 500;
controls.maxDistance = 6000;
controls.addEventListener( 'change', render );
}
Эта функция запускает элементы управления трекбаром, позволяя нам управлять камерой с помощью мыши.
Затем вызовите его внутри функции инициализации после строки «document.getElementById»:
initTrackbarControls();
добавьте эту строку внутри функции анимации:
controls.update();
Теперь наш файл выглядит так:
var table = [
"H", "Hydrogen", "1.00794", 1, 1,
"He", "Helium", "4.002602", 18, 1,
"Li", "Lithium", "6.941", 1, 2,
"Be", "Beryllium", "9.012182", 2, 2,
"B", "Boron", "10.811", 13, 2,
"C", "Carbon", "12.0107", 14, 2,
"N", "Nitrogen", "14.0067", 15, 2,
"O", "Oxygen", "15.9994", 16, 2,
"F", "Fluorine", "18.9984032", 17, 2,
"Ne", "Neon", "20.1797", 18, 2,
"Na", "Sodium", "22.98976...", 1, 3,
"Mg", "Magnesium", "24.305", 2, 3,
"Al", "Aluminium", "26.9815386", 13, 3,
"Si", "Silicon", "28.0855", 14, 3,
"P", "Phosphorus", "30.973762", 15, 3,
"S", "Sulfur", "32.065", 16, 3,
"Cl", "Chlorine", "35.453", 17, 3,
"Ar", "Argon", "39.948", 18, 3,
"K", "Potassium", "39.948", 1, 4,
"Ca", "Calcium", "40.078", 2, 4,
"Sc", "Scandium", "44.955912", 3, 4,
"Ti", "Titanium", "47.867", 4, 4,
"V", "Vanadium", "50.9415", 5, 4,
"Cr", "Chromium", "51.9961", 6, 4,
"Mn", "Manganese", "54.938045", 7, 4,
"Fe", "Iron", "55.845", 8, 4,
"Co", "Cobalt", "58.933195", 9, 4,
"Ni", "Nickel", "58.6934", 10, 4,
"Cu", "Copper", "63.546", 11, 4,
"Zn", "Zinc", "65.38", 12, 4,
"Ga", "Gallium", "69.723", 13, 4,
"Ge", "Germanium", "72.63", 14, 4,
"As", "Arsenic", "74.9216", 15, 4,
"Se", "Selenium", "78.96", 16, 4,
"Br", "Bromine", "79.904", 17, 4,
"Kr", "Krypton", "83.798", 18, 4,
"Rb", "Rubidium", "85.4678", 1, 5,
"Sr", "Strontium", "87.62", 2, 5,
"Y", "Yttrium", "88.90585", 3, 5,
"Zr", "Zirconium", "91.224", 4, 5,
"Nb", "Niobium", "92.90628", 5, 5,
"Mo", "Molybdenum", "95.96", 6, 5,
"Tc", "Technetium", "(98)", 7, 5,
"Ru", "Ruthenium", "101.07", 8, 5,
"Rh", "Rhodium", "102.9055", 9, 5,
"Pd", "Palladium", "106.42", 10, 5,
"Ag", "Silver", "107.8682", 11, 5,
"Cd", "Cadmium", "112.411", 12, 5,
"In", "Indium", "114.818", 13, 5,
"Sn", "Tin", "118.71", 14, 5,
"Sb", "Antimony", "121.76", 15, 5,
"Te", "Tellurium", "127.6", 16, 5,
"I", "Iodine", "126.90447", 17, 5,
"Xe", "Xenon", "131.293", 18, 5,
"Cs", "Caesium", "132.9054", 1, 6,
"Ba", "Barium", "132.9054", 2, 6,
"La", "Lanthanum", "138.90547", 4, 9,
"Ce", "Cerium", "140.116", 5, 9,
"Pr", "Praseodymium", "140.90765", 6, 9,
"Nd", "Neodymium", "144.242", 7, 9,
"Pm", "Promethium", "(145)", 8, 9,
"Sm", "Samarium", "150.36", 9, 9,
"Eu", "Europium", "151.964", 10, 9,
"Gd", "Gadolinium", "157.25", 11, 9,
"Tb", "Terbium", "158.92535", 12, 9,
"Dy", "Dysprosium", "162.5", 13, 9,
"Ho", "Holmium", "164.93032", 14, 9,
"Er", "Erbium", "167.259", 15, 9,
"Tm", "Thulium", "168.93421", 16, 9,
"Yb", "Ytterbium", "173.054", 17, 9,
"Lu", "Lutetium", "174.9668", 18, 9,
"Hf", "Hafnium", "178.49", 4, 6,
"Ta", "Tantalum", "180.94788", 5, 6,
"W", "Tungsten", "183.84", 6, 6,
"Re", "Rhenium", "186.207", 7, 6,
"Os", "Osmium", "190.23", 8, 6,
"Ir", "Iridium", "192.217", 9, 6,
"Pt", "Platinum", "195.084", 10, 6,
"Au", "Gold", "196.966569", 11, 6,
"Hg", "Mercury", "200.59", 12, 6,
"Tl", "Thallium", "204.3833", 13, 6,
"Pb", "Lead", "207.2", 14, 6,
"Bi", "Bismuth", "208.9804", 15, 6,
"Po", "Polonium", "(209)", 16, 6,
"At", "Astatine", "(210)", 17, 6,
"Rn", "Radon", "(222)", 18, 6,
"Fr", "Francium", "(223)", 1, 7,
"Ra", "Radium", "(226)", 2, 7,
"Ac", "Actinium", "(227)", 4, 10,
"Th", "Thorium", "232.03806", 5, 10,
"Pa", "Protactinium", "231.0588", 6, 10,
"U", "Uranium", "238.02891", 7, 10,
"Np", "Neptunium", "(237)", 8, 10,
"Pu", "Plutonium", "(244)", 9, 10,
"Am", "Americium", "(243)", 10, 10,
"Cm", "Curium", "(247)", 11, 10,
"Bk", "Berkelium", "(247)", 12, 10,
"Cf", "Californium", "(251)", 13, 10,
"Es", "Einstenium", "(252)", 14, 10,
"Fm", "Fermium", "(257)", 15, 10,
"Md", "Mendelevium", "(258)", 16, 10,
"No", "Nobelium", "(259)", 17, 10,
"Lr", "Lawrencium", "(262)", 18, 10,
"Rf", "Rutherfordium", "(267)", 4, 7,
"Db", "Dubnium", "(268)", 5, 7,
"Sg", "Seaborgium", "(271)", 6, 7,
"Bh", "Bohrium", "(272)", 7, 7,
"Hs", "Hassium", "(270)", 8, 7,
"Mt", "Meitnerium", "(276)", 9, 7,
"Ds", "Darmstadium", "(281)", 10, 7,
"Rg", "Roentgenium", "(280)", 11, 7,
"Cn", "Copernicium", "(285)", 12, 7,
"Nh", "Nihonium", "(286)", 13, 7,
"Fl", "Flerovium", "(289)", 14, 7,
"Mc", "Moscovium", "(290)", 15, 7,
"Lv", "Livermorium", "(293)", 16, 7,
"Ts", "Tennessine", "(294)", 17, 7,
"Og", "Oganesson", "(294)", 18, 7
];
var camera,scene,renderer;
var objects = [];
var targets = { table: [], sphere: [], helix: [], grid: [] };
var controls;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 3000;
scene = new THREE.Scene();
simpleObjectsLayout();
tableLayout();
sphereLayout();
helixLayout();
gridLayout();
addClickListener(targets.table,'table');
addClickListener(targets.sphere,'sphere');
addClickListener(targets.helix, 'helix');
addClickListener(targets.grid,'grid');
renderer = new THREE.CSS3DRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.getElementById( 'container' ).appendChild( renderer.domElement );
initTrackbarControls();
transform( targets.table, 2000 );
window.addEventListener( 'resize', onWindowResize, false );
}
function simpleObjectsLayout() {
for ( var i = 0; i < table.length; i += 5 ) {
var element = document.createElement( 'div' );
element.className = 'element';
element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')';
var number = document.createElement( 'div' );
number.className = 'number';
number.textContent = ( i / 5 ) + 1;
element.appendChild( number );
var symbol = document.createElement( 'div' );
symbol.className = 'symbol';
symbol.textContent = table[ i ];
element.appendChild( symbol );
var details = document.createElement( 'div' );
details.className = 'details';
details.innerHTML = table[ i + 1 ] + '<br>' + table[ i + 2 ];
element.appendChild( details );
var object = new THREE.CSS3DObject( element );
object.position.x = Math.random() * 4000 - 2000;
object.position.y = Math.random() * 4000 - 2000;
object.position.z = Math.random() * 4000 - 2000;
scene.add( object );
objects.push( object );
}
}
function tableLayout() {
for ( var i = 0; i < table.length; i += 5 ) {
var object = new THREE.Object3D();
object.position.x = ( table[ i + 3 ] * 140 ) - 1330;
object.position.y = - ( table[ i + 4 ] * 180 ) + 990;
targets.table.push( object );
}
}
function addClickListener(target,elementId){
var button = document.getElementById( elementId );
button.addEventListener( 'click', function () {
transform( target, 2000 );
}, false );
}
function initTrackbarControls() {
controls = new THREE.TrackballControls( camera, renderer.domElement );
controls.rotateSpeed = 0.5;
controls.minDistance = 500;
controls.maxDistance = 6000;
controls.addEventListener( 'change', render );
}
function sphereLayout() {
var vector = new THREE.Vector3();
for ( var i = 0, l = objects.length; i < l; i ++ ) {
var phi = Math.acos( - 1 + ( 2 * i ) / l );
var theta = Math.sqrt( l * Math.PI ) * phi;
var object = new THREE.Object3D();
object.position.setFromSphericalCoords( 800, phi, theta );
vector.copy( object.position ).multiplyScalar( 2 );
object.lookAt( vector );
targets.sphere.push( object );
}
}
function helixLayout() {
var vector = new THREE.Vector3();
for ( var i = 0, l = objects.length; i < l; i ++ ) {
var theta = i * 0.175 + Math.PI;
var y = - ( i * 8 ) + 450;
var object = new THREE.Object3D();
object.position.setFromCylindricalCoords( 900, theta, y );
vector.x = object.position.x * 2;
vector.y = object.position.y;
vector.z = object.position.z * 2;
object.lookAt( vector );
targets.helix.push( object );
}
}
function gridLayout() {
for ( var i = 0; i < objects.length; i ++ ) {
var object = new THREE.Object3D();
object.position.x = ( ( i % 5 ) * 400 ) - 800;
object.position.y = ( - ( Math.floor( i / 5 ) % 5 ) * 400 ) + 800;
object.position.z = ( Math.floor( i / 25 ) ) * 1000 - 2000;
targets.grid.push( object );
}
}
function transform( targets, duration ) {
TWEEN.removeAll();
for ( var i = 0; i < objects.length; i ++ ) {
var object = objects[ i ];
var target = targets[ i ];
new TWEEN.Tween( object.position )
.to( { x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration )
.easing( TWEEN.Easing.Exponential.InOut )
.start();
new TWEEN.Tween( object.rotation )
.to( { x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration )
.easing( TWEEN.Easing.Exponential.InOut )
.start();
}
new TWEEN.Tween( this )
.to( {}, duration * 2 )
.onUpdate( render )
.start();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
function render() {
renderer.render( scene, camera );
}
function animate() {
requestAnimationFrame( animate );
TWEEN.update();
controls.update();
}
В конце этого шага мы закончили проект.
Но давайте проведем некоторый рефакторинг.
Рефакторинг
На этом этапе я проведу рефакторинг кода, чтобы получить более производительный, читаемый и поддерживаемый код.
const table = [
"H", "Hydrogen", "1.00794", 1, 1,
"He", "Helium", "4.002602", 18, 1,
"Li", "Lithium", "6.941", 1, 2,
"Be", "Beryllium", "9.012182", 2, 2,
"B", "Boron", "10.811", 13, 2,
"C", "Carbon", "12.0107", 14, 2,
"N", "Nitrogen", "14.0067", 15, 2,
"O", "Oxygen", "15.9994", 16, 2,
"F", "Fluorine", "18.9984032", 17, 2,
"Ne", "Neon", "20.1797", 18, 2,
"Na", "Sodium", "22.98976...", 1, 3,
"Mg", "Magnesium", "24.305", 2, 3,
"Al", "Aluminium", "26.9815386", 13, 3,
"Si", "Silicon", "28.0855", 14, 3,
"P", "Phosphorus", "30.973762", 15, 3,
"S", "Sulfur", "32.065", 16, 3,
"Cl", "Chlorine", "35.453", 17, 3,
"Ar", "Argon", "39.948", 18, 3,
"K", "Potassium", "39.948", 1, 4,
"Ca", "Calcium", "40.078", 2, 4,
"Sc", "Scandium", "44.955912", 3, 4,
"Ti", "Titanium", "47.867", 4, 4,
"V", "Vanadium", "50.9415", 5, 4,
"Cr", "Chromium", "51.9961", 6, 4,
"Mn", "Manganese", "54.938045", 7, 4,
"Fe", "Iron", "55.845", 8, 4,
"Co", "Cobalt", "58.933195", 9, 4,
"Ni", "Nickel", "58.6934", 10, 4,
"Cu", "Copper", "63.546", 11, 4,
"Zn", "Zinc", "65.38", 12, 4,
"Ga", "Gallium", "69.723", 13, 4,
"Ge", "Germanium", "72.63", 14, 4,
"As", "Arsenic", "74.9216", 15, 4,
"Se", "Selenium", "78.96", 16, 4,
"Br", "Bromine", "79.904", 17, 4,
"Kr", "Krypton", "83.798", 18, 4,
"Rb", "Rubidium", "85.4678", 1, 5,
"Sr", "Strontium", "87.62", 2, 5,
"Y", "Yttrium", "88.90585", 3, 5,
"Zr", "Zirconium", "91.224", 4, 5,
"Nb", "Niobium", "92.90628", 5, 5,
"Mo", "Molybdenum", "95.96", 6, 5,
"Tc", "Technetium", "(98)", 7, 5,
"Ru", "Ruthenium", "101.07", 8, 5,
"Rh", "Rhodium", "102.9055", 9, 5,
"Pd", "Palladium", "106.42", 10, 5,
"Ag", "Silver", "107.8682", 11, 5,
"Cd", "Cadmium", "112.411", 12, 5,
"In", "Indium", "114.818", 13, 5,
"Sn", "Tin", "118.71", 14, 5,
"Sb", "Antimony", "121.76", 15, 5,
"Te", "Tellurium", "127.6", 16, 5,
"I", "Iodine", "126.90447", 17, 5,
"Xe", "Xenon", "131.293", 18, 5,
"Cs", "Caesium", "132.9054", 1, 6,
"Ba", "Barium", "132.9054", 2, 6,
"La", "Lanthanum", "138.90547", 4, 9,
"Ce", "Cerium", "140.116", 5, 9,
"Pr", "Praseodymium", "140.90765", 6, 9,
"Nd", "Neodymium", "144.242", 7, 9,
"Pm", "Promethium", "(145)", 8, 9,
"Sm", "Samarium", "150.36", 9, 9,
"Eu", "Europium", "151.964", 10, 9,
"Gd", "Gadolinium", "157.25", 11, 9,
"Tb", "Terbium", "158.92535", 12, 9,
"Dy", "Dysprosium", "162.5", 13, 9,
"Ho", "Holmium", "164.93032", 14, 9,
"Er", "Erbium", "167.259", 15, 9,
"Tm", "Thulium", "168.93421", 16, 9,
"Yb", "Ytterbium", "173.054", 17, 9,
"Lu", "Lutetium", "174.9668", 18, 9,
"Hf", "Hafnium", "178.49", 4, 6,
"Ta", "Tantalum", "180.94788", 5, 6,
"W", "Tungsten", "183.84", 6, 6,
"Re", "Rhenium", "186.207", 7, 6,
"Os", "Osmium", "190.23", 8, 6,
"Ir", "Iridium", "192.217", 9, 6,
"Pt", "Platinum", "195.084", 10, 6,
"Au", "Gold", "196.966569", 11, 6,
"Hg", "Mercury", "200.59", 12, 6,
"Tl", "Thallium", "204.3833", 13, 6,
"Pb", "Lead", "207.2", 14, 6,
"Bi", "Bismuth", "208.9804", 15, 6,
"Po", "Polonium", "(209)", 16, 6,
"At", "Astatine", "(210)", 17, 6,
"Rn", "Radon", "(222)", 18, 6,
"Fr", "Francium", "(223)", 1, 7,
"Ra", "Radium", "(226)", 2, 7,
"Ac", "Actinium", "(227)", 4, 10,
"Th", "Thorium", "232.03806", 5, 10,
"Pa", "Protactinium", "231.0588", 6, 10,
"U", "Uranium", "238.02891", 7, 10,
"Np", "Neptunium", "(237)", 8, 10,
"Pu", "Plutonium", "(244)", 9, 10,
"Am", "Americium", "(243)", 10, 10,
"Cm", "Curium", "(247)", 11, 10,
"Bk", "Berkelium", "(247)", 12, 10,
"Cf", "Californium", "(251)", 13, 10,
"Es", "Einstenium", "(252)", 14, 10,
"Fm", "Fermium", "(257)", 15, 10,
"Md", "Mendelevium", "(258)", 16, 10,
"No", "Nobelium", "(259)", 17, 10,
"Lr", "Lawrencium", "(262)", 18, 10,
"Rf", "Rutherfordium", "(267)", 4, 7,
"Db", "Dubnium", "(268)", 5, 7,
"Sg", "Seaborgium", "(271)", 6, 7,
"Bh", "Bohrium", "(272)", 7, 7,
"Hs", "Hassium", "(270)", 8, 7,
"Mt", "Meitnerium", "(276)", 9, 7,
"Ds", "Darmstadium", "(281)", 10, 7,
"Rg", "Roentgenium", "(280)", 11, 7,
"Cn", "Copernicium", "(285)", 12, 7,
"Nh", "Nihonium", "(286)", 13, 7,
"Fl", "Flerovium", "(289)", 14, 7,
"Mc", "Moscovium", "(290)", 15, 7,
"Lv", "Livermorium", "(293)", 16, 7,
"Ts", "Tennessine", "(294)", 17, 7,
"Og", "Oganesson", "(294)", 18, 7
];
let camera, scene, renderer, controls;
let targets = {simple: [], table: [], sphere: [], helix: [], grid: []};
init();
animate();
function init() {
initCamera();
initScene();
initObjects();
addClickListeners();
initRenderer();
initTrackbarControls();
transform(targets.table, 2000);
window.addEventListener('resize', onWindowResize, false);
}
function initCamera() {
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 3000;
}
function initScene() {
scene = new THREE.Scene();
}
function initRenderer() {
renderer = new THREE.CSS3DRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);
}
function initObjects() {
simpleObjectsLayout();
generateGeometricLayouts();
}
function addClickListeners() {
addClickListener(targets.table, 'table');
addClickListener(targets.sphere, 'sphere');
addClickListener(targets.helix, 'helix');
addClickListener(targets.grid, 'grid');
}
function simpleObjectsLayout() {
for (let i = 0; i < table.length; i += 5) {
let object = new THREE.CSS3DObject(htmlElement(table, i));
object.position.x = Math.random() * 4000 - 2000;
object.position.y = Math.random() * 4000 - 2000;
object.position.z = Math.random() * 4000 - 2000;
scene.add(object);
targets.simple.push(object);
tableLayout(table, i);
}
}
function htmlElement(table, i) {
let element = document.createElement('div');
element.className = 'element';
element.style.backgroundColor = 'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')';
let number = document.createElement('div');
number.className = 'number';
number.textContent = (i / 5) + 1;
element.appendChild(number);
let symbol = document.createElement('div');
symbol.className = 'symbol';
symbol.textContent = table[i];
element.appendChild(symbol);
let details = document.createElement('div');
details.className = 'details';
details.innerHTML = table[i + 1] + '<br>' + table[i + 2];
element.appendChild(details);
return element;
}
function tableLayout(table, index) {
let object = new THREE.Object3D();
object.position.x = (table[index + 3] * 140) - 1330;
object.position.y = -(table[index + 4] * 180) + 990;
targets.table.push(object);
}
function addClickListener(target, elementId) {
const button = document.getElementById(elementId);
button.addEventListener('click', function () {
transform(target, 2000);
}, false);
}
function initTrackbarControls() {
controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.rotateSpeed = 0.5;
controls.minDistance = 500;
controls.maxDistance = 6000;
controls.addEventListener('change', render);
}
function generateGeometricLayouts() {
let sphereVector = new THREE.Vector3();
let helixVector = new THREE.Vector3();
for (let i = 0, l = targets.simple.length; i < l; i++) {
addSphereObject(sphereVector, i, l);
addHelixObject(helixVector, i);
addGridObject(i);
}
}
function addSphereObject(sphereVector, index, length) {
const phi = Math.acos(-1 + (2 * index) / length);
const theta = Math.sqrt(length * Math.PI) * phi;
let object = new THREE.Object3D();
object.position.setFromSphericalCoords(800, phi, theta);
sphereVector.copy(object.position).multiplyScalar(2);
object.lookAt(sphereVector);
targets.sphere.push(object);
}
function addHelixObject(helixVector, index) {
const theta = index * 0.175 + Math.PI;
const y = -(index * 8) + 450;
let object = new THREE.Object3D();
object.position.setFromCylindricalCoords(900, theta, y);
helixVector.x = object.position.x * 2;
helixVector.y = object.position.y;
helixVector.z = object.position.z * 2;
object.lookAt(helixVector);
targets.helix.push(object);
}
function addGridObject(index) {
let object = new THREE.Object3D();
object.position.x = ((index % 5) * 400) - 800;
object.position.y = (-(Math.floor(index / 5) % 5) * 400) + 800;
object.position.z = (Math.floor(index / 25)) * 1000 - 2000;
targets.grid.push(object);
}
function transform(target, duration) {
TWEEN.removeAll();
for (let i = 0; i < targets.simple.length; i++) {
let object = targets.simple[i];
let targetObject = target[i];
transformObjectPosition(object, targetObject, duration);
transformObjectRotation(object, targetObject, duration);
}
new TWEEN.Tween(this)
.to({}, duration * 2)
.onUpdate(render)
.start();
}
function transformObjectPosition(object, targetObject, duration) {
new TWEEN.Tween(object.position)
.to({
x: targetObject.position.x,
y: targetObject.position.y,
z: targetObject.position.z
}, Math.random() * duration + duration)
.easing(TWEEN.Easing.Exponential.InOut)
.start();
}
function transformObjectRotation(object, targetObject, duration) {
new TWEEN.Tween(object.rotation)
.to({
x: targetObject.rotation.x,
y: targetObject.rotation.y,
z: targetObject.rotation.z
}, Math.random() * duration + duration)
.easing(TWEEN.Easing.Exponential.InOut)
.start();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
render();
}
function render() {
renderer.render(scene, camera);
}
function animate() {
requestAnimationFrame(animate);
TWEEN.update();
controls.update();
}
После некоторого рефакторинга мой файл main.js выглядит так, как показано выше.
Обновление: интерактивные элементы
Я решил добавить в этот урок обработку щелчка элементов.
Теперь в отредактированном коде добавьте эту строку в функцию htmlElement перед возвращаемым элементом:
element.addEventListener('click', ()=>elementClickHandler(i), false);
Затем добавьте эту функцию в проект:
function elementClickHandler(i){
transform(targets.table,1000);
new TWEEN.Tween(targets.simple[i / 5].position)
.to({
x: 0,
y: 0,
z: 2500
}, Math.random() * 2000 + 2000)
.easing(TWEEN.Easing.Exponential.InOut)
.start();
new TWEEN.Tween(this)
.to({}, 2000 * 2)
.onUpdate(render)
.start();
}
Заключительный main.js:
const table = [
"H", "Hydrogen", "1.00794", 1, 1,
"He", "Helium", "4.002602", 18, 1,
"Li", "Lithium", "6.941", 1, 2,
"Be", "Beryllium", "9.012182", 2, 2,
"B", "Boron", "10.811", 13, 2,
"C", "Carbon", "12.0107", 14, 2,
"N", "Nitrogen", "14.0067", 15, 2,
"O", "Oxygen", "15.9994", 16, 2,
"F", "Fluorine", "18.9984032", 17, 2,
"Ne", "Neon", "20.1797", 18, 2,
"Na", "Sodium", "22.98976...", 1, 3,
"Mg", "Magnesium", "24.305", 2, 3,
"Al", "Aluminium", "26.9815386", 13, 3,
"Si", "Silicon", "28.0855", 14, 3,
"P", "Phosphorus", "30.973762", 15, 3,
"S", "Sulfur", "32.065", 16, 3,
"Cl", "Chlorine", "35.453", 17, 3,
"Ar", "Argon", "39.948", 18, 3,
"K", "Potassium", "39.948", 1, 4,
"Ca", "Calcium", "40.078", 2, 4,
"Sc", "Scandium", "44.955912", 3, 4,
"Ti", "Titanium", "47.867", 4, 4,
"V", "Vanadium", "50.9415", 5, 4,
"Cr", "Chromium", "51.9961", 6, 4,
"Mn", "Manganese", "54.938045", 7, 4,
"Fe", "Iron", "55.845", 8, 4,
"Co", "Cobalt", "58.933195", 9, 4,
"Ni", "Nickel", "58.6934", 10, 4,
"Cu", "Copper", "63.546", 11, 4,
"Zn", "Zinc", "65.38", 12, 4,
"Ga", "Gallium", "69.723", 13, 4,
"Ge", "Germanium", "72.63", 14, 4,
"As", "Arsenic", "74.9216", 15, 4,
"Se", "Selenium", "78.96", 16, 4,
"Br", "Bromine", "79.904", 17, 4,
"Kr", "Krypton", "83.798", 18, 4,
"Rb", "Rubidium", "85.4678", 1, 5,
"Sr", "Strontium", "87.62", 2, 5,
"Y", "Yttrium", "88.90585", 3, 5,
"Zr", "Zirconium", "91.224", 4, 5,
"Nb", "Niobium", "92.90628", 5, 5,
"Mo", "Molybdenum", "95.96", 6, 5,
"Tc", "Technetium", "(98)", 7, 5,
"Ru", "Ruthenium", "101.07", 8, 5,
"Rh", "Rhodium", "102.9055", 9, 5,
"Pd", "Palladium", "106.42", 10, 5,
"Ag", "Silver", "107.8682", 11, 5,
"Cd", "Cadmium", "112.411", 12, 5,
"In", "Indium", "114.818", 13, 5,
"Sn", "Tin", "118.71", 14, 5,
"Sb", "Antimony", "121.76", 15, 5,
"Te", "Tellurium", "127.6", 16, 5,
"I", "Iodine", "126.90447", 17, 5,
"Xe", "Xenon", "131.293", 18, 5,
"Cs", "Caesium", "132.9054", 1, 6,
"Ba", "Barium", "132.9054", 2, 6,
"La", "Lanthanum", "138.90547", 4, 9,
"Ce", "Cerium", "140.116", 5, 9,
"Pr", "Praseodymium", "140.90765", 6, 9,
"Nd", "Neodymium", "144.242", 7, 9,
"Pm", "Promethium", "(145)", 8, 9,
"Sm", "Samarium", "150.36", 9, 9,
"Eu", "Europium", "151.964", 10, 9,
"Gd", "Gadolinium", "157.25", 11, 9,
"Tb", "Terbium", "158.92535", 12, 9,
"Dy", "Dysprosium", "162.5", 13, 9,
"Ho", "Holmium", "164.93032", 14, 9,
"Er", "Erbium", "167.259", 15, 9,
"Tm", "Thulium", "168.93421", 16, 9,
"Yb", "Ytterbium", "173.054", 17, 9,
"Lu", "Lutetium", "174.9668", 18, 9,
"Hf", "Hafnium", "178.49", 4, 6,
"Ta", "Tantalum", "180.94788", 5, 6,
"W", "Tungsten", "183.84", 6, 6,
"Re", "Rhenium", "186.207", 7, 6,
"Os", "Osmium", "190.23", 8, 6,
"Ir", "Iridium", "192.217", 9, 6,
"Pt", "Platinum", "195.084", 10, 6,
"Au", "Gold", "196.966569", 11, 6,
"Hg", "Mercury", "200.59", 12, 6,
"Tl", "Thallium", "204.3833", 13, 6,
"Pb", "Lead", "207.2", 14, 6,
"Bi", "Bismuth", "208.9804", 15, 6,
"Po", "Polonium", "(209)", 16, 6,
"At", "Astatine", "(210)", 17, 6,
"Rn", "Radon", "(222)", 18, 6,
"Fr", "Francium", "(223)", 1, 7,
"Ra", "Radium", "(226)", 2, 7,
"Ac", "Actinium", "(227)", 4, 10,
"Th", "Thorium", "232.03806", 5, 10,
"Pa", "Protactinium", "231.0588", 6, 10,
"U", "Uranium", "238.02891", 7, 10,
"Np", "Neptunium", "(237)", 8, 10,
"Pu", "Plutonium", "(244)", 9, 10,
"Am", "Americium", "(243)", 10, 10,
"Cm", "Curium", "(247)", 11, 10,
"Bk", "Berkelium", "(247)", 12, 10,
"Cf", "Californium", "(251)", 13, 10,
"Es", "Einstenium", "(252)", 14, 10,
"Fm", "Fermium", "(257)", 15, 10,
"Md", "Mendelevium", "(258)", 16, 10,
"No", "Nobelium", "(259)", 17, 10,
"Lr", "Lawrencium", "(262)", 18, 10,
"Rf", "Rutherfordium", "(267)", 4, 7,
"Db", "Dubnium", "(268)", 5, 7,
"Sg", "Seaborgium", "(271)", 6, 7,
"Bh", "Bohrium", "(272)", 7, 7,
"Hs", "Hassium", "(270)", 8, 7,
"Mt", "Meitnerium", "(276)", 9, 7,
"Ds", "Darmstadium", "(281)", 10, 7,
"Rg", "Roentgenium", "(280)", 11, 7,
"Cn", "Copernicium", "(285)", 12, 7,
"Nh", "Nihonium", "(286)", 13, 7,
"Fl", "Flerovium", "(289)", 14, 7,
"Mc", "Moscovium", "(290)", 15, 7,
"Lv", "Livermorium", "(293)", 16, 7,
"Ts", "Tennessine", "(294)", 17, 7,
"Og", "Oganesson", "(294)", 18, 7
];
let camera, scene, renderer, controls, composer;
var hblur, vblur;
let targets = {simple: [], table: [], sphere: [], helix: [], grid: []};
init();
animate();
function init() {
initCamera();
initScene();
initObjects();
addClickListeners();
initRenderer();
initTrackbarControls();
transform(targets.table, 2000);
window.addEventListener('resize', onWindowResize, false);
}
function initCamera() {
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 3000;
}
function initScene() {
scene = new THREE.Scene();
}
function initRenderer() {
renderer = new THREE.CSS3DRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);
}
function initObjects() {
simpleObjectsLayout();
generateGeometricLayouts();
}
function addClickListeners() {
addClickListener(targets.table, 'table');
addClickListener(targets.sphere, 'sphere');
addClickListener(targets.helix, 'helix');
addClickListener(targets.grid, 'grid');
}
function simpleObjectsLayout() {
for (let i = 0; i < table.length; i += 5) {
let object = new THREE.CSS3DObject(htmlElement(table, i));
object.position.x = Math.random() * 4000 - 2000;
object.position.y = Math.random() * 4000 - 2000;
object.position.z = Math.random() * 4000 - 2000;
scene.add(object);
targets.simple.push(object);
tableLayout(table, i);
}
}
function htmlElement(table, i) {
let element = document.createElement('div');
element.className = 'element';
element.style.backgroundColor = 'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')';
let number = document.createElement('div');
number.className = 'number';
number.textContent = (i / 5) + 1;
element.appendChild(number);
let symbol = document.createElement('div');
symbol.className = 'symbol';
symbol.textContent = table[i];
element.appendChild(symbol);
let details = document.createElement('div');
details.className = 'details';
details.innerHTML = table[i + 1] + '<br>' + table[i + 2];
element.appendChild(details);
element.addEventListener('click', ()=>elementClickHandler(i), false);
return element;
}
function elementClickHandler(i){
transform(targets.table,1000);
new TWEEN.Tween(targets.simple[i / 5].position)
.to({
x: 0,
y: 0,
z: 2500
}, Math.random() * 2000 + 2000)
.easing(TWEEN.Easing.Exponential.InOut)
.start();
new TWEEN.Tween(this)
.to({}, 2000 * 2)
.onUpdate(render)
.start();
}
function tableLayout(table, index) {
let object = new THREE.Object3D();
object.position.x = (table[index + 3] * 140) - 1330;
object.position.y = -(table[index + 4] * 180) + 990;
targets.table.push(object);
}
function addClickListener(target, elementId) {
const button = document.getElementById(elementId);
button.addEventListener('click', function () {
transform(target, 2000);
}, false);
}
function initTrackbarControls() {
controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.rotateSpeed = 0.5;
controls.minDistance = 500;
controls.maxDistance = 6000;
controls.addEventListener('change', render);
}
function generateGeometricLayouts() {
let sphereVector = new THREE.Vector3();
let helixVector = new THREE.Vector3();
for (let i = 0, l = targets.simple.length; i < l; i++) {
addSphereObject(sphereVector, i, l);
addHelixObject(helixVector, i);
addGridObject(i);
}
}
function addSphereObject(sphereVector, index, length) {
const phi = Math.acos(-1 + (2 * index) / length);
const theta = Math.sqrt(length * Math.PI) * phi;
let object = new THREE.Object3D();
object.position.setFromSphericalCoords(800, phi, theta);
sphereVector.copy(object.position).multiplyScalar(2);
object.lookAt(sphereVector);
targets.sphere.push(object);
}
function addHelixObject(helixVector, index) {
const theta = index * 0.175 + Math.PI;
const y = -(index * 8) + 450;
let object = new THREE.Object3D();
object.position.setFromCylindricalCoords(900, theta, y);
helixVector.x = object.position.x * 2;
helixVector.y = object.position.y;
helixVector.z = object.position.z * 2;
object.lookAt(helixVector);
targets.helix.push(object);
}
function addGridObject(index) {
let object = new THREE.Object3D();
object.position.x = ((index % 5) * 400) - 800;
object.position.y = (-(Math.floor(index / 5) % 5) * 400) + 800;
object.position.z = (Math.floor(index / 25)) * 1000 - 2000;
targets.grid.push(object);
}
function transform(target, duration) {
TWEEN.removeAll();
for (let i = 0; i < targets.simple.length; i++) {
let object = targets.simple[i];
let targetObject = target[i];
transformObjectPosition(object, targetObject, duration);
transformObjectRotation(object, targetObject, duration);
}
new TWEEN.Tween(this)
.to({}, duration * 2)
.onUpdate(render)
.start();
}
function transformObjectPosition(object, targetObject, duration) {
new TWEEN.Tween(object.position)
.to({
x: targetObject.position.x,
y: targetObject.position.y,
z: targetObject.position.z
}, Math.random() * duration + duration)
.easing(TWEEN.Easing.Exponential.InOut)
.start();
}
function transformObjectRotation(object, targetObject, duration) {
new TWEEN.Tween(object.rotation)
.to({
x: targetObject.rotation.x,
y: targetObject.rotation.y,
z: targetObject.rotation.z
}, Math.random() * duration + duration)
.easing(TWEEN.Easing.Exponential.InOut)
.start();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
render();
}
function render() {
renderer.render(scene, camera);
}
function animate() {
requestAnimationFrame(animate);
TWEEN.update();
controls.update();
composer.render();
}
Конечный источник:
Результат:
https://lvlrsajjad.github.io/p-t-example/
