snieg
unknown
html
2 years ago
4.2 kB
6
Indexable
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta author="Emilia Adamska Kamil Szews"> <title>Śnieg z point-sprite</title> <style> body { margin: 0; } canvas { display: block; } </style> </head> <body> <script src="https://threejs.org/build/three.js"></script> <script> // Inicjalizacja sceny, kamery i renderera var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Ustawienie tła (dodaj własne tło) var textureLoader = new THREE.TextureLoader(); textureLoader.load('background.png', function (texture) { scene.background = texture; }); // Tworzenie punktu sprite dla efektu śniegu var snowflakeTexture = new THREE.TextureLoader().load('snowflake.png'); // moja tekstura snieżynki var snowflakeMaterial = new THREE.PointsMaterial({ size: 10, map: snowflakeTexture, blending: THREE.AdditiveBlending, depthTest: false, transparent: true }); // Tworzenie grupy punktów dla efektu śniegu var snowflakeCount = 50000; // Ilość punktów śniegu var snowflakeGeometry = new THREE.BufferGeometry(); var positions = new Float32Array(snowflakeCount * 3); var velocities = new Float32Array(snowflakeCount); for (var i = 0; i < snowflakeCount; i++) { positions[i * 3] = Math.random() * 20000 - 10000; //x positions[i * 3 + 1] = Math.random() * 20000 - 10000; //y positions[i * 3 + 2] = Math.random() * 20000 - 10000; //z velocities[i] = 0; // Początkowa prędkość śniegu } snowflakeGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); snowflakeGeometry.setAttribute('velocity', new THREE.BufferAttribute(velocities, 1)); var snowflakes = new THREE.Points(snowflakeGeometry, snowflakeMaterial); scene.add(snowflakes); // Aktualizacja animacji function animate() { requestAnimationFrame(animate); // Aktualizacja pozycji i animacji śniegu var positions = snowflakes.geometry.attributes.position.array; var velocities = snowflakes.geometry.attributes.velocity.array; for (var i = 0; i < snowflakeCount; i++) { velocities[i] += 0.001 + Math.random() * 0.01; positions[i * 3 + 1] -= velocities[i]; if (positions[i * 3 + 1] < -10000) { positions[i * 3 + 1] = 10000; // resetowanie pozycji sniezynki velocities[i] = 0; } } snowflakes.geometry.attributes.position.needsUpdate = true; // Poruszanie się po przestrzeni var speed = 10; if (keys.ArrowUp) camera.position.z -= speed; if (keys.ArrowDown) camera.position.z += speed; if (keys.ArrowLeft) camera.position.x -= speed; if (keys.ArrowRight) camera.position.x += speed; // Renderowanie sceny renderer.render(scene, camera); } // Rozmiar renderera przy zmianie rozmiaru okna window.addEventListener('resize', function () { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }, false); // Obsługa klawiszy var keys = {}; window.addEventListener('keydown', function (event) { keys[event.code] = true; }, false); window.addEventListener('keyup', function (event) { keys[event.code] = false; }, false); // Rozpoczęcie animacji animate(); </script> </body> </html>
Editor is loading...