How to insert js to WordPress post

[Tubesec]

I have a WordPress landing page. I'd like to have this animated smoke js code in the background on this landing page, but I'm not sure how.

>>> Codepen <<<

External scripts

https://cdnjs.cloudflare.com/ajax/libs/three.js/0.146.0/three.min.js

// Smoke Class
// By Marco Biedermann https://codepen.io/marcobiedermann/pen/jympXQ
class Smoke {
    constructor(options) {
        const defaults = {
            width: window.innerWidth,
            height: window.innerHeight
        };

        Object.assign(this, options, defaults);
        this.onResize = this.onResize.bind(this);

        this.addEventListeners();
        this.init();
    }

    init() {
        const { width, height } = this;

        this.clock = new THREE.Clock();

        const renderer = (this.renderer = new THREE.WebGLRenderer());

        renderer.setSize(width, height);

        this.scene = new THREE.Scene();

        const meshGeometry = new THREE.BufferGeometry(200, 200, 200);
        const meshMaterial = new THREE.MeshLambertMaterial({
            color: 0xaa6666,
            wireframe: false
        });
        this.mesh = new THREE.Mesh(meshGeometry, meshMaterial);

        this.cubeSineDriver = 0;

        this.addCamera();
        this.addLights();
        this.addParticles();
        // this.addBackground();

        document.body.appendChild(renderer.domElement);
    }

    evolveSmoke(delta) {
        const { smokeParticles } = this;

        let smokeParticlesLength = smokeParticles.length;

        while (smokeParticlesLength--) {
            smokeParticles[smokeParticlesLength].rotation.z += delta * 0.2;
        }
    }

    addLights() {
        const { scene } = this;
        const light = new THREE.DirectionalLight(0xffffff, 0.75);

        light.position.set(-1, 0, 1);
        scene.add(light);
    }

    addCamera() {
        const { scene } = this;
        const camera = (this.camera = new THREE.PerspectiveCamera(
            75,
            this.width / this.height,
            1,
            10000
        ));

        camera.position.z = 1000;
        scene.add(camera);
    }

    addParticles() {
        const { scene } = this;
        const textureLoader = new THREE.TextureLoader();
        const smokeParticles = (this.smokeParticles = []);

        textureLoader.load(
            "https://raw.githubusercontent.com/marcobiedermann/playground/master/three.js/smoke-particles/dist/assets/images/clouds.png",
            (texture) => {
                const smokeMaterial = new THREE.MeshLambertMaterial({
                    color: 0xffffff,
                    map: texture,
                    transparent: true
                });
                smokeMaterial.map.minFilter = THREE.LinearFilter;
                const smokeGeometry = new THREE.PlaneBufferGeometry(300, 300);

                const smokeMeshes = [];
                let limit = 150;

                while (limit--) {
                    smokeMeshes[limit] = new THREE.Mesh(
                        smokeGeometry,
                        smokeMaterial
                    );
                    smokeMeshes[limit].position.set(
                        Math.random() * 500 - 250,
                        Math.random() * 500 - 250,
                        Math.random() * 1000 - 100
                    );
                    smokeMeshes[limit].rotation.z = Math.random() * 360;
                    smokeParticles.push(smokeMeshes[limit]);
                    scene.add(smokeMeshes[limit]);
                }
            }
        );
    }

    addBackground() {
        const { scene } = this;
        const textureLoader = new THREE.TextureLoader();
        const textGeometry = new THREE.PlaneBufferGeometry(600, 320);

        textureLoader.load("harry-potter-bg.png", (texture) => {
            const textMaterial = new THREE.MeshLambertMaterial({
                blending: THREE.AdditiveBlending,
                color: 0xffffff,
                map: texture,
                opacity: 1,
                transparent: true
            });
            textMaterial.map.minFilter = THREE.LinearFilter;
            const text = new THREE.Mesh(textGeometry, textMaterial);

            text.position.z = 800;
            scene.add(text);
        });
    }

    render() {
        const { mesh } = this;
        let { cubeSineDriver } = this;

        cubeSineDriver += 0.01;

        mesh.rotation.x += 0.005;
        mesh.rotation.y += 0.01;
        mesh.position.z = 100 + Math.sin(cubeSineDriver) * 500;

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

    update() {
        this.evolveSmoke(this.clock.getDelta());
        this.render();

        requestAnimationFrame(this.update.bind(this));
    }

    onResize() {
        const { camera } = this;

        const windowWidth = window.innerWidth;
        const windowHeight = window.innerHeight;

        camera.aspect = windowWidth / windowHeight;
        camera.updateProjectionMatrix();

        this.renderer.setSize(windowWidth, windowHeight);
    }

    addEventListeners() {
        window.addEventListener("resize", this.onResize);
    }
}
const smoke = new Smoke();
smoke.update();