Super Speed Snow-mountain Survival Stage

            
              class World {
    constructor(wnd) {
        this.window = wnd
        this.clock = new THREE.Clock()
        this.isLoading = true
        this.loader = THREE.DefaultLoadingManager
        this.onLoadedCallbacks = []
        this.loader.onLoad = () => {
            this.isLoading = false
            this.onLoadedCallbacks.forEach(cb => cb())
        }
        this.loader.onError = url => console.error(`There was an error loading ${url}`)

        this.setupRenderer()
        this.setupScene()
        this.setupLighting()

        // Auto resize engine
        wnd.addEventListener('resize', () => {
            this.renderer.setSize(wnd.innerWidth, wnd.innerHeight)
        })

        this.onRenderCallbacks = []
        this.animationMixers = []
        this.loadedFbx = {}
    }

    drawGridQuadrant(signX, signZ) {
        const GRID_SIZE = 10
        const GRID_N = 20

        const sX = signX > 0 ? 1 : -1
        const sZ = signZ > 0 ? 1 : -1
        for (let i=0; i<GRID_N; i++) {
            for (let j=0; j<GRID_N; j++) {
                const offX = i*GRID_SIZE*sX
                const offZ = j*GRID_SIZE*sZ
                const geo = new THREE.BufferGeometry()
                const verts = new Float32Array([
                    offX,            0,    offZ,
                    offX,            0,    offZ+GRID_SIZE,
                    offX+GRID_SIZE,  0,    offZ+GRID_SIZE,
                    offX+GRID_SIZE,  0,    offZ,
                    offX,            0,    offZ
                ])
                geo.addAttribute('position', new THREE.BufferAttribute(verts, 3))
                const mat = new THREE.LineBasicMaterial({ color: 0 })
                const line = new THREE.Line(geo, mat)
                this.scene.add(line)
            }
        }
    }

    setupRenderer() {
        const renderer = new THREE.WebGLRenderer({ alpha: true })
        renderer.setSize(this.window.innerWidth, this.window.innerHeight)
        this.renderer = renderer
        this.window.document.body.appendChild(renderer.domElement)
    }

    setupScene() {
        const scene = new THREE.Scene()
        scene.background = new THREE.Color(0xeeeeee)
        this.scene = scene
    }

    setupLighting() {
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
        this.scene.add(ambientLight)
        this.ambientLight = ambientLight

        const hemisphericLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.5)
        hemisphericLight.position.y += 1500
        this.scene.add(hemisphericLight)
    }

    addAnimationMixer(mixer) {
        this.animationMixers.push(mixer)
    }

    loadFbx(name, filename, addToScene = false, cb = () => {}) {
        const fbxLoader = new THREE.FBXLoader(this.loader)
        fbxLoader.load(filename, object => {
            object.name = name
            if (this.loadedFbx[name]) {
                console.log(`Warning: overwriting existing FBX '${name}'!`)
            }
            this.loadedFbx[name] = object
            if (addToScene) this.scene.add(object)
            cb(null, object)
        }, xhr => {
            // console.log(xhr.loaded/xhr.total*100 + '% loaded')
        }, xhr => {
            const errMsg = `Error loading FBX '${name}': ${JSON.stringify(xhr)}!`
            console.error(errMsg)
            cb(new Error(errMsg), null)
        })
    }

    onLoaded(cb) {
        if (typeof cb !== 'function') {
            throw new Error(`${cb} must be a function!`)
        }

        if (this.isLoading) {
            this.onLoadedCallbacks.push(cb)
        } else {
            // Already loaded, invoke callback immediately
            cb()
        }
    }

    onRender(cb) {
        if (typeof cb !== 'function') {
            throw new Error(`${cb} must be a function!`)
        } else {
            this.onRenderCallbacks.push(cb)
        }
    }

    setCamera(camera) {
        this.camera = camera
    }

    teardown() {
        cancelAnimationFrame(this.animationFrameId)
        while (this.scene.children.length) {
            const child = this.scene.children[0]
            child.traverse(c => {
                if (typeof c.dispose === 'function') {
                    c.dispose()
                }
            })
            if (typeof child.dispose === 'function') {
                child.dispose()
            }
            this.scene.remove(child)
        }
        this.scene = null
        this.camera = null
        this.clock = null
        this.loader = null
        this.onLoadedCallbacks = null
        this.onRenderCallbacks = null
        this.animationMixers = null
        Object.keys(this.loadedFbx).forEach(key => {
            this.loadedFbx[key].traverse(child => {
                if (typeof child.dispose === 'function') {
                    child.dispose()
                }
            })
            this.loadedFbx[key] = null
            delete this.loadedFbx[key]
        })
        this.renderer.domElement.remove()
        this.renderer = null
    }

    render() {
        // Store the delta so it can be passed around (for consistency)
        const clockDelta = this.clock.getDelta()
        // Run animations
        this.animationMixers.forEach(mixer => mixer.update(clockDelta))
        // Run onRender subscriptions
        this.onRenderCallbacks.forEach(cb => cb(clockDelta))
        // Render current frame only if camera available
        if (this.camera) {
            this.renderer.render(this.scene, this.camera)
        } else {
            // console.error('No camera has been setup yet!')
        }
        // Next frame
        this.animationFrameId = requestAnimationFrame(() => this.render())
    }
}

