particles/texture5.html

<!DOCTYPE html>
<!--
https://sketchfab.com/models/34eeb35d2a514f499d277d535e7999d9
-->
<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 to enter VR -->
    <script src="../boilerplate/webvr.js"></script>


    <style type="text/css">
        html, body {
            margin:0;
        }
        #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 GPUParticleSystem from "./GPUParticleSystem2.js"

    //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, parts

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

        //load the particle texture
        const texture_loader = new THREE.TextureLoader()
        const texture = texture_loader.load('./kenney_particlePack/PNG/scorch_01.png')

        const rand = (min,max) => Math.random()*(max-min) + min

        const options = {
            position: new THREE.Vector3(0,2,0),
            positionRandomness: 0.0,
            velocity: new THREE.Vector3(0.0, 0, 0.0),
            velocityRandomness: 1.0,
            acceleration: new THREE.Vector3(0.0,0.0,0.0),

            color: new THREE.Color(1.0,0.0,1.0),
            endColor: new THREE.Color(0.0,1.0,1.0),

            lifetime: 2.0,
            fadeIn:0.001,
            fadeOut:3.0,
            size: 30,
            sizeRandomness: 0.0,
        }

        parts = new GPUParticleSystem({
            maxParticles: 10000,
            particleSpriteTex: texture,
            blending: THREE.AdditiveBlending,
            onTick: (system, time) => {
                for(let i=0; i<10; i++) {
                    options.color.setHSL(0.1, 1.0, 0.5)
                    options.endColor.setHSL(0.0, 0.0, 0.8)
                    const theta = rand(0,Math.PI*2)
                    const size = 0.4
                    options.position.set(Math.sin(theta)*size,Math.cos(theta)*size, 0)
                    const s = 0.02
                    options.velocity.set(rand(-s, s), rand(-s, s), rand(-s, s))
                    system.spawnParticle(options);
                }
            }
        })
        parts.position.set(0,1.5,-1)
        scene.add(parts)

        scene.add(new THREE.AmbientLight(0xffffff,1.0))
    }

    //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)
        if(parts) parts.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>