91 lines
2.8 KiB
JavaScript
91 lines
2.8 KiB
JavaScript
$(function () {
|
|
var SEPARATION = 100,
|
|
AMOUNTX = 50,
|
|
AMOUNTY = 50;
|
|
var container;
|
|
var camera, scene, renderer;
|
|
var particles, particle, count = 0;
|
|
var mouseX = 0,
|
|
mouseY = 0;
|
|
var windowHalfX = window.innerWidth / 2;
|
|
var windowHalfY = window.innerHeight / 2;
|
|
init();
|
|
animate();
|
|
|
|
function init() {
|
|
container = document.createElement("div");
|
|
container.style.position = "fixed";
|
|
container.style.top = "0px";
|
|
container.style.left = "0px";
|
|
container.style.zIndex = "-1";
|
|
container.style.opacity = "0.5";
|
|
document.body.appendChild(container);
|
|
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
|
|
camera.position.z = 1000;
|
|
scene = new THREE.Scene();
|
|
particles = new Array();
|
|
var PI2 = Math.PI * 2;
|
|
var material = new THREE.SpriteCanvasMaterial({
|
|
color: 10263708,
|
|
program: function (context) {
|
|
context.beginPath();
|
|
context.arc(0, 0, 0.5, 0, PI2, true);
|
|
context.fill()
|
|
}
|
|
});
|
|
var i = 0;
|
|
for (var ix = 0; ix < AMOUNTX; ix++) {
|
|
for (var iy = 0; iy < AMOUNTY; iy++) {
|
|
particle = particles[i++] = new THREE.Sprite(material);
|
|
particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
|
|
particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
|
|
scene.add(particle)
|
|
}
|
|
}
|
|
renderer = new THREE.CanvasRenderer({
|
|
alpha: true
|
|
});
|
|
renderer.setPixelRatio(window.devicePixelRatio);
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
container.appendChild(renderer.domElement);
|
|
document.addEventListener("mousemove", onDocumentMouseMove, false);
|
|
window.addEventListener("resize", onWindowResize, false)
|
|
}
|
|
|
|
function onWindowResize() {
|
|
windowHalfX = window.innerWidth / 2;
|
|
windowHalfY = window.innerHeight / 2;
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(window.innerWidth, window.innerHeight)
|
|
}
|
|
|
|
function onDocumentMouseMove(event) {
|
|
mouseX = event.clientX - windowHalfX
|
|
}
|
|
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
render()
|
|
}
|
|
|
|
function render() {
|
|
camera.position.x += (mouseX - camera.position.x) * 0.05;
|
|
camera.position.y = 362.05;
|
|
camera.lookAt({
|
|
x: scene.position.x,
|
|
y: window.innerHeight / 3,
|
|
z: scene.position.z
|
|
});
|
|
var i = 0;
|
|
for (var ix = 0; ix < AMOUNTX; ix++) {
|
|
for (var iy = 0; iy < AMOUNTY; iy++) {
|
|
particle = particles[i++];
|
|
particle.position.y = (Math.sin((ix + count) * 0.3) * 50) + (Math.sin((iy + count) * 0.5) * 50);
|
|
particle.scale.x = particle.scale.y = (Math.sin((ix + count) * 0.3) + 1) * 4 + (Math.sin((iy + count) * 0.5) + 1) * 4
|
|
}
|
|
}
|
|
renderer.render(scene, camera);
|
|
count += 0.1
|
|
}
|
|
}); |