Skip to content

Instantly share code, notes, and snippets.

@prashnts
Created October 14, 2016 15:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save prashnts/07ebe989ef85c7d0f96aaed5ebde2246 to your computer and use it in GitHub Desktop.
Save prashnts/07ebe989ef85c7d0f96aaed5ebde2246 to your computer and use it in GitHub Desktop.
Three.js Network animation used on CIC 404 pages, such as: https://ducic.ac.in/does-not-exists
function init() {
var e, t = 100,
n = 50,
r = 50,
i, s;
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight,
1, 1e4);
camera.position.z = 100;
scene = new THREE.Scene;
renderer = new THREE.CanvasRenderer;
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("bg")
.appendChild(renderer.domElement);
var o = Math.PI * 2;
var u = new THREE.SpriteCanvasMaterial({
color: 10066329,
program: function (e) {
e.beginPath();
e.arc(0, 0, .5, 0, o, true);
e.fill()
}
});
var a = new THREE.Geometry;
for (var f = 0; f < 50; f++) {
s = new THREE.Sprite(u);
s.position.x = Math.random() * 2 - 1;
s.position.y = Math.random() * 2 - 1;
s.position.z = Math.random() * 2 - 1;
s.position.normalize();
s.position.multiplyScalar(Math.random() * 10 + 450);
s.scale.x = s.scale.y = 10;
scene.add(s);
a.vertices.push(s.position)
}
var l = new THREE.Line(a, new THREE.LineBasicMaterial({
color: 4473924,
opacity: .5
}));
scene.add(l);
document.addEventListener("mousemove", onDocumentMouseMove, false);
document.addEventListener("touchstart", onDocumentTouchStart, false);
document.addEventListener("touchmove", onDocumentTouchMove, 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(e) {
mouseX = e.clientX - windowHalfX;
mouseY = e.clientY - windowHalfY
}
function onDocumentTouchStart(e) {
if (e.touches.length > 1) {
e.preventDefault();
mouseX = e.touches[0].pageX - windowHalfX;
mouseY = e.touches[0].pageY - windowHalfY
}
}
function onDocumentTouchMove(e) {
if (e.touches.length == 1) {
e.preventDefault();
mouseX = e.touches[0].pageX - windowHalfX;
mouseY = e.touches[0].pageY - windowHalfY
}
}
function animate() {
requestAnimationFrame(animate);
render()
}
function render() {
camera.position.x += (mouseX - camera.position.x) * .05;
camera.position.y += (-mouseY + 200 - camera.position.y) * .05;
camera.lookAt(scene.position);
renderer.render(scene, camera)
}
var mouseX = 0,
mouseY = 0,
windowHalfX = window.innerWidth / 2,
windowHalfY = window.innerHeight / 2,
SEPARATION = 200,
AMOUNTX = 10,
AMOUNTY = 10,
camera, scene, renderer;
init();
animate()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment