particles/snow.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebVR + ThreeJS Application</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <!-- required -->
    <script src="./node_modules/three/build/three.min.js"></script>
    <!-- needed for loading GLTF files -->
    <script src="./node_modules/three/examples/js/loaders/GLTFLoader.js"></script>
    <!-- needed for loading Truetype Fonts -->
    <script src="./node_modules/three/examples/js/loaders/TTFLoader.js"></script>
    <script src="./node_modules/three/examples/js/libs/opentype.min.js"></script>

    <!-- needed to enter VR -->
    <script src="../boilerplate/webvr.js"></script>

    <!-- stats (fps, polygons, fps) -->
    <script src="../boilerplate/vrstats.js" type="module"></script>

    <!-- mouse/touch/vr-controller support -->
    <!--<script src="./pointer.js" type="module"></script>-->

    <style type="text/css">
        #overlay {
            position: fixed;
            font-size: 5vh;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0,0,0,0.5);
            text-align: center;
        }
        #loading-indicator {
            display: block;
        }
        #click-to-play {
            /*display: none;*/
            color: black;
            background-color: white;
            border: 1px solid black;
        }

        /* this button is generated by the VR subsystem, disabled if not available */
        #enter-vr {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translate(-50%,0);
        }
    </style>

</head>
<body>


<div id="overlay">
    <h1>Application Name</h1>
    <div id="loading-indicator">
        <label>loading</label>
        <progress max="100" value="0" id="progress"></progress>
    </div>
    <h3 id="click-to-play">click to start</h3>
</div>

<script type="module">
    import {POINTER_CLICK, POINTER_ENTER, POINTER_EXIT, Pointer} from '../boilerplate/pointer.js'
    import VRStats from "../boilerplate/vrstats.js"
    import {FaceColors, Vector3, Vector2, Face3, Color} from "./node_modules/three/build/three.module.js"

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

    // global constants and variables for your app go here
    let camera, scene, renderer, pointer, stats;

    let cube
    //called on setup. Customize this
    function initContent(scene,camera,renderer) {
        //set the background color of the scene
        scene.background = new THREE.Color( 0xf0f0f0 );

        //load a cat texture
        const texture_loader = new THREE.TextureLoader()
        //cat from http://creative-commons-cats.tumblr.com/page/3
        // const texture = texture_loader.load('./cat.jpg')

        //a standard light
        const light = new THREE.DirectionalLight( 0xffffff, 1.0 );
        light.position.set( 1, 1, 1 ).normalize();
        scene.add( light );

        scene.add(new THREE.AmbientLight())

        const vertexShader = `
            uniform float uTime;
            varying vec2 vUv;
            void main() {
                vUv = uv;
                gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
            }
        `
        const fragmentShader = `
                uniform sampler2D tSprite;
                varying vec2 vUv;
                void main() {
                    vec2
                    vec4 color = texture2D( tSprite, vUv );
                    gl_FragColor = color * 1.0;//mix(tex,vec4(1.0,0.0,0.0,1.0),0.5);
                }
        `

        //create a quad with correct UVs
        const geom = new THREE.Geometry()

        function addQuad(x,y) {
            const start = geom.vertices.length
            geom.vertices.push(
                new Vector3(0+x, 0, 0), // 0
                new Vector3(1+x, 0, 0), // 1
                new Vector3(1+x, 1, 0), // 2
                new Vector3(0+x, 1, 0), // 3
            )
            geom.faces.push(new Face3(start+0, start+1, start+2))
            geom.faces.push(new Face3(start+2, start+3, start+0))
            geom.faceVertexUvs[0].push([
                new Vector2(0, 0),
                new Vector2(1, 0),
                new Vector2(1, 1),
            ])
            geom.faceVertexUvs[0].push([
                new Vector2(1, 1),
                new Vector2(1, 0),
                new Vector2(0, 0),
            ])
        }
        addQuad(0,0)
        addQuad(1.5,0)
        // geom.uvsNeedUpdate = true
        // geom.computeFaceNormals();
        // geom.computeVertexNormals();

        const sprite = texture_loader.load('tex/test1.png')
        const mat = new THREE.MeshBasicMaterial({
            color:'white',
            map: sprite,
            side: THREE.DoubleSide,
            blending: THREE.NormalBlending,
        })

        // const geom = new THREE.BoxGeometry(1,1,1)
        const mesh = new THREE.Mesh(geom,mat)
        mesh.position.z = -2
        mesh.position.y = 1
        mesh.position.x = -0.5
        scene.add(mesh)


        // enable stats visible inside VR
        stats = new VRStats(renderer)
        camera.add(stats)
        scene.add(camera)

        //class which handles mouse and VR controller
        pointer = new Pointer(scene,renderer,camera, {

            //Pointer searches everything in the scene by default
            //override this to match just certain things
            intersectionFilter: ((o) => o.userData.clickable),

            //make the camera pan when moving the mouse. good for simulating head turning on desktop
            cameraFollowMouse:false,
        })


        //change cube to red BG when clicking
        if(!clickStartEnabled) {
            $("#overlay").style.display = 'none'
            $("#enter-vr").disabled = false
        }
    }

    //called on every frame. customize this
    function render(time) {
        //update the pointer and stats, if configured
        if(pointer) pointer.tick(time)
        if(stats) stats.update(time)
        renderer.render( scene, camera );
    }


    // you shouldn't need to modify much below here

    function initScene() {
        //create DIV for the canvas
        const container = document.createElement( 'div' );
        document.body.appendChild( container );
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 50 );
        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.vr.enabled = true;
        container.appendChild( renderer.domElement );
        document.body.appendChild( WEBVR.createButton( renderer ) );

        initContent(scene,camera,renderer)

        window.addEventListener( 'resize', ()=>{
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );
        }, false );

        THREE.DefaultLoadingManager.onStart = (url, loaded, total) => {
            console.log(`loading ${url}.  loaded ${loaded} of ${total}`)
        }
        THREE.DefaultLoadingManager.onLoad = () => {
            console.log(`loading complete`)
            console.log("really setting it up now")
            $('#loading-indicator').style.display = 'none'
            $('#click-to-play').style.display = 'block'
            const overlay = $('#overlay')
            $("#click-to-play").addEventListener('click',()=>{
                overlay.style.visibility = 'hidden'
                if($('#enter-vr'))  $('#enter-vr').removeAttribute('disabled')
            })
        }
        THREE.DefaultLoadingManager.onProgress = (url, loaded, total) => {
            console.log(`prog ${url}.  loaded ${loaded} of ${total}`)
            $("#progress").setAttribute('value',100*(loaded/total))
        }
        THREE.DefaultLoadingManager.onError = (url) => {
            console.log(`error loading ${url}`)
        }


    }


    // initPage()
    initScene()
    renderer.setAnimationLoop(render)

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