// INIT
mainColor = #070707
secondaryColor = #80d0c7
bgColor = #13547a
body, html width: 100%; height: 100%; overflow: hidden background-color: bgColor margin: 0 font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif background: bgColor; background: linear-gradient(45deg, bgColor 0%,secondaryColor 100%);
.f position: fixed bottom: 5px right: 15px font-family: 'Arial' font-size: 0.7rem color: mainColor text-align: center; a font-size: 0.8rem color: secondaryColor
const { WebGLRenderer, Scene, PerspectiveCamera, Color, Line, SplineCurve, Path, Vector2, ShaderMaterial,
} = THREE;
const getRandomFloat = (min, max) => (Math.random() * (max - min) + min);
/* ---- CORE ---- */
let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
class Webgl { constructor(w, h) { this.meshCount = 0; this.meshListeners = []; this.renderer = new WebGLRenderer({ antialias: true, alpha: true }); this.renderer.setPixelRatio(window.devicePixelRatio); this.scene = new Scene(); this.camera = new PerspectiveCamera(50, w / h, 1, 1000); this.camera.position.set(0, 0, 2); this.dom = this.renderer.domElement; this.update = this.update.bind(this); this.resize = this.resize.bind(this); this.resize(w, h); // set render size this.mouseX = 0; this.mouseY = 0; document.addEventListener('mousemove', this.handleMouseMove.bind(this)); } add(mesh) { this.scene.add(mesh); if (!mesh.update) return; this.meshListeners.push(mesh.update); this.meshCount++; } handleMouseMove(event) { const AMPL = 5; this.mouseX = -((event.clientX / window.innerWidth) - 0.5) * AMPL; this.mouseY = ((event.clientY / window.innerHeight) - 0.5) * AMPL; } update() { this.camera.position.x += (this.mouseX - this.camera.position.x) * .05; this.camera.position.y += (this.mouseY - this.camera.position.y) * .05; this.camera.lookAt(this.scene.position); let i = this.meshCount; while (--i >= 0) { this.meshListeners[i].apply(this, null); } this.renderer.render(this.scene, this.camera); } resize(w, h) { this.camera.aspect = w / h; this.camera.updateProjectionMatrix(); this.renderer.setSize(w, h); }
}
const webgl = new Webgl(windowWidth, windowHeight);
document.body.appendChild(webgl.dom);
/* ---- ------------- ---- */
/* ---- CREATING ZONE ---- */
const lineVert = ` varying vec2 vUv; varying vec3 vPos; void main() { vUv = uv; vPos = position; vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 ); gl_Position = projectionMatrix * mvPosition; }
`;
const lineFrag = ` uniform vec3 color; uniform float timer; uniform float lineHeight; uniform float spaceHeight; varying vec2 vUv; varying vec3 vPos; void main() { float t = ceil(lineHeight - mod(vPos.x + timer, spaceHeight)); gl_FragColor = vec4(color, t); }
`;
// OBJECTS
class RandomLineCurve extends Line { constructor({ amplitude = 0.5, nbrOfPoints = 4, length = 5, orientationY = -2, speed = 0.04 } = {}) { const MAX_LENGTH = length / nbrOfPoints; const MIN_LENGTH = MAX_LENGTH * 0.5; const points = []; points.push(new Vector2(0, 0)); for (let i = 0; i < nbrOfPoints; i++) { points.push(new Vector2( (MAX_LENGTH * i) + getRandomFloat(MIN_LENGTH, MAX_LENGTH), (amplitude * orientationY * i) + getRandomFloat(-amplitude, amplitude), )); } const curve = new SplineCurve(points); const path = new Path(curve.getPoints(50)); const geometry = path.createPointsGeometry(50); const material = new ShaderMaterial({ vertexShader: lineVert, fragmentShader: lineFrag, uniforms: { color: { type: 'v3', value: new Color(0xffffff) }, timer: { type: 'f', value: getRandomFloat(0, 100) }, lineHeight: { type: 'f', value: 2 }, spaceHeight: { type: 'f', value: 20 }, }, transparent: true, }); super(geometry, material); this.speed = speed; this.update = this.update.bind(this); } update() { // this.rotation.x += 0.01; this.material.uniforms.timer.value += this.speed; // this.rotation.y += 0.03; }
}
function addLine() { const curve = new RandomLineCurve({ orientationY: getRandomFloat(0, 2), length: getRandomFloat(1, 4), amplitude: getRandomFloat(0.2, 0.6), nbrOfPoints: getRandomFloat(2, 6), speed: getRandomFloat(0.02, 0.08), }); curve.rotation.x = getRandomFloat(0, Math.PI * 180); curve.position.set( getRandomFloat(-4, 2), getRandomFloat(-2, 2), getRandomFloat(-2, 2), ); // curve.rotation.x = getRandomFloat(0, Math.PI * 180); webgl.add(curve);
}
// START
for (let i = 0; i < 500; i++) { addLine();
}
/* ---- CREATING ZONE END ---- */
/**/
/**/
/**/ /* ---- ON RESIZE ---- */
/**/ function onResize() {
/**/ windowWidth = window.innerWidth;
/**/ windowHeight = window.innerHeight;
/**/ webgl.resize(windowWidth, windowHeight);
/**/ }
/**/ window.addEventListener('resize', onResize);
/**/ window.addEventListener('orientationchange', onResize);
/**/ /* ---- LOOP ---- */
/**/ function _loop() {
/**/ webgl.update();
/**/ requestAnimationFrame(_loop);
/**/ }
/**/ _loop();