class Player {
    constructor(world) {
        this.world = world
        this.speed = 100. // scalar, pos units per tick
        this.bearing = 0
        this.moveForward = true
        this.moveBackward = false
        this.moveLeft = false
        this.moveRight = false
        this.ROTATION_OFFSET_Y = 0
        this.dead = false

        this.attachControl()
        this.setupModel()
    }

    get position() {
        const model = this.model
        return model ? model.position : new THREE.Vector3(0, 0, 0)
    }

    setupModel() {
        const world = this.world

        world.loadFbx('player', 'https://s3-ap-southeast-2.amazonaws.com/c17-mountain.kvn.io/assets/models/player/player@skateboarding.fbx', true)
        world.loadFbx('playerDying', 'https://s3-ap-southeast-2.amazonaws.com/c17-mountain.kvn.io/assets/models/player/player@dying.fbx', false)
        world.loadFbx('snowboard', 'https://s3-ap-southeast-2.amazonaws.com/c17-mountain.kvn.io/assets/models/snowboard/snowboard.fbx', true)

        world.onLoaded(() => {
            const player = world.loadedFbx['player']
            const playerDying = world.loadedFbx['playerDying']
            const snowboard = world.loadedFbx['snowboard']

            this.model = player
            let footBone
            player.traverse(child => {
                if (child.type === 'Bone' &&
                    child.name === 'mixamorigLeftFoot') {
                    footBone = child
                }
            })
            // Position camera, set the scale, etc
            snowboard.scale.set(4, 4, 4)
            footBone.add(snowboard)
            snowboard.rotateX(-2.1)
            snowboard.rotateZ(-0.6)
            snowboard.translateX(105)
            snowboard.translateZ(13)

            player.traverse(m => {
                if (m.type === 'SkinnedMesh' ||
                    m.type === 'Mesh') {
                    m.castShadow = true
                }
            })
            player.scale.set(0.1, 0.1, 0.1)
            player.rotation.x = Math.PI/48

            // Add the loaded animations to the base mesh
            // Name them for convenience
            player.animations[0].name = 'idle'
            playerDying.animations[0].name = 'dying'
            player.animations.push(...playerDying.animations)

            // Setup AnimationMixer for loaded model
            const mixer = new THREE.AnimationMixer(player)
            world.addAnimationMixer(mixer)
            this.animationMixer = mixer

            // Reset clip durations
            player.animations.forEach(clip => {
                clip.resetDuration()
            })

            // Play idle animation
            this.playAnimation('idle')

            world.onRender(clockDelta => this.move(clockDelta))
        })
    }

    attachControl(container = this.world.window) {
        let mouseDownRunning = false
        container.addEventListener('keydown', event => {
            switch (event.code) {
            case 'KeyW':
                this.moveForward = true
                this.moveBackward = false
                break
            case 'KeyS':
                // this.moveForward = false
                // this.moveBackward = true
                break
            case 'KeyA':
            case 'ArrowLeft':
                this.moveLeft = true
                this.moveRight = false
                break
            case 'KeyD':
            case 'ArrowRight':
                this.moveLeft = false
                this.moveRight = true
                break
            }
        })
        container.addEventListener('keyup', event => {
            switch (event.code) {
            case 'KeyW':
                // if (!mouseDownRunning) this.moveForward = false
                break
            case 'KeyS':
                this.moveBackward = false
                break
            case 'KeyA':
            case 'ArrowLeft':
                this.moveLeft = false
                break
            case 'KeyD':
            case 'ArrowRight':
                this.moveRight = false
                break
            }
        })
        container.addEventListener('touchstart', event => {
            const touches = event.changedTouches
            const touch = touches[0]
            if (touch.clientX < window.innerWidth/2) {
                this.moveLeft = true
                this.moveRight = false
            } else {
                this.moveLeft = false
                this.moveRight = true
            }
        })
        container.addEventListener('touchend', event => {
            this.moveLeft = false
            this.moveRight = false
        })
    }

    playAnimation(name, loop = true) {
        if (this.lastAnimation === name) return

        const loopMode = loop ? THREE.LoopRepeat : THREE.LoopOnce

        const lastClip = THREE.AnimationClip.findByName(this.model, this.lastAnimation)
        const nextClip = THREE.AnimationClip.findByName(this.model, name)
        if (nextClip instanceof THREE.AnimationClip) {
            const existingAction = this.animationMixer.existingAction(lastClip)
            this.animationMixer.stopAllAction()
            const nextAction = this.animationMixer.clipAction(nextClip)
            .setLoop(loopMode)
            nextAction.clampWhenFinished = !loop
            if (existingAction) {
                nextAction.play().crossFadeFrom(existingAction, 0.2)
            } else {
                nextAction.play()
            }
        }
        this.lastAnimation = name
    }

    die() {
        this.timeOfDeath = this.world.clock.elapsedTime
        this.speed = -50
        this.playAnimation('dying', false)
    }

    move(clockDelta) {
        if (this.dead) {
            return
        }

        if (this.timeOfDeath &&
            this.world.clock.elapsedTime - this.timeOfDeath > 2.5) {
            this.dead = true
        }

        // Must be run only AFTER animations are setup
        const t = clockDelta
        const moveX = this.moveLeft || this.moveRight
        const moveZ = this.moveForward || this.moveBackward

        // Acceleration
        this.speed += t*9.81
        // Maximum velocity
        this.speed = Math.min(this.speed, 1000)

        // Calculate displacement vectors
        let trueBearingX = t * this.speed * Math.cos(this.bearing+Math.PI/2)
        let trueBearingZ = t * this.speed * Math.sin(this.bearing+Math.PI/2)
        let perpBearingX = t * this.speed * Math.cos(this.bearing)
        let perpBearingZ = t * this.speed * Math.sin(this.bearing)

        // Forward & backward - mutually exclusive
        if (this.moveForward) {
            this.model.position.x += trueBearingX
            this.model.position.z += trueBearingZ
        } else if (this.moveBackward) {
            this.model.position.x -= trueBearingX * 1/3.
            this.model.position.z -= trueBearingZ * 1/3.
        }

        // Left & right
        if (this.moveLeft) {
            this.model.position.x += perpBearingX*3/8
            this.model.position.z += perpBearingZ*3/8
            this.model.rotation.y = Math.min(Math.PI/8, this.model.rotation.y+Math.PI/2*t)
            this.model.rotation.z = Math.max(-Math.PI/16, this.model.rotation.z-Math.PI/2*t)
        } else if (this.moveRight) {
            this.model.position.x -= perpBearingX*3/8
            this.model.position.z -= perpBearingZ*3/8
            this.model.rotation.y = Math.max(-Math.PI/8, this.model.rotation.y-Math.PI/2*t)
            this.model.rotation.z = Math.min(Math.PI/16, this.model.rotation.z+Math.PI/2*t)
        } else {
            this.model.rotation.y -= this.model.rotation.y*2*t
            this.model.rotation.z -= this.model.rotation.z*2*t
        }
    }
}

