Шикарный 3D снег на HTML5 Canvas
Пожалуй, один из лучших вариантов снега на HTML5. Мало того, что снежинки падают очень реалистично, так ещё этот снег реагирует на движение курсора по экрану
Для начала посмотрите ДЕМО
Моё тестирование в фидле: КЛИК
Установка:
1#: После /head на нужных страницах вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
<script type="text/javascript" src="/js/ThreeCanvas.js"></script> <script type="text/javascript" src="/js/Snow.js"></script> <script> var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT = window.innerHeight; var container; var particle; var camera; var scene; var renderer; var mouseX = 0; var mouseY = 0; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; var particles = []; var particleImage = new Image(); //THREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" ); particleImage.src = '/img/ParticleSmoke.png'; function init() { container = document.createElement('div'); document.body.appendChild(container); camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000); camera.position.z = 1000; scene = new THREE.Scene(); scene.add(camera); renderer = new THREE.CanvasRenderer(); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); var material = new THREE.ParticleBasicMaterial({ map: new THREE.Texture(particleImage) }); for (var i = 0; i < 500; i++) { particle = new Particle3D(material); particle.position.x = Math.random() * 2000 - 1000; particle.position.y = Math.random() * 2000 - 1000; particle.position.z = Math.random() * 2000 - 1000; particle.scale.x = particle.scale.y = 1; scene.add(particle); particles.push(particle); } container.appendChild(renderer.domElement); document.addEventListener('mousemove', onDocumentMouseMove, false); document.addEventListener('touchstart', onDocumentTouchStart, false); document.addEventListener('touchmove', onDocumentTouchMove, false); setInterval(loop, 1000 / 60); } function onDocumentMouseMove(event) { mouseX = event.clientX - windowHalfX; mouseY = event.clientY - windowHalfY; } function onDocumentTouchStart(event) { if (event.touches.length == 1) { event.preventDefault(); mouseX = event.touches[0].pageX - windowHalfX; mouseY = event.touches[0].pageY - windowHalfY; } } function onDocumentTouchMove(event) { if (event.touches.length == 1) { event.preventDefault(); mouseX = event.touches[0].pageX - windowHalfX; mouseY = event.touches[0].pageY - windowHalfY; } } // function loop() { for (var i = 0; i < particles.length; i++) { var particle = particles[i]; particle.updatePhysics(); with(particle.position) { if (y < -1000) y += 2000; if (x > 1000) x -= 2000; else if (x < -1000) x += 2000; if (z > 1000) z -= 2000; else if (z < -1000) z += 2000; } } camera.position.x += (mouseX - camera.position.x) * 0.05; camera.position.y += (-mouseY - camera.position.y) * 0.05; camera.lookAt(scene.position); renderer.render(scene, camera); } window.onload = function () { init() }</script> |
Осталось лишь залить два JS файла из прикреплённого архива в папку js и картинку в папку img
Отлично, а можно пример как сделать внутри блока, а не на заднем фоне?
Вот так: http://jsfiddle.net/apoucoz/e5njqs9c/3/
А как сделать кнопку отключения скрипа?
на куках или локальном хранилище, не большой скриптик на js и кнопочка
Кнопка есть а скриптик какой?
к кнопке привязать js сценарий и проверять значение куки, если она скажем 1 то скрипт активен если 0 то не активен
вы знакомы с js в целом?
Не знаком)
Вот такое тебе решение накидал с кнопочкой отключения и включения снега: http://jsfiddle.net/apoucoz/e5njqs9c/2/
Многие пишут, что скрипт устанавливается вниз сайта.
Нашел на форумах, что надо добавить после: container = document.createElement('div');
вот это:
container.style.position = 'fixed';
container.style.top = '0px';
container.style.pointerEvents = 'none';