Chase

FEATURED

In this example below you will see how to do a Chase with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by takashi, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright takashi ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Three.js - Chase and Escape</title>
    <style>
        body { margin: 0; overflow: hidden;}
    </style>
</head>

<body id="body">
    <div id="WebGL-output"></div>
  <script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
</body>

</html>


/*Downloaded from https://www.codeseek.co/tksiiii/chase-VdPqrg */
    


/*Downloaded from https://www.codeseek.co/tksiiii/chase-VdPqrg */
    class DustParticles {
    constructor(num = 10) {
        this.num = num;
        this.wrap = new THREE.Object3D();
        for (let i = 0; i < this.num; i++) {
            const size = getRandomNum(800, 100);
            const geometory = new THREE.BoxGeometry(size, size, size);
            const color = 0xFFA133;
            const material = new THREE.MeshLambertMaterial({
                opacity: 1.0,
                wireframe: false,
                transparent: true,
                color: color
            });
            const mesh = new THREE.Mesh(geometory, material);
            const radius = getRandomNum(13000, 7000);
            const theta = THREE.Math.degToRad(getRandomNum(180));
            const phi = THREE.Math.degToRad(getRandomNum(360));
            mesh.position.x = Math.sin(theta) * Math.cos(phi) * radius;
            mesh.position.y = Math.sin(theta) * Math.sin(phi) * radius;
            mesh.position.z = Math.cos(theta) * radius;
            mesh.rotation.x = getRandomNum(360);
            mesh.rotation.y = getRandomNum(360);
            mesh.rotation.z = getRandomNum(360);
            this.wrap.add(mesh);
        }
    }
}

class BoxContainer {
    constructor(width = 100, height = 100, depth = 100, color = 0xffffff) {
        const geometry = new THREE.BoxGeometry(width, height, depth, 10, 10, 10);
        const material = new THREE.MeshLambertMaterial({
            color: color,
            opacity: 1.0,
            wireframe: true,
            depthWrite: false,
            visible: false
        });
        this.mesh = new THREE.Mesh(geometry, material);
    }
}

class Bellwether {
    constructor() {
        const geometry = new THREE.CylinderGeometry(1, 30, 50, 12);
        geometry.rotateX(THREE.Math.degToRad(90));
        const color = new THREE.Color(0xff0000);
        const material = new THREE.MeshLambertMaterial({
            color: color,
            visible: false
        });
        this.mesh = new THREE.Mesh(geometry, material);
        const radius = getRandomNum(1000, 200);
        const theta = THREE.Math.degToRad(getRandomNum(180));
        const phi = THREE.Math.degToRad(getRandomNum(360));
        this.mesh.position.x = Math.sin(theta) * Math.cos(phi) * radius;
        this.mesh.position.y = Math.sin(theta) * Math.sin(phi) * radius;
        this.mesh.position.z = Math.cos(theta) * radius;
        this.velocity = new THREE.Vector3();
        this.acceleration = new THREE.Vector3();
        this.timeX = getRandomNum(10, 0) * 0.1;
        this.timeY = getRandomNum(10, 0) * 0.1;
        this.timeZ = getRandomNum(10, 0) * 0.1;
        this.maxSpeed = 45;
        this.separateMaxSpeed = 30;
        this.separateMaxForce = 30;
    }

    applyForce(f) {
        this.acceleration.add(f.clone());
    }

    update() {
        const maxSpeed = this.maxSpeed;

        // update velocity
        this.velocity.add(this.acceleration);

        // limit velocity
        if (this.velocity.length() > maxSpeed) {
            this.velocity.clampLength(0, maxSpeed);
        }

        // update position
        this.mesh.position.add(this.velocity);
        
        // reset acc
        this.acceleration.multiplyScalar(0);
        
        // head
        const head = this.velocity.clone();
        head.multiplyScalar(10);
        head.add(this.mesh.position);
        this.mesh.lookAt(head);
        
    }

    randomWalk () {
        const acc = new THREE.Vector3();
        this.timeX += this.getRandAddTime();
        this.timeY += this.getRandAddTime();
        this.timeZ += this.getRandAddTime();
        acc.x = Math.cos(this.timeX) * 10;
        acc.y = Math.sin(this.timeY) * 10;
        acc.z = Math.sin(this.timeZ) * 10;
        acc.normalize();
        acc.multiplyScalar(2);
        this.applyForce(acc);
    }

    spiralWalk() {
        this.timeX += 0.12;
        this.timeY += 0.012;
        this.timeZ += 0.0135;
        let baseRadius = 200;
    
        let acc = new THREE.Vector3();
        let theta1 = Math.cos(this.timeY);
        let theta2 = Math.sin(this.timeY);
        
        let radius1 = baseRadius * theta1;
        let radius2 = baseRadius * theta2;
        acc.x = Math.cos(this.timeX) * radius1 + (Math.cos(this.timeZ) * baseRadius);
        acc.y = Math.cos(this.timeX) * radius2 + (Math.sin(this.timeZ) * baseRadius);
        acc.z = Math.sin(this.timeX) * baseRadius;
        this.applyForce(acc);
    }

    getRandAddTime() {
        let randNum = getRandomNum(100, 0);
        let time = 0;
        if (randNum > 90) {
            time = getRandomNum(100, 0) * 0.01;
            if (getRandomNum(10) > 5) {
                time *= -1;
            }
        } else {
            time = 0.01;
        }
        return time;
    }

    getAvoidVector(wall = new THREE.Vector3()) {
        this.mesh.geometry.computeBoundingSphere();
        const boundingSphere = this.mesh.geometry.boundingSphere;

        const toMeVector = new THREE.Vector3();
        toMeVector.subVectors(this.mesh.position, wall);

        const distance = toMeVector.length() - boundingSphere.radius * 2;
        const steerVector = toMeVector.clone();
        steerVector.normalize();
        steerVector.multiplyScalar(1 / (Math.pow(distance, 2)));
        return steerVector;
    }

    avoidBoxContainer(rangeWidth = 80, rangeHeight = 80, rangeDepth = 80) {
        const sumVector = new THREE.Vector3();
        sumVector.add(this.getAvoidVector(new THREE.Vector3(rangeWidth, this.mesh.position.y, this.mesh.position.z)));
        sumVector.add(this.getAvoidVector(new THREE.Vector3(-rangeWidth, this.mesh.position.y, this.mesh.position.z)));
        sumVector.add(this.getAvoidVector(new THREE.Vector3(this.mesh.position.x, rangeHeight, this.mesh.position.z)));
        sumVector.add(this.getAvoidVector(new THREE.Vector3(this.mesh.position.x, -rangeHeight, this.mesh.position.z)));
        sumVector.add(this.getAvoidVector(new THREE.Vector3(this.mesh.position.x, this.mesh.position.y, rangeDepth)));
        sumVector.add(this.getAvoidVector(new THREE.Vector3(this.mesh.position.x, this.mesh.position.y, -rangeDepth)));
        sumVector.multiplyScalar(Math.pow(this.velocity.length(), 4));
        return sumVector;
    }

    avoidDust(dusts) {
    
        const sumVector = new THREE.Vector3();
        let cnt = 0;
        const maxSpeed = this.separateMaxSpeed;
        const maxForce = this.separateMaxForce;
        const steerVector = new THREE.Vector3();

        dusts.forEach((dust) => {
            const effectiveRange = dust.geometry.boundingSphere.radius + 600;
            const dist = this.mesh.position.distanceTo(dust.position);
            if (dist > 0 && dist < effectiveRange) {
                let toMeVector = new THREE.Vector3();
                toMeVector.subVectors(this.mesh.position, dust.position);
                toMeVector.normalize();
                toMeVector.divideScalar(Math.pow(dist, 4));
                sumVector.add(toMeVector);
                cnt++;
            }
        });

        if (cnt > 0) {
            sumVector.divideScalar(cnt);
            sumVector.normalize();
            sumVector.multiplyScalar(maxSpeed);

            steerVector.subVectors(sumVector, this.velocity);
            // limit force
            if (steerVector.length() > maxForce) {
                steerVector.clampLength(0, maxForce);
            }
        }

        return steerVector;
        
    }

}

class Escaper {
    constructor() {
        const geometry = new THREE.CylinderGeometry(1, 24, 60, 12);
        geometry.rotateX(THREE.Math.degToRad(90));
        //const color = new THREE.Color(`hsl(${getRandomNum(360)}, 100%, 50%)`);
        const color = new THREE.Color(0x93deff);
        const material = new THREE.MeshLambertMaterial({
            wireframe: false,
            color: color
        });
        this.mesh = new THREE.Mesh(geometry, material);
        const radius = getRandomNum(100);
        const theta = THREE.Math.degToRad(getRandomNum(180));
        const phi = THREE.Math.degToRad(getRandomNum(360));
        this.mesh.position.x = Math.sin(theta) * Math.cos(phi) * radius;
        this.mesh.position.y = Math.sin(theta) * Math.sin(phi) * radius;
        this.mesh.position.z = Math.cos(theta) * radius;
        this.velocity = new THREE.Vector3();
        this.acceleration = new THREE.Vector3();
        this.maxSpeed = 40;
        this.seekMaxSpeed = 40;
        this.seekMaxForce = 1.0;
    }

    applyForce(f) {
        this.acceleration.add(f.clone());
    }

    update() {
        const maxSpeed = this.maxSpeed;

        // update velocity
        this.velocity.add(this.acceleration);

        // limit velocity
        if (this.velocity.length() > maxSpeed) {
            this.velocity.clampLength(0, maxSpeed);
        }

        // update position
        this.mesh.position.add(this.velocity);
        
        // reset acc
        this.acceleration.multiplyScalar(0);
        
        // head
        const head = this.velocity.clone();
        head.multiplyScalar(10);
        head.add(this.mesh.position);
        this.mesh.lookAt(head);
        
    }

    seek(target = new THREE.Vector3()) {
        const maxSpeed = this.seekMaxSpeed;
        const maxForce = this.seekMaxForce;
        const toGoalVector = new THREE.Vector3();
        toGoalVector.subVectors(target, this.mesh.position);
        const distance = toGoalVector.length();
        toGoalVector.normalize();
        toGoalVector.multiplyScalar(maxSpeed);
        const steerVector = new THREE.Vector3();
        steerVector.subVectors(toGoalVector, this.velocity);
        // limit force
        if (steerVector.length() > maxForce) {
            steerVector.clampLength(0, maxForce);
        }
        return steerVector;
    }

}

class Chaser {
    constructor() {
        const geometry = new THREE.CylinderGeometry(1, 10, 50, 12);
        geometry.rotateX(THREE.Math.degToRad(90));
        const color = new THREE.Color(`hsl(${getRandomNum(360)}, ${0}%, ${getRandomNum(100, 15)}%)`);
        const material = new THREE.MeshLambertMaterial({
            wireframe: false,
            color: color
        });
        this.mesh = new THREE.Mesh(geometry, material);
        const radius = 1000;
        const theta = THREE.Math.degToRad(getRandomNum(180));
        const phi = THREE.Math.degToRad(getRandomNum(360));
        this.mesh.position.x = Math.sin(theta) * Math.cos(phi) * radius;
        this.mesh.position.y = Math.sin(theta) * Math.sin(phi) * radius;
        this.mesh.position.z = Math.cos(theta) * radius;
        this.velocity = new THREE.Vector3();
        this.acceleration = new THREE.Vector3();
        this.maxSpeed = 50;
        this.seekMaxSpeed = getRandomNum(50, 35);
        this.seekMaxForce = getRandomNum(20, 10) * 0.1;
        this.separateMaxSpeed = getRandomNum(120, 100);
        this.separateMaxForce = getRandomNum(70, 30) * 0.1;
    }

    applyForce(f) {
        this.acceleration.add(f.clone());
    }

    update() {
        const maxSpeed = this.maxSpeed;

        // update velocity
        this.velocity.add(this.acceleration);

        // limit velocity
        if (this.velocity.length() > maxSpeed) {
            this.velocity.clampLength(0, maxSpeed);
        }

        // update position
        this.mesh.position.add(this.velocity);
        
        // reset acc
        this.acceleration.multiplyScalar(0);
        
        // head
        const head = this.velocity.clone();
        head.multiplyScalar(10);
        head.add(this.mesh.position);
        this.mesh.lookAt(head);
        
    }

    seek(target = new THREE.Vector3()) {
        const maxSpeed = this.seekMaxSpeed;
        const maxForce = this.seekMaxForce;
        const toGoalVector = new THREE.Vector3();
        toGoalVector.subVectors(target, this.mesh.position);
        toGoalVector.normalize();
        toGoalVector.multiplyScalar(maxSpeed);
        const steerVector = new THREE.Vector3();
        steerVector.subVectors(toGoalVector, this.velocity);
        // limit force
        if (steerVector.length() > maxForce) {
            steerVector.clampLength(0, maxForce);
        }
        return steerVector;
    }

    separate(creatures) {
        const sumVector = new THREE.Vector3();
        let cnt = 0;
        const maxSpeed = this.separateMaxSpeed;
        const maxForce = this.separateMaxForce;
        const effectiveRange = 30;
        const steerVector = new THREE.Vector3();

        creatures.forEach((creature) => {
            const dist = this.mesh.position.distanceTo(creature.mesh.position);
            if (dist > 0 && dist < effectiveRange) {
                let toMeVector = new THREE.Vector3();
                toMeVector.subVectors(this.mesh.position, creature.mesh.position);
                toMeVector.normalize();
                toMeVector.divideScalar(Math.pow(dist, 2));
                sumVector.add(toMeVector);
                cnt++;
            }
        });

        if (cnt > 0) {
            sumVector.divideScalar(cnt);
            sumVector.normalize();
            sumVector.multiplyScalar(maxSpeed);

            steerVector.subVectors(sumVector, this.velocity);
            // limit force
            if (steerVector.length() > maxForce) {
                steerVector.clampLength(0, maxForce);
            }
        }

        return steerVector;
    }

}

class ChaseCamera {
    constructor() {
        this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 20000);
        const radius = getRandomNum(2000);
        const theta = THREE.Math.degToRad(getRandomNum(180));
        const phi = THREE.Math.degToRad(getRandomNum(360));
        this.camera.position.x = Math.sin(theta) * Math.cos(phi) * radius;
        this.camera.position.y = Math.sin(theta) * Math.sin(phi) * radius;
        this.camera.position.z = Math.cos(theta) * radius;
        this.velocity = new THREE.Vector3();
        this.acceleration = new THREE.Vector3();
        this.maxSpeed = 40;
        this.seekMaxSpeed = 40;
        this.seekMaxForce = 4.0;
        this.time = getRandomNum(50) * 0.1;
        this.cameraWorkType = null;
        this.cameraDistanceMax = 2500;
        this.cameraDistanceMin = 200;
        this.cameraDistance = getRandomNum(this.cameraDistanceMax);
    }

    applyForce(f) {
        this.acceleration.add(f.clone());
    }

    update() {
        const maxSpeed = this.maxSpeed;

        // update velocity
        this.velocity.add(this.acceleration);

        // limit velocity
        if (this.velocity.length() > maxSpeed) {
            this.velocity.clampLength(0, maxSpeed);
        }

        // update position
        this.camera.position.add(this.velocity);
        
        // reset acc
        this.acceleration.multiplyScalar(0);
        
    }

    seek(target = new THREE.Vector3()) {
        const maxSpeed = this.seekMaxSpeed;
        const maxForce = this.seekMaxForce;
        const toGoalVector = new THREE.Vector3();
        toGoalVector.subVectors(target, this.camera.position);
        const distance = toGoalVector.length();
        toGoalVector.normalize();
        toGoalVector.multiplyScalar(maxSpeed);
        const steerVector = new THREE.Vector3();
        steerVector.subVectors(toGoalVector, this.velocity);
        // limit force
        if (steerVector.length() > maxForce) {
            steerVector.clampLength(0, maxForce);
        }
        return steerVector;
    }

    lookingZoomInOut(target, type) {
        if (type !== this.cameraWorkType) this.cameraWorkType = 'zoomInOut';
        const targetPos = target.mesh.position.clone();
        this.time += 0.01;
        this.time -= this.cameraDistance * 0.0000023;
        this.cameraDistance = this.cameraDistanceMax * Math.abs(Math.pow(Math.sin(this.time), 10)) + this.cameraDistanceMin;
        this.camera.position.x = targetPos.x;
        this.camera.position.y = targetPos.y;
        this.camera.position.z = targetPos.z + this.cameraDistance;
    }

    lookingAsChase(target, type) {
        const cameraTarget = new THREE.Vector3();
        const offsetTargetPos = target.velocity.clone();
        const escaperPos = target.mesh.position.clone();

        if (type === 'front') {
            offsetTargetPos.multiplyScalar(15);
            cameraTarget.addVectors(target.mesh.position, offsetTargetPos);
            this.setChasePosition(type, cameraTarget);
        } else if (type === 'back') {
            offsetTargetPos.multiplyScalar(-20);
            cameraTarget.addVectors(target.mesh.position, offsetTargetPos);
            this.setChasePosition(type, cameraTarget);
        }
    
        const seek = this.seek(cameraTarget);
        this.applyForce(seek);
    }

    setChasePosition(type, cameraTarget) {
        if (type !== this.cameraWorkType) {
            this.cameraWorkType = type;
            this.camera.position.set(cameraTarget.x, cameraTarget.y, cameraTarget.z);
            this.velocity = new THREE.Vector3();
        }
    }

}

const gui = new dat.GUI();
const guiControls = new function () {
    this.cameraWork = 'zoomInOut';
}
gui.add(guiControls, 'cameraWork', ['zoomInOut', 'front', 'back']).onChange((e) => {
    currentCameraWork = e;
});




const colorPalette = {
    screenBg: 0xf1f1f1,
    ambientLight: 0x777777,
    directionalLight: 0xffffff
}