const cloneFbx = (fbx) => {
    const clone = fbx.clone(true)
    clone.animations = fbx.animations
    clone.skeleton = { bones: [] }

    const skinnedMeshes = {}

    fbx.traverse(node => {
        if (node.isSkinnedMesh) {
            skinnedMeshes[node.name] = node
        }
    })

    const cloneBones = {}
    const cloneSkinnedMeshes = {}

    clone.traverse(node => {
        if (node.isBone) {
            cloneBones[node.name] = node
        }

        if (node.isSkinnedMesh) {
            cloneSkinnedMeshes[node.name] = node
        }
    })

    for (let name in skinnedMeshes) {
        const skinnedMesh = skinnedMeshes[name]
        const skeleton = skinnedMesh.skeleton
        const cloneSkinnedMesh = cloneSkinnedMeshes[name]

        const orderedCloneBones = []

        for (let i=0; i<skeleton.bones.length; i++) {
            const cloneBone = cloneBones[skeleton.bones[i].name]
            orderedCloneBones.push(cloneBone)
        }

        cloneSkinnedMesh.bind(
            new THREE.Skeleton(orderedCloneBones, skeleton.boneInverses),
            cloneSkinnedMesh.matrixWorld)

        // For animation to work correctly:
        clone.skeleton.bones.push(cloneSkinnedMesh)
        clone.skeleton.bones.push(...orderedCloneBones)
    }

    return clone
}

class Mountain {
    constructor(world, player) {
        this.world = world
        this.player = player

        this.N_VISIBLE_TREES = 50
        this.TREES_LOD = 1000
        this.STAGE_WIDTH = 750
        this.STAGE_LENGTH = 10000
        this.trees = []
        this.groundCount = 0
        this.grounds = []

        const snowMap = new THREE.TextureLoader().load('https://s3-ap-southeast-2.amazonaws.com/c17-mountain.kvn.io/assets/materials/snow.jpg')
        snowMap.wrapS = THREE.RepeatWrapping
        snowMap.wrapT = THREE.RepeatWrapping
        snowMap.repeat.set(this.STAGE_WIDTH/100, this.STAGE_LENGTH/100)
        this.snowMap = snowMap

        // Fog
        this.world.scene.fog = new THREE.Fog(0xeeeeee, 100, this.TREES_LOD)

        this.world.loadFbx('tree', 'https://s3-ap-southeast-2.amazonaws.com/c17-mountain.kvn.io/assets/models/tree/tree.fbx', false)
        this.world.onLoaded(() => {
            // Create first ground iteration
            this.createGround()
            const tree = this.world.loadedFbx['tree']
            tree.traverse(m => {
                if (m.type === 'SkinnedMesh' ||
                    m.type === 'Mesh') {
                    m.castShadow = true
                }
            })
            tree.rotation.x = -Math.PI/16
            tree.position.y = -10
            tree.children[0].material
            this.world.onRender(t => this.render(t))
        })
    }

