particles/texture1.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 "./GPUParticleSystem.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/star_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.5, 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),
            colorRandomness: 0.0,

            lifetime: 2.0,
            fadeIn:0.001,
            fadeOut:0.001,
            size: 60,
            sizeRandomness: 0.0,
        }

        parts = new GPUParticleSystem({
            maxParticles: 10000,
            particleSpriteTex: texture,
            blending: THREE.AdditiveBlending,
            onTick:(system,time) => {
                for (let i = 0; i < 10; i++) {
                    options.velocity.set(rand(-1,1),rand(-1,1), 0)
                    system.spawnParticle(options);
                }
            }})
        parts.position.z = -5
        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>