Уникальный 3D снег на HTML5 Canvas для uCoz
827материалов
228тем на форуме
3004комментария
6157пользователей

Уникальный 3D снег на HTML5 Canvas для uCoz


Скрипт просто чудесен. Когда вы будете водить курсором по странице сайта — снег будет вращаться в 3D перспективе. Выглядит очень здорово и свежо

УСТАНОВКА:

Шаг 1.

После </head> на нужных вам страницах вставляйте этот код:
Код
<script type="text/javascript" src="http://webo4ka.ru/Ucoz8/ThreeCanvas.js"></script>  
<script type="text/javascript" src="http://webo4ka.ru/Ucoz8/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( "http://webo4ka.ru/Ucoz8/ParticleSmoke.png" );  
particleImage.src = 'http://webo4ka.ru/Ucoz8/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>

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 07.02.2014 в 03:03
Материал просмотрен: 1425 раз
Категория материала: Скрипты для uCoz
К материалу оставлены: 3 комментария

Пожаловаться
Сказать спасибо
Источник

3 комментария


Бармен
Да отличный снег. smile
Umar Nazirov 03.10.2015 10:022
+1
как установит?
Ромчик
Robot @Ромчик 03.10.2015 14:053
+1
Как фон?
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта