Простой пример для THREE.js
На самом деле, на сайте фреймворка есть куча документации и примеров, но "одной строчкой" с этой достаточно сложной JS-библиотекой работать не начнёшь, поэтому вот мини-приложение. Вторая причина - в инете много кода, уже не работающего с современными версиями библиотеки, где нет простой Geometry и многого другого.
Проще легендарной заставки "Сквозь Вселенную" (Flying Through Space) из старых версий Windows (и файл-менеджеров!) как-то ничего в голову не пришло, так что почти по её образцу.
Комментарии есть в тексте, предполагается, что листинг сохранён как файл .html в кодировке Юникода UTF-8.
Открыть FlyingThroughSpace.html в текущем окне/вкладке (3 Кб)
Последовательное нажатие клавиш F11 и F5 позволяет запустить пример во весь экран. Фреймворк подключается с внешнего сайта. Полный листинг файла:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Flying Through Space</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
overflow: hidden;
}
</style>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r102/three.min.js"></script>
<body>
<script>
let camera, scene, renderer, stars=[];
function init() {
//Камера:
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 45;
//Сцена:
scene = new THREE.Scene();
//Bизуализатор:
renderer = new THREE.WebGLRenderer();
renderer.setSize (window.innerWidth, window.innerHeight);
document.body.appendChild( renderer.domElement );
}
let DIAP = 1000; //Диапазон позиционирования
let LOW = -DIAP, HI = DIAP, STEP = 10; //Границы позиционирования
function addSphere(){
for ( var z= LOW; z < HI; z+=STEP) { //Будет 2*DIAP/STEP звёзд
let geometry = new THREE.SphereGeometry(0.5, 32, 32); //радиус, кол-во сегментов
let color = new THREE.Color( 0xffffff );
color.setHex( 8388607 + Math.random() * 8388608 ); //Не-тёмные цвета с яркостями компонент более 50%
let material = new THREE.MeshBasicMaterial( {color: color} );
let sphere = new THREE.Mesh(geometry, material);
sphere.position.x = Math.random() * DIAP - DIAP/2;
sphere.position.y = Math.random() * DIAP - DIAP/2;
sphere.position.z = z; //позиция соответствует расстоянию до камеры
sphere.scale.x = sphere.scale.y = 1.5; //немного увеличим
scene.add (sphere); //добавим к сцене
stars.push(sphere); //положим в массив звёзд
}
}
function animateStars() {
for(var i=0; i<stars.length; i++) {
let star = stars[i];
star.position.z += i/10; //сдвиг вперед, чем больше знаменатель, тем ниже видимая скорость
if(star.position.z > HI) star.position.z -= (HI-LOW); //если слишком близко - назад
}
}
function render() {
requestAnimationFrame (render);
renderer.render( scene, camera );
animateStars();
}
init();
addSphere();
//console.log(stars.length);
render();
</script>
<noscript>
<p>Включите в браузере Javascript для работы приложения</p>
</noscript>
</body></html>
Конечно, нетрудно было сделать подобное и, например, на p5.js.
29.05.2022, 15:28 [586 просмотров]