comingsoon.js

const preload = () => {

        let manager = new THREE.LoadingManager();
        manager.onLoad = function () {
            const environment = new Environment(typo, particle);
        }

        var typo = null;
        const loader = new THREE.FontLoader(manager);
        const font = loader.load('https://res.cloudinary.com/dydre7amr/raw/upload/v1612950355/font_zsd4dr.json', function (font) { typo = font; });
        const particle = new THREE.TextureLoader(manager).load('https://res.cloudinary.com/dfvtkoboz/image/upload/v1605013866/particle_a64uzf.png');

    }

    if (document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll))
        preload();
    else
        document.addEventListener("DOMContentLoaded", preload);

    class Environment {

        constructor(font, particle) {

            this.font = font;
            this.particle = particle;
            this.container = document.querySelector('#magic');
            this.scene = new THREE.Scene();
            this.createCamera();
            this.createRenderer();
            this.setup()
            this.bindEvents();
        }

        bindEvents() {

            window.addEventListener('resize', this.onWindowResize.bind(this));

        }

        setup() {

            this.createParticles = new CreateParticles(this.scene, this.font, this.particle, this.camera, this.renderer);
        }

        render() {

            this.createParticles.render()
            this.renderer.render(this.scene, this.camera)
        }

        createCamera() {

            this.camera = new THREE.PerspectiveCamera(65, this.container.clientWidth / this.container.clientHeight, 1, 10000);
            this.camera.position.set(0, 0, 100);

        }

        createRenderer() {

            this.renderer = new THREE.WebGLRenderer();
            this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);

            this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

            this.renderer.outputEncoding = THREE.sRGBEncoding;
            this.container.appendChild(this.renderer.domElement);

            this.renderer.setAnimationLoop(() => { this.render() })

        }

        onWindowResize() {

            this.camera.aspect = this.container.clientWidth / this.container.clientHeight;
            this.camera.updateProjectionMatrix();
            this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);

        }
    }

    class CreateParticles {

        constructor(scene, font, particleImg, camera, renderer) {

            this.scene = scene;
            this.font = font;
            this.particleImg = particleImg;
            this.camera = camera;
            this.renderer = renderer;

            this.raycaster = new THREE.Raycaster();
            this.mouse = new THREE.Vector2(-200, 200);

            this.colorChange = new THREE.Color();

            this.buttom = false;

            this.data = {

                text: 'Coming Soon',
                amount: 1500,
                particleSize: 1,
                particleColor: 0xFF0000,
                textSize: 16,
                area: 250,
                ease: .05,
            }

            this.setup();
            this.bindEvents();

        }


        setup() {

            const geometry = new THREE.PlaneGeometry(this.visibleWidthAtZDepth(100, this.camera), this.visibleHeightAtZDepth(100, this.camera));
            const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, transparent: true });
            this.planeArea = new THREE.Mesh(geometry, material);
            this.planeArea.visible = false;
            this.createText();

        }

        bindEvents() {

            document.addEventListener('mousedown', this.onMouseDown.bind(this));
            document.addEventListener('mousemove', this.onMouseMove.bind(this));
            document.addEventListener('mouseup', this.onMouseUp.bind(this));

        }

        onMouseDown() {

            this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            this.mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

            const vector = new THREE.Vector3(this.mouse.x, this.mouse.y, 0.5);
            vector.unproject(this.camera);
            const dir = vector.sub(this.camera.position).normalize();
            const distance = - this.camera.position.z / dir.z;
            this.currenPosition = this.camera.position.clone().add(dir.multiplyScalar(distance));

            const pos = this.particles.geometry.attributes.position;
            this.buttom = true;
            this.data.ease = .01;

        }

        onMouseUp() {

            this.buttom = false;
            this.data.ease = .05;
        }

        onMouseMove() {

            this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            this.mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

        }

        render(level) {

            const time = ((.001 * performance.now()) % 12) / 12;
            const zigzagTime = (1 + (Math.sin(time * 2 * Math.PI))) / 6;

            this.raycaster.setFromCamera(this.mouse, this.camera);

            const intersects = this.raycaster.intersectObject(this.planeArea);

            if (intersects.length > 0) {

                const pos = this.particles.geometry.attributes.position;
                const copy = this.geometryCopy.attributes.position;
                const coulors = this.particles.geometry.attributes.customColor;
                const size = this.particles.geometry.attributes.size;

                const mx = intersects[0].point.x;
                const my = intersects[0].point.y;
                const mz = intersects[0].point.z;

                for (var i = 0, l = pos.count; i < l; i++) {

                    const initX = copy.getX(i);
                    const initY = copy.getY(i);
                    const initZ = copy.getZ(i);

                    let px = pos.getX(i);
                    let py = pos.getY(i);
                    let pz = pos.getZ(i);

                    this.colorChange.setHSL(.5, 1, 1)
                    coulors.setXYZ(i, this.colorChange.r, this.colorChange.g, this.colorChange.b)
                    coulors.needsUpdate = true;

                    size.array[i] = this.data.particleSize;
                    size.needsUpdate = true;

                    let dx = mx - px;
                    let dy = my - py;
                    const dz = mz - pz;

                    const mouseDistance = this.distance(mx, my, px, py)
                    let d = (dx = mx - px) * dx + (dy = my - py) * dy;
                    const f = - this.data.area / d;

                    if (this.buttom) {

                        const t = Math.atan2(dy, dx);
                        px -= f * Math.cos(t);
                        py -= f * Math.sin(t);

                        this.colorChange.setHSL(.5 + zigzagTime, 1.0, .5)
                        coulors.setXYZ(i, this.colorChange.r, this.colorChange.g, this.colorChange.b)
                        coulors.needsUpdate = true;

                        if ((px > (initX + 70)) || (px < (initX - 70)) || (py > (initY + 70) || (py < (initY - 70)))) {

                            this.colorChange.setHSL(.15, 1.0, .5)
                            coulors.setXYZ(i, this.colorChange.r, this.colorChange.g, this.colorChange.b)
                            coulors.needsUpdate = true;

                        }

                    } else {

                        if (mouseDistance < this.data.area) {

                            if (i % 5 == 0) {

                                const t = Math.atan2(dy, dx);
                                px -= .03 * Math.cos(t);
                                py -= .03 * Math.sin(t);

                                this.colorChange.setHSL(.15, 1.0, .5)
                                coulors.setXYZ(i, this.colorChange.r, this.colorChange.g, this.colorChange.b)
                                coulors.needsUpdate = true;

                                size.array[i] = this.data.particleSize / 1.2;
                                size.needsUpdate = true;

                            } else {

                                const t = Math.atan2(dy, dx);
                                px += f * Math.cos(t);
                                py += f * Math.sin(t);

                                pos.setXYZ(i, px, py, pz);
                                pos.needsUpdate = true;

                                size.array[i] = this.data.particleSize * 1.3;
                                size.needsUpdate = true;
                            }

                            if ((px > (initX + 10)) || (px < (initX - 10)) || (py > (initY + 10) || (py < (initY - 10)))) {

                                this.colorChange.setHSL(.15, 1.0, .5)
                                coulors.setXYZ(i, this.colorChange.r, this.colorChange.g, this.colorChange.b)
                                coulors.needsUpdate = true;

                                size.array[i] = this.data.particleSize / 1.8;
                                size.needsUpdate = true;

                            }
                        }

                    }

                    px += (initX - px) * this.data.ease;
                    py += (initY - py) * this.data.ease;
                    pz += (initZ - pz) * this.data.ease;

                    pos.setXYZ(i, px, py, pz);
                    pos.needsUpdate = true;

                }
            }
        }

        createText() {

            let thePoints = [];

            let shapes = this.font.generateShapes(this.data.text, this.data.textSize);
            let geometry = new THREE.ShapeGeometry(shapes);
            geometry.computeBoundingBox();

            const xMid = - 0.5 * (geometry.boundingBox.max.x - geometry.boundingBox.min.x);
            const yMid = (geometry.boundingBox.max.y - geometry.boundingBox.min.y) / 2.85;

            geometry.center();

            let holeShapes = [];

            for (let q = 0; q < shapes.length; q++) {

                let shape = shapes[q];

                if (shape.holes && shape.holes.length > 0) {

                    for (let j = 0; j < shape.holes.length; j++) {

                        let hole = shape.holes[j];
                        holeShapes.push(hole);
                    }
                }

            }
            shapes.push.apply(shapes, holeShapes);

            let colors = [];
            let sizes = [];

            for (let x = 0; x < shapes.length; x++) {

                let shape = shapes[x];

                const amountPoints = (shape.type == 'Path') ? this.data.amount / 2 : this.data.amount;

                let points = shape.getSpacedPoints(amountPoints);

                points.forEach((element, z) => {

                    const a = new THREE.Vector3(element.x, element.y, 0);
                    thePoints.push(a);
                    colors.push(this.colorChange.r, this.colorChange.g, this.colorChange.b);
                    sizes.push(1)

                });
            }

            let geoParticles = new THREE.BufferGeometry().setFromPoints(thePoints);
            geoParticles.translate(xMid, yMid, 0);

            geoParticles.setAttribute('customColor', new THREE.Float32BufferAttribute(colors, 3));
            geoParticles.setAttribute('size', new THREE.Float32BufferAttribute(sizes, 1));

            const material = new THREE.ShaderMaterial({

                uniforms: {
                    color: { value: new THREE.Color(0xffffff) },
                    pointTexture: { value: this.particleImg }
                },
                vertexShader: document.getElementById('vertexshader').textContent,
                fragmentShader: document.getElementById('fragmentshader').textContent,

                blending: THREE.AdditiveBlending,
                depthTest: false,
                transparent: true,
            });

            this.particles = new THREE.Points(geoParticles, material);
            this.scene.add(this.particles);

            this.geometryCopy = new THREE.BufferGeometry();
            this.geometryCopy.copy(this.particles.geometry);

        }

        visibleHeightAtZDepth(depth, camera) {

            const cameraOffset = camera.position.z;
            if (depth < cameraOffset) depth -= cameraOffset;
            else depth += cameraOffset;

            const vFOV = camera.fov * Math.PI / 180;

            return 2 * Math.tan(vFOV / 2) * Math.abs(depth);
        }

        visibleWidthAtZDepth(depth, camera) {

            const height = this.visibleHeightAtZDepth(depth, camera);
            return height * camera.aspect;

        }

        distance(x1, y1, x2, y2) {

            return Math.sqrt(Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2));
        }
    }