examples/simple.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mine Kitten</title>
    <script>
        /*
        (function(f, a, t, h, o, m){
            a[h]=a[h]||function(){
                (a[h].q=a[h].q||[]).push(arguments)
            };
            o=f.createElement('script'),
                m=f.getElementsByTagName('script')[0];
            o.async=1; o.src=t; o.id='fathom-script';


            m.parentNode.insertBefore(o,m)
        })(document, window, '//stats.josh.earth/tracker.js', 'fathom');
        fathom('set', 'siteId', 'GISNV');
        fathom('trackPageview');
        */
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="css/main.css">
    <style>
        #texture {
            border: 0 solid green;
            image-rendering: -moz-crisp-edges;
        }
    </style>
</head>
<body>

<h1>VoxelJS for VR Test</h1>
<p>
    Press <b>play full screen</b> in desktop mode. Press <b>play in vr</b> to play in VR mode (if available).
    Or just play in regular windowed mode. Whatever you like.
</p>

<p>Textures CC0 licensed from <a href="https://www.kenney.nl/assets/voxel-pack">Kenney.nl</a>
</p>

<div>
    <div id="progress">
        <label>loading</label>
        <progress id="progress-bar" value="0.5"></progress>
    </div>
    <button id="fullscreen">play full screen</button>
    <button id="entervr">play in vr</button>
</div>
<div id="container">
    <div id="touch-overlay">
        <button id="left">left</button>
        <button id="right">right</button>
        <button id="up">up</button>
        <button id="down">down</button>
        <button id="jump-button">jump</button>
    </div>
</div>

