particles/waterfountain.html


<!DOCTYPE html>

<!--


https://sketchfab.com/models/fd5cd30b8aac444982965aabe2f59f23

-->

<html lang="en">
<head>
    <!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
    <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>
    <!-- / Fathom -->
    <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">
        body {
            font-family: Monospace;
            background-color: #f0f0f0;
            margin: 0px;
            overflow: hidden;
        }
        #overlay {
            position: fixed;
            display: none;
            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_MOVE,
        POINTER_PRESS,
        POINTER_RELEASE,
        Pointer} from '../boilerplate/pointer.js'
    import GPUParticleSystem from './GPUParticleSystem.js'
    import VRStats from '../boilerplate/vrstats.js'

    //JQuery-like selector
    const $ = (sel) => document.querySelector(sel)
    const on = (elem, type, cb) => elem.addEventListener(type,cb)
    //generate random number in a range
    const rand = (min,max) => min + Math.random()*(max-min)

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

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

        //a standard light
        const light = new THREE.AmbientLight(0xffffff,0.8);
        scene.add(light);

        //class which handles mouse and VR controller
        pointer = new Pointer(scene, renderer, camera, {
            intersectionFilter: ((o) => o.userData.clickable),
            cameraFollowMouse: false,
            enableLaser:false,
        })


        const gltfLoader = new THREE.GLTFLoader()
        gltfLoader.load("./fountain_low_poly/scene.gltf",
            (model)=>{
                model.scene.traverse((ch)=>{
                    if(ch.isMesh) {
                        ch.position.z = -10
                        ch.scale.set(0.3,0.3,0.3)
                        ch.rotation.x = -90*Math.PI/180
                        scene.add(ch)
                    }
                })
            }
        )


        //options for the particle effect
        const textureLoader = new THREE.TextureLoader()
        options = {
            maxParticles: 10000,
            position: new THREE.Vector3(0,1.0,-10.0),
            positionRandomness: 0.0,
            baseVelocity: new THREE.Vector3(0.0, 5.0, 0.0),
            velocity: new THREE.Vector3(0.0, 0.0, 0.0),
            velocityRandomness: 1.0,
            acceleration: new THREE.Vector3(0.0,-4.0,0.0),
            baseColor: new THREE.Color(0.0,1.0,0.5),
            color: new THREE.Color(0.0,1.0,1.0),
            colorRandomness: 0.5,
            lifetime: 3.5,
            size: 15,
            fadeIn:0.001,
            fadeOut: 0.5,
            sizeRandomness: 1.0,
            particleSpriteTex: textureLoader.load('./tex/particle2.png'),
            blending: THREE.NormalBlending,
            onTick:(system,time) => {
                let amt = (Math.sin(time)+0.9) // goes from 0 to 2
                for(let i=0; i<amt*4; i++) {
                    options.velocity.x = options.baseVelocity.x + system.random() * options.velocityRandomness
                    options.velocity.y = options.baseVelocity.y + amt/2.0 + system.random() * options.velocityRandomness
                    options.velocity.z = options.baseVelocity.z + system.random() * options.velocityRandomness
                    system.spawnParticle( options );
                }
            }
        }
        particleSystem = new GPUParticleSystem(options)
        scene.add(particleSystem)
        stats = new VRStats(renderer)

        if($('#enter-vr'))  $('#enter-vr').removeAttribute('disabled')
    }

    //called on every frame. customize this
    function render(time) {
        const t = time/1000
        //update the pointer and stats, if configured
        if(pointer) pointer.tick(time)
        if(stats) stats.update(time)
        particleSystem.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 );
    }

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

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