Unfolding Flowers Screensaver
About this app
A fullscreen screensaver of beautifully unfolding flowers using 3D polygons.
Unfolding Flowers Screensaver
Put this on your site
Related apps
VoiceSong Studio - Créez votre propre hit !
Baccara Suite Master - Prédiction 1xBet & Casino
Elite Baccarat - Professional Casino Experience
YTPMV Scan - Ultimate Meme Sequencer
YTPMV Scan - Ultimate Audio Visual Sequencer
Pro-Roulette 0-14 Predictor | Advanced Strategic Analytics
Twelve - The Ultimate 12-Step Daily Harmony Planner
Otter Python - Calc Runner Game
Harmony - Гид по здоровым отношениям и романтике
LoopTube 2016 - Infinite Video Looper & Repeater
VoxTransform - 50+ Pro Video Voice Effects
TinyTip | Simple Tip Calculator & Bill Splitter
Source
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Unfolding Flowers Screensaver</title>
<meta name="description" content="A fullscreen screensaver of beautifully unfolding flowers using 3D polygons." />
<meta name="keywords" content="screensaver, flowers, unfolding, 3d, polygons, three.js" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.151.3/three.min.js"></script>
<style>
body,
html {
margin: 0;
padding: 0;
overflow: hidden;
}
#main-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="main-container"></div>
<script type="text/javascript">
var scene, camera, renderer, flower, petals = [];
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("main-container").appendChild(renderer.domElement);
const geometry = new THREE.ConeGeometry(0.2, 1, 4);
const material = new THREE.MeshBasicMaterial({
color: new THREE.Color(Math.random(), Math.random(), Math.random()),
wireframe: true,
});
flower = new THREE.Object3D();
scene.add(flower);
for (let i = 0; i < 12; i++) {
const petal = new THREE.Mesh(geometry, material);
petal.position.set(Math.sin(i * Math.PI / 6), Math.cos(i * Math.PI / 6), 0);
petal.rotation.z = i * Math.PI / 6;
flower.add(petal);
petals.push(petal);
}
window.addEventListener("resize", onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
flower.rotation.z += 0.01;
for (let i = 0; i < petals.length; i++) {
petals[i].rotation.y += 0.01;
petals[i].material.color.setHSL((i / petals.length + (Date.now() * 0.0005) % 1) % 1, 1, 0.5);
}
renderer.render(scene, camera);
}
init();
animate();
</script>
</body>
</html>
NEW APPS
These are apps made by the community!