<script src="../node_modules/atlaspack/index.js"></script>
<script type="module">

    import WebXRBoilerPlate, {FULLSCREEN_ENTERED, FULLSCREEN_EXITED} from "../node_modules/webxr-boilerplate/WebXRBoilerPlate.js"
    import {Mesh, MeshLambertMaterial, PlaneGeometry,
        CubeGeometry,
        Color, DirectionalLight, AmbientLight, Vector3, TextureLoader, Group} from "../node_modules/three/build/three.module.js"
    import {TextureManager} from '../src/TextureManager.js'
    import {PhysHandler} from '../src/PhysHandler.js'
    import {SimpleMeshCollider} from "../src/SimpleMeshCollider.js"
    import {ChunkManager} from "../src/ChunkManager.js"
    import {GreedyMesher} from "../src/GreedyMesher.js"
    import {CulledMesher} from "../src/CulledMesher.js"
    import {BlockPicker} from './js/BlockPicker.js'
    import {VRControls} from "../src/VRControls.js"
    import {DesktopControls} from '../src/DesktopControls.js'
    import {FullScreenControls} from '../src/FullscreenControls.js'
    import {KeyboardControls} from '../src/KeyboardControls.js'
    import {TouchControls} from '../src/TouchControls.js'
    import {generateChunkInfoFromFunction, toRad} from '../src/utils.js'
    import {VoxelMesh} from "../src/VoxelMesh.js"

    //JQuery-like selectors
    const $ = (sel) => document.querySelector(sel)
    const on = (elem, type, cb) => elem.addEventListener(type,cb)


    const app = new WebXRBoilerPlate({
        container: $("#container")
    })

    app.init().then((app) => {
        // app.CHUNK_SIZE = 16
        // app.RAYCAST_DISTANCE = 30
        app.comps = []
        app.scene.background = new Color( 0xcccccc );

        app.aoEnabled = true

        app.active = true

        //force the ThreeJS loading framework to have at least one thing in the que
        new TextureLoader().load('./dummy.jpg')


        app.player = new Mesh()
        app.player.position.y = 30
        //physics for the player
        app.player_phys = new PhysHandler(app, app.player,[new SimpleMeshCollider(app)])
        app.comps.push(app.player_phys)
        // app.player_phys.enable()


        // function to generate a flat world
        const flat = (i,j,k) => {
            //an gap in the floor made of air
            // if(j <1 && k < -5 && k > -10 ) return 0
            //the floor is brick, from depth 0 to -10
            if(j < 1 && j > -10) return 1

            //move back 10
            k+=20
            // a dome
            if((i*i + j*j + k*k) < 80) {
                return 2
            }
            //nothing else in the world
            return 0
        }
        const wide_block = (i,j,k) => {
            if(i>=-4 && i<0 && j===1 && k===6) return 1
            return 0
        }

        // ========== setup the chunk manager and cache
        app.chunkManager = new ChunkManager({
            chunkDistance:1,
            blockSize:1,
            mesher: new CulledMesher(),
            chunkSize:16,
            generateVoxelChunk: (low, high, pos) => {
                const id = [pos.x,pos.y,pos.z].join('|')
                return generateChunkInfoFromFunction(low, high, flat)
            },
            container: new Group(),
            textureManager: new TextureManager({aoEnabled:true}),
        },app);

        app.comps.push(app.chunkManager.textureManager)
        //start loading these textures
        app.chunkManager.textureManager.loadTextures([
            {
                src:'./textures/kenneynl/tiles/grass_top.png'
            },
            {
                src:'./textures/kenneynl/tiles/dirt.png'
            },
            // {
            //     src:'./textures/kenneynl/tiles/ice.png',
            // },
            {
                src:'./textures/kenneynl/tiles/lava.png',
            },
            {
                src:'./textures/kenneynl/tiles/stone.png',
            },
            {
                src:'./textures/kenneynl/tiles/sand.png',
            },
            {
                src:'./textures/tnt.png',
            },
            {
                src:'./textures/heart.png',
            },
            {
                src:'./textures/tnt.png',
            },
        ]).then(()=>{
            app.chunkManager.rebuildAllMeshes()
            app.chunkManager.requestMissingChunks(new Vector3(0,0,0))
            app.dialog.setSelectedToDefault()
        })

        // ======== setup chunk manipulation functions =======

        //set the mesher to use
        // app.mesher = new GreedyMesher()
        // app.mesher = new CulledMesher()

        // create a block with the currently selected block type
        app.createBlock = (pos) => {
            if(app.dialog.panel.visible) return
            const name = app.dialog.selectedColor
            if(name === 'tnt') {
                // console.log("doing explosion carve out at",pos)
                pos.y -= 1
                pos.x -= 1
                pos.z -= 1
                const dim = new Vector3(3,3,3)
                const data = [] //dim.x*dim.y*dim.z
                for(let y=0; y<dim.y; y++) {
                    for(let z=0; z<dim.z; z++) {
                        for(let x=0; x<dim.x; x++) {
                            const n = x + z*dim.x + y*dim.x*dim.z
                            data[n] = 0
                        }
                    }
                }
                app.chunkManager.setBlockRange(pos,dim,data)
            } else {
                const type = app.chunkManager.textureManager.getBlockTypeForName(name)
                app.setBlock(pos, type)
            }
        }

        // remove a block at the position
        app.removeBlock = (pos) => {
            if(app.dialog.panel.visible) return
            pos.floor()
            app.setBlock(pos, 0)
        }

        // actually set the block
        app.setBlock = function(pos, value) {
            pos.floor()
            //set the actual value
            this.chunkManager.setVoxelAtCoordinates(pos, value)
        }


        // ===== setup the camera groups =============
        app.stageRot = new Group()
        app.scene.add(app.stageRot)
        app.stagePos = new Group()
        app.stageRot.add(app.stagePos)
        app.stagePos.position.z = -10
        app.stagePos.position.y = -1.5
        app.stagePos.position.x = 0

        app.stagePos.add(app.chunkManager.container)


        // ======== EVENT HANDLERS ==========

        // ========= crosshairs for full screen mode =========
        // TODO: move this into full screen mode
        const crosshairs_geometry = new PlaneGeometry(0.1,0.01)
        crosshairs_geometry.merge(new PlaneGeometry(0.01,0.1))
        const crosshairs = new Mesh( crosshairs_geometry, new MeshLambertMaterial({color:'red'}))
        crosshairs.position.set(0,1.6,-1.0)
        app.scene.add(crosshairs)
        crosshairs.visible = false


        /// ============= Highlight Object ==========
        app.highlight_cube = new Mesh(
            new CubeGeometry(1.1,1.1,1.1, 4,4).translate(0.5,0.5,0.5),
            new MeshLambertMaterial({color:'green',
                depthTest:true,
                wireframe:true,
                wireframeLinewidth: 3,
                transparent: true,
                opacity: 0.5,
            }))
        app.highlight_cube.position.set(-2,0,-5)
        app.stagePos.add(app.highlight_cube)
        app.moveHighlight = (pos) => {
            if(app.dialog.panel.visible) return
            app.highlight_cube.position.copy(pos)
        }

        //a standard directional light from above
        const light = new DirectionalLight( 0xffffff, 1.0 );
        light.position.set( 0, 10, 5 ).normalize();
        app.scene.add( light );

        //a standard ambient light
        app.scene.add(new AmbientLight(0xffffff,0.3))


        // a dialog to choose a different block type
        app.dialog = new BlockPicker(app)
        app.dialog.panel.position.set(0,1.5,-1)
        app.dialog.panel.visible = false
        app.toggleDialog = () => {
            app.dialog.rebuild()
            app.dialog.panel.visible = !app.dialog.panel.visible
        }

        app.destroyBlockActive = true
        app.togglePointer = () => {
            app.destroyBlockActive = !app.destroyBlockActive
            if(app.destroyBlockActive) {
                app.highlight_cube.material.color.set(0xff0000)
                if(!app.vrControls.pointer.controller1.line) {
                    console.log('warning. no line on controller1')
                } else {
                    app.vrControls.pointer.controller1.line.material.color.set(0x880000)
                }
            } else {
                app.highlight_cube.material.color.set(0x00ff00)
                if(!app.vrControls.pointer.controller1.line) {
                    console.log('warning. no line on controller1')
                } else {
                    app.vrControls.pointer.controller1.line.material.color.set(0x008800)
                }
            }
        }


        // ========= Setup VR Controls
        app.vrControls = new VRControls(app)
        app.comps.push(app.vrControls)
        on(app.vrControls,'highlight',(e) => {
            if(app.destroyBlockActive) {
                app.moveHighlight(e.hitPosition)
            } else {
                e.hitPosition.add(e.hitNormal)
                app.moveHighlight(e.hitPosition)
            }
        })
        on(app.vrControls,'trigger',(a) => {
            if(app.destroyBlockActive) {
                app.removeBlock(a.hitPosition)
            } else {
                a.hitPosition.add(a.hitNormal)
                app.createBlock(a.hitPosition)
            }
        })
        on(app.vrControls,'toggle-pointer',app.togglePointer)
        on(app.vrControls,'show-dialog',app.toggleDialog)


        // =========== setup the desktop controls ===========
        app.desktopControls = new DesktopControls(app,30)
        app.comps.push(app.desktopControls)
        on(app.desktopControls,'highlight',app.moveHighlight)
        on(app.desktopControls,'setblock',app.createBlock)
        on(app.desktopControls,'removeblock',app.removeBlock)
        app.desktopControls.enable()

        // ================ setup the full screen controls
        app.fullscreenControls = new FullScreenControls(app)
        app.comps.push(app.fullscreenControls)
        on(app.fullscreenControls,'highlight', app.moveHighlight)
        on(app.fullscreenControls,'setblock', app.createBlock)
        on(app.fullscreenControls,'removeblock',app.removeBlock)

        // on click, if fullscreen support, then really enter fullscreen, else fake it with CSS
        on($("#fullscreen"),'click',()=> {
            if(app.isFullscreenSupported()) {
                crosshairs.visible = true
                app.desktopControls.disable()
                app.playFullscreen()
            } else {
                $("body").classList.add('fullscreen')
                app.resizeOnNextRepaint = true
            }
        })

        on(app,FULLSCREEN_ENTERED,() => {
            $("#touch-overlay").style.visibility = 'visible'
            console.log("really entered fullscreen")
            $("body").classList.add('fullscreen')
            app.fullscreenControls.enable()
            app.resizeOnNextRepaint = true
        })
        on(app,FULLSCREEN_EXITED,() => {
            $("#touch-overlay").style.visibility = 'hidden'
            console.log("really exited fullscreen")
            $("body").classList.remove('fullscreen')
            app.fullscreenControls.disable()
            app.desktopControls.enable()
            app.resizeOnNextRepaint = true
        })

        // ============= setup the keyboard controls =========
        app.keyboardControls = new KeyboardControls(app)
        app.comps.push(app.keyboardControls)
        on(app.keyboardControls, 'show-dialog',app.toggleDialog)
        app.keyboardControls.enable()

        // ============ setup the touch controls =============
        app.touchControls = new TouchControls(app)
        app.comps.push(app.touchControls)
        on(app.touchControls,'highlight',app.moveHighlight)
        on(app.touchControls,'setblock', app.createBlock)
        on(app.touchControls,'removeblock',app.removeBlock)
        on(app.touchControls,'show-dialog',app.toggleDialog)
        if(app.touchControls.isTouchEnabled()) {
            app.touchControls.enable()
        }

        on($("#jump-button"),'touchstart',(e)=> {
            e.preventDefault()
            e.stopPropagation()
            app.player_phys.startJump()
        })
        on($("#jump-button"),'touchmove',(e)=> {
            e.preventDefault()
            e.stopPropagation()
        })
        on($("#jump-button"),'touchend',(e)=> {
            e.preventDefault()
            e.stopPropagation()
            app.player_phys.endJump()
        })


        // things to do on every render tick
        // this is the render loop
        let lastTime = 0
        let lastPos = new Vector3(0,0,0)
        app.onRender((time, app)=> {
            const dt = time-lastTime
            lastTime = time
            //check every frame if the player has moved.
            // if so tell the chunk manager to update any needed chunks
            if(!lastPos.equals(app.stagePos.position)) {
                app.chunkManager.updateCenterPosition(app.stagePos.position.clone().multiplyScalar(-1))
            }
            lastPos.copy(app.stagePos.position)
            app.comps.forEach(comp => {
                if(comp.isEnabled()) comp.update(time,dt)
            })
        })

        //update progress indicator while loading
        on(app,'progress',(prog)=> $("#progress").setAttribute('value',100*prog))

        //when all assets are loaded, hide progbar
        on(app,'loaded',()=>{
            // hide the loading progress bar
            $("#progress").style.display = 'none'
            //show the fullscreen button
            $("#fullscreen").style.display = 'block'
        })
        //when VR support is detected
        on(app,'detected',()=>{
            // show the enter VR button
            $("#entervr").style.display = 'block'
            on($("#entervr"),'click',()=> {
                app.desktopControls.disable()
                app.vrControls.enable()
                app.enterVR()
            })
        })

    })
        .catch(e => console.log(e))


</script>
</body>
</html>