Skip to content

Commit 5c275f9

Browse files
cssoulcssoul
authored
飘雪的demo
1 parent 3c2795b commit 5c275f9

File tree

1 file changed

+149
-0
lines changed

1 file changed

+149
-0
lines changed

‎demo/snow.html‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<html>
2+
<head>
3+
<title>飘雪效果</title>
4+
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
5+
<script type="text/javascript" src="http://www.17sucai.com/preview/377295/2017-12-28/%E9%9B%AA%E8%8A%B1%E9%A3%98%E8%90%BD%E4%BB%A3%E7%A0%81/js/three.js"></script>
6+
</head>
7+
8+
<body style="background:rgba(0,0,0,1);">
9+
<div class="snow" style="height:100%; position:fixed; left:0px; top:0px; right:0px; bottom:0px; pointer-events: none;z-index: 9999;">
10+
<canvas width="100%" height="100%" style="position: absolute;left: 0;top: 0;"></canvas>
11+
</div>
12+
13+
<script type="text/javascript">
14+
15+
$(function() {
16+
17+
var container = document.querySelector(".snow");
18+
19+
$(container).bind('click mousemove',
20+
function(evt) {
21+
this.style.display = 'none';
22+
var x = evt.pageX,
23+
y = evt.pageY
24+
if ($(document).scrollTop() > 0 || $(document).scrollTop() > 0) {
25+
x = x - $(document).scrollLeft() + 1 ;
26+
y = y - $(document).scrollTop() + 1;
27+
}
28+
evt.preventDefault();
29+
evt.stopPropagation();
30+
var under = document.elementFromPoint(x, y);
31+
var evtType = evt.type === 'click' ? 'click': 'mouseenter'
32+
if (evt.type === 'click') {
33+
$(under)[0].click();
34+
} else {
35+
$(under).trigger('mouseenter');
36+
}
37+
$('body').css('cursor', 'default');
38+
this.style.display = '';
39+
return false;
40+
});
41+
42+
var containerWidth = $(container).width();
43+
var containerHeight = $(container).height();
44+
var particle;
45+
var camera;
46+
var scene;
47+
var renderer;
48+
var mouseX = 0;
49+
var mouseY = 0;
50+
var windowHalfX = window.innerWidth / 2;
51+
var windowHalfY = window.innerHeight / 2;
52+
var particles = [];
53+
var particleImages = [new Image(), new Image(), new Image(), new Image(), new Image()];
54+
55+
particleImages[0].src = "http://www.17sucai.com/preview/377295/2017-12-28/%E9%9B%AA%E8%8A%B1%E9%A3%98%E8%90%BD%E4%BB%A3%E7%A0%81/img/151375665240370100.png";
56+
particleImages[1].src = "http://www.17sucai.com/preview/377295/2017-12-28/%E9%9B%AA%E8%8A%B1%E9%A3%98%E8%90%BD%E4%BB%A3%E7%A0%81/img/151375668550091372.png";
57+
particleImages[2].src = "http://www.17sucai.com/preview/377295/2017-12-28/%E9%9B%AA%E8%8A%B1%E9%A3%98%E8%90%BD%E4%BB%A3%E7%A0%81/img/151375669416355455.png";
58+
particleImages[3].src = "http://www.17sucai.com/preview/377295/2017-12-28/%E9%9B%AA%E8%8A%B1%E9%A3%98%E8%90%BD%E4%BB%A3%E7%A0%81/img/151375670204115466.png";
59+
particleImages[4].src = "http://www.17sucai.com/preview/377295/2017-12-28/%E9%9B%AA%E8%8A%B1%E9%A3%98%E8%90%BD%E4%BB%A3%E7%A0%81/img/151375671039447316.png";
60+
var snowNum = 300;
61+
62+
function init() {
63+
camera = new THREE.PerspectiveCamera(75, containerWidth / containerHeight, 1, 10000);
64+
camera.position.z = 1000;
65+
scene = new THREE.Scene();
66+
scene.add(camera);
67+
renderer = new THREE.CanvasRenderer();
68+
renderer.setSize(containerWidth, containerHeight);
69+
for (var i = 0; i < snowNum; i++) {
70+
var material = new THREE.ParticleBasicMaterial({
71+
map: new THREE.Texture(particleImages[i % 5])
72+
});
73+
particle = new Particle3D(material);
74+
particle.position.x = Math.random() * 2000 - 1000;
75+
particle.position.y = Math.random() * 2000 - 1000;
76+
particle.position.z = Math.random() * 2000 - 1000;
77+
particle.scale.x = particle.scale.y = 1;
78+
scene.add(particle);
79+
particles.push(particle)
80+
}
81+
container.appendChild(renderer.domElement);
82+
document.addEventListener("mousemove", onDocumentMouseMove, false);
83+
document.addEventListener("touchstart", onDocumentTouchStart, false);
84+
document.addEventListener("touchmove", onDocumentTouchMove, false);
85+
setInterval(loop, 1000 / 50)
86+
}
87+
function onDocumentMouseMove(event) {
88+
mouseX = event.clientX - windowHalfX;
89+
mouseY = event.clientY - windowHalfY
90+
}
91+
function onDocumentTouchStart(event) {
92+
if (event.touches.length === 1) {
93+
event.preventDefault();
94+
mouseX = event.touches[0].pageX - windowHalfX;
95+
mouseY = event.touches[0].pageY - windowHalfY
96+
}
97+
}
98+
function onDocumentTouchMove(event) {
99+
if (event.touches.length === 1) {
100+
event.preventDefault();
101+
mouseX = event.touches[0].pageX - windowHalfX;
102+
mouseY = event.touches[0].pageY - windowHalfY
103+
}
104+
}
105+
function loop() {
106+
for (var i = 0; i < particles.length; i++) {
107+
var particle = particles[i];
108+
// 滚动到楼层模块，减少雪花 （自定义）
109+
if ($(window).scrollTop() < 1000) {
110+
particle.scale.x = particle.scale.y = 1;
111+
} else {
112+
if (i > particles.length / 5 * 3) {
113+
particle.scale.x = particle.scale.y = 0;
114+
} else {
115+
particle.scale.x = particle.scale.y = 0.8;
116+
}
117+
}
118+
particle.updatePhysics();
119+
with(particle.position) {
120+
if (y < -1000) {
121+
y += 2000
122+
}
123+
if (x > 1000) {
124+
x -= 2000
125+
} else {
126+
if (x < -1000) {
127+
x += 2000
128+
}
129+
}
130+
if (z > 1000) {
131+
z -= 2000
132+
} else {
133+
if (z < -1000) {
134+
z += 2000
135+
}
136+
}
137+
}
138+
}
139+
camera.position.x += (mouseX - camera.position.x) * 0.005;
140+
camera.position.y += ( - mouseY - camera.position.y) * 0.005;
141+
camera.lookAt(scene.position);
142+
renderer.render(scene, camera)
143+
}
144+
init();
145+
});
146+
</script>
147+
</body>
148+
149+
</html>

0 commit comments

Comments
 (0)