const getRandomNum = (max = 0, min = 0) => Math.floor(Math.random() * (max + 1 - min)) + min;
const chasers = [];
let chaserGroup;
let offsetPhase = getRandomNum(100, 0);
currentCameraWork = 'zoomInOut';

const render = () => {    

    /* bellwether
    ------------------------------------ */ 
    bellwether.randomWalk();
    // avoid wall
    bellwether.applyForce(bellwether.avoidBoxContainer(
        boxContainer.mesh.geometry.parameters.width / 2,
        boxContainer.mesh.geometry.parameters.height / 2,
        boxContainer.mesh.geometry.parameters.depth / 2
    ));
    // avoid dust
    bellwether.applyForce(bellwether.avoidDust(dustParticles.wrap.children));
    //bellwether.spiralWalk();
    bellwether.update();

    

    /* escaper
    ------------------------------------ */
    const steer = escaper.seek(bellwether.mesh.position);
    escaper.applyForce(steer);
    escaper.update();

    /* chasers
    ------------------------------------ */
    const offsetTarget1 = escaper.velocity.clone();
    const target = new THREE.Vector3();
    offsetTarget1.normalize();
    offsetPhase += 0.01;
    const offsetDistance = 200 * Math.abs(Math.sin(offsetPhase)) + 100;
    //let offsetDistance = 200;
    offsetTarget1.multiplyScalar(offsetDistance);
    target.subVectors(escaper.mesh.position, offsetTarget1);

    chasers.forEach((chaser) => {
        let seek = chaser.seek(target);
        chaser.applyForce(seek);
        let separate1 = chaser.separate(chasers);
        chaser.applyForce(separate1);
        chaser.update();
    });

    /* camera
    ------------------------------------ */
    if (currentCameraWork === 'zoomInOut') {
        chaseCamera.lookingZoomInOut(escaper, currentCameraWork);
    } else {
        chaseCamera.lookingAsChase(escaper, currentCameraWork);
        chaseCamera.update();
    }
    chaseCamera.camera.lookAt(escaper.mesh.position);

    /* renderer
    ------------------------------------ */
    renderer.render(scene, chaseCamera.camera);
    requestAnimationFrame(render);
}

const onResize = () => {
    const width = window.innerWidth;
    const height = window.innerHeight;
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(width, height);
    chaseCamera.camera.aspect = width / height;
    chaseCamera.camera.updateProjectionMatrix();
}

/* scene
-------------------------------------------------------------*/
const scene = new THREE.Scene();
scene.fog = new THREE.Fog(colorPalette.screenBg, 1200, 20000);

/* box for border
-------------------------------------------------------------*/
const boxContainer = new BoxContainer(20000, 20000, 20000);
scene.add(boxContainer.mesh);

/* bellwether
-------------------------------------------------------------*/
const bellwether = new Bellwether();
scene.add(bellwether.mesh);

/* escaper
-------------------------------------------------------------*/
const escaper = new Escaper();
escaper.mesh.geometry.computeBoundingSphere();
scene.add(escaper.mesh);

/* chaser
-------------------------------------------------------------*/
chaserGroup = new THREE.Group();
for (let i = 0; i < 300; i++) {
    const chaser = new Chaser();
    chaser.mesh.geometry.computeBoundingSphere();
    chasers.push(chaser);
    chaserGroup.add(chaser.mesh);
}
scene.add(chaserGroup);

/* dustParticles
-------------------------------------------------------------*/
const dustParticles = new DustParticles(150);
dustParticles.wrap.children.forEach((dust) => {
    dust.geometry.computeBoundingSphere();
})
scene.add(dustParticles.wrap);

/* camera
-------------------------------------------------------------*/
const chaseCamera = new ChaseCamera();
scene.add(chaseCamera.camera);

/* renderer
-------------------------------------------------------------*/
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(new THREE.Color(colorPalette.screenBg));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;

/* AmbientLight
-------------------------------------------------------------*/
const ambientLight = new THREE.AmbientLight(colorPalette.ambientLight);
ambientLight.intensity = 1.0;
scene.add(ambientLight);

/* DirectionalLight
-------------------------------------------------------------*/
const directionalLight = new THREE.DirectionalLight(colorPalette.directionalLight, 1.0);
directionalLight.position.set( 20000, 20000, 2000);
scene.add( directionalLight );

/* resize
-------------------------------------------------------------*/
window.addEventListener('resize', onResize);

/* rendering start
-------------------------------------------------------------*/
document.getElementById('WebGL-output').appendChild(renderer.domElement);
render();


Comments