    createGround() {
        // Ground
        const groundGeo = new THREE.BoxGeometry(this.STAGE_WIDTH, 100, this.STAGE_LENGTH)
        const groundMat = new THREE.MeshLambertMaterial({ color: 0xe0e0e0, map: this.snowMap })
        const ground = new THREE.Mesh(groundGeo, groundMat)
        ground.receiveShadow = true
        this.world.scene.add(ground)
        ground.position.y -= 50

        // Mountains (sidewalls)
        const mountainGeo = new THREE.BoxGeometry(1000, 100, this.STAGE_LENGTH)
        const mountainMat = new THREE.MeshLambertMaterial({ color: 0x777777, map: this.snowMap })
        const leftWall = new THREE.Mesh(mountainGeo, mountainMat)
        this.world.scene.add(leftWall)
        leftWall.position.x += this.STAGE_WIDTH-100
        leftWall.position.y += 150
        leftWall.rotation.z = Math.PI/4
        const rightWall = new THREE.Mesh(mountainGeo, mountainMat)
        this.world.scene.add(rightWall)
        rightWall.position.x -= this.STAGE_WIDTH-100
        rightWall.position.y = 150
        rightWall.rotation.z = -Math.PI/4

        ground.position.z += this.groundCount*this.STAGE_LENGTH+this.STAGE_LENGTH/2
        leftWall.position.z += this.groundCount*this.STAGE_LENGTH+this.STAGE_LENGTH/2
        rightWall.position.z += this.groundCount*this.STAGE_LENGTH+this.STAGE_LENGTH/2

        this.grounds.push({ index: this.groundCount++, ground, leftWall, rightWall })
    }

    disposeGround(index) {
        // TODO: check proper disposal
        const grounds = this.grounds
        let ground = grounds.find(g => g.index === index)
        this.world.scene.remove(ground)
        grounds.splice(grounds.indexOf(ground), 1)
        ground.ground.traverse(t => {
            if (typeof t.dispose === 'function') {
                t.dispose()
            }
        })
        ground.leftWall.traverse(t => {
            if (typeof t.dispose === 'function') {
                t.dispose()
            }
        })
        ground.rightWall.traverse(t => {
            if (typeof t.dispose === 'function') {
                t.dispose()
            }
        })
        ground = null
    }

    addTree() {
        // must be called after onLoaded
        const world = this.world
        const treeBase = world.loadedFbx['tree']
        const tree = cloneFbx(treeBase)
        this.trees.push(tree)
        world.scene.add(tree)

        // Calculate random position
        const p = this.player
        const x = Math.random()*this.STAGE_WIDTH-this.STAGE_WIDTH/2
        const z = (p.position.z+this.TREES_LOD*(3/4))+(Math.random()*this.TREES_LOD*2)
        Object.assign(tree.position, { x, z })

        // Precalc intersection bounding box
        const treeGeo = new THREE.BoxGeometry(15, 200, 15)
        const treeBoundingMesh = new THREE.Mesh(treeGeo)
        Object.assign(treeBoundingMesh.position, tree.position)
        const treeBox = new THREE.Box3().setFromObject(treeBoundingMesh)
        tree.collisionBoundingBox = treeBox

        return tree
    }

    disposeTree(tree) {
        // TODO: check proper disposal
        const trees = this.trees
        this.world.scene.remove(tree)
        trees.splice(trees.indexOf(tree), 1)
        tree.traverse(t => {
            if (typeof t.dispose === 'function') {
                t.dispose()
            }
        })
        tree = null
    }

    checkCollision() {
        const trees = this.trees
        const player = this.player
        const playerBox = new THREE.Box3().setFromObject(player.model)

        if (player.position.x < -this.STAGE_WIDTH/2 ||
            player.position.x > this.STAGE_WIDTH/2) {
            player.die()
        }

        trees.forEach(tree => {
            const intersects = playerBox.intersectsBox(tree.collisionBoundingBox)
            if (intersects) {
                player.die()
            }
        })
    }

    render(t) {
        const p = this.player
        let trees = this.trees.slice()

        this.checkCollision()

        // Cull trees behind player
        trees = trees.filter(tree => {
            if (tree.position.z < p.position.z-this.TREES_LOD) {
                this.disposeTree(tree)
                return false
            } else {
                return true
            }
        })

        // Refill trees if needed
        if (trees.length < this.N_VISIBLE_TREES) {
            for (let i=trees.length; i<this.N_VISIBLE_TREES; i++) {
                const tree = this.addTree()
            }
        }

        // Refill ground
        if (Math.ceil(p.position.z/this.STAGE_LENGTH+0.5) > this.groundCount) {
            this.disposeGround(this.groundCount-1)
            this.createGround()
        }
    }
}

class RpgCamera extends THREE.PerspectiveCamera {
    constructor(world, player) {
        super(90, world.window.innerWidth/world.window.innerHeight, 0.1, 1500)
        this.player = player
        this.world = world
        // Mouse
        this.radius = 25
        this.alpha = 0
        this.beta = Math.PI*3/4
        this.offsetY = 12

        this.attachControl()
        world.onLoaded(() => {
            // Setting the camera AFTER meshes have loaded prevents glitchiness
            world.setCamera(this)
            world.onRender(t => this.update(t))
        })
    }

    update(t) {
        if (this.player.timeOfDeath && !this.player.dead) {
            this.alpha += (Math.PI-this.alpha)*5*t
        }
        if (this.player.dead) {
            this.alpha += Math.PI*t*0.1
        }

        const camPos = this.position
        const pPos = this.player.position
        // sinA=x/r, cosA=z/r
        camPos.x = pPos.x-Math.cos(this.alpha+Math.PI/2)*this.radius
        camPos.z = pPos.z-Math.sin(this.alpha+Math.PI/2)*this.radius
        // cosB=y/r
        camPos.y = pPos.y+this.offsetY-Math.cos(this.beta)*this.radius

        this.lookAt(new THREE.Vector3(0, this.offsetY, 0).add(this.player.position))
    }

    attachControl(container = this.world.renderer.domElement) {
        const wnd = this.world.window
        const doc = wnd.document
        const canvas = this.world.renderer.domElement
        wnd.addEventListener('resize', () => {
            this.aspect = wnd.innerWidth/wnd.innerHeight
            this.updateProjectionMatrix()
        })
        doc.addEventListener('mousemove', event => {
            const { buttons, movementX, movementY } = event
            if (buttons & (1<<0)) {
                // primary button (left)
                // this.alpha += movementX*0.01
                this.beta = Math.min(Math.PI,
                    Math.max(75*Math.PI/180,
                    this.beta+movementY*0.01)) // clamp [45,180]deg
            }
        })
        doc.addEventListener('mousedown', event => {
            if (!doc.pointerLockElement) canvas.requestPointerLock()
        }, false)
        doc.addEventListener('mouseup', event => {
            if (!!doc.pointerLockElement) doc.exitPointerLock()
        })
        doc.addEventListener('mousewheel', event => {
            const { deltaY } = event
            this.radius = Math.min(Math.max(10, this.radius+deltaY*0.02), 50)
        })
        doc.addEventListener('contextmenu', event => {
            event.preventDefault()
        })
    }
}

let world
let player
let mountain
let camera

document.addEventListener('DOMContentLoaded', () => {
    const scoreboard = document.querySelector('.label-score')
    const labelRekt = document.querySelector('.label-death')
    const labelRektBg = document.querySelector('.label-death-bg')
    const labelRestart = document.querySelector('.label-restart')

    function initiateGame() {
        world = new World(window)
        player = new Player(world)
        mountain = new Mountain(world, player)
        camera = new RpgCamera(world, player)

        world.onLoaded(() => {
            world.onRender(t => {
                if (!player.timeOfDeath) {
                    scoreboard.textContent = parseInt(world.clock.elapsedTime*10)
                } else {
                    labelRestart.classList.add('active')
                    scoreboard.classList.add('stopped')
                    labelRekt.classList.add('active')
                    labelRektBg.classList.add('active')
                }
            })
        })

        world.render()
    }

    initiateGame()

    window.addEventListener('keydown', event => {
        if (event.code === 'Enter' && player.timeOfDeath) {
            world.teardown()
            labelRestart.classList.remove('active')
            scoreboard.classList.remove('stopped')
            labelRekt.classList.remove('active')
            labelRektBg.classList.remove('active')
            setTimeout(() => initiateGame(), 2000)
        }
    })
})