audio_reactive.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Camp Workshop</title>
        <meta charset="utf-8">
        <meta property="og:title" content="Camp Workshop"/>
        <meta property="og:type" content="website"/>
        <meta property="og:image" content=""/>
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

        <style>
            body {
                margin: 0px;
                overflow: hidden;
                background-color: #000000;
            }
        </style>
    </head>
    <body>

        <script src="js/third-party/threejs/three.js"></script>
        <script src="js/third-party/threejs/vr/ViveController.js"></script>
        <script src="js/third-party/threejs/vr/WebVR.js"></script>

        <script src="js/third-party/threejs/loaders/OBJLoader.js"></script>
        <script src="js/third-party/threejs/effects/VREffect.js"></script>
        <script src="js/third-party/threejs/effects/StereoEffect.js"></script>

        <script src="js/third-party/threejs/controls/VRControls.js"></script>
        <script src="js/third-party/threejs/controls/DeviceOrientationControls.js"></script>
        <script src="js/third-party/threejs/controls/OrbitControls.js"></script>

        <script src="js/third-party/TweenMax.min.js"></script>
        <script src="js/third-party/perlin.js"></script>

        <script src="js/utils/helpers.js"></script>
        <script src="js/utils/AudioReactive.js"></script>

        <script>

            var camera, scene, renderer, effect, controls, vrControls, light;
            var controller1, controller2;
            var mobile = false;
            var vr = false;

            var objects = [];

            init();
            setup();
            render();

            function init() {

                // audio

                audio = new AudioReactive({});
                audio.playMedia('assets/sound/ritual');

                // renderer

                renderer = new THREE.WebGLRenderer({antialias: true});
                renderer.setPixelRatio(window.devicePixelRatio);
                renderer.setSize(window.innerWidth, window.innerHeight);
                document.body.appendChild(renderer.domElement);

                // scene

                scene = new THREE.Scene();

                // camera

                camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 10000);
                camera.position.set(0, 0, 3);

                // controls

                controls = new THREE.OrbitControls(camera);
                controls.minDistance = 2.5;
                controls.maxDistance = 6;
                //controls.maxPolarAngle = Math.PI / 2;
                controls.autoRotate = true;
                controls.enablePan = false;
                controls.enableZoom = false;
                //controls.autoRotate = true;

                // events

                addEvents();

            }

            function setup() {
                var cubeMap = getCubeMap(1);

                var cubeShader = THREE.ShaderLib['cube'];
                cubeShader.uniforms['tCube'].value = cubeMap;

                var skyBoxMaterial = new THREE.ShaderMaterial({
                    fragmentShader: cubeShader.fragmentShader,
                    vertexShader: cubeShader.vertexShader,
                    uniforms: cubeShader.uniforms,
                    depthWrite: false,
                    side: THREE.BackSide
                });

                var skyBox = new THREE.Mesh(new THREE.CubeGeometry(1000, 1000, 1000), skyBoxMaterial);

                scene.add(skyBox);

                // lights

                light = new THREE.DirectionalLight(0xFFFFFF);
                light.position.set(.2, .1, .2);
                scene.add(light);

                // objects

                var material = new THREE.MeshStandardMaterial({
                    //color:0xFF0000,
                    metalness: 1,
                    roughness: 0.6,
                    envMap: cubeMap,
                    shading: THREE.FlatShading
                });//shading: THREE.FlatShading
                var geo = new THREE.TetrahedronGeometry(.1, 0);
                for (var i = 0; i < 64; i++) {
                    var mesh = new THREE.Mesh(geo, material);
                    scene.add(mesh);
                    objects.push(mesh)
                    mesh.position.x = -3 + Math.random() * 6;
                    mesh.position.y = -3 + Math.random() * 6;
                    mesh.position.z = -3 + Math.random() * 6;
                    mesh.rotation.set(Math.random() * Math.PI * 2, Math.random() * Math.PI * 2, Math.random() * Math.PI * 2)
                }
            }

            function render() {
                var time = Date.now() * 0.001;

                //light.position.x = Math.sin(time*10);
                //light.position.z = Math.cos(10*time);

                audio.frequencyData = audio.update();

                for (var i = 0; i < objects.length; i++) {
                    var s = 5 * audio.frequencies[i] / 128
                    objects[i].scale.set(s, s, s)
                }

                // vr

                if (vr) {
                    vrControls.update();
                    controller1.update();
                    controller2.update();
                    effect.requestAnimationFrame(render);
                    //camera.position.y-=1;
                    effect.render(scene, camera);
                    //camera.position.y+=1;
                    return;
                }

                // web and mobile

                requestAnimationFrame(render);
                controls.update();
                if (mobile) {
                    camera.position.set(0, 0, 0);
                    camera.translateZ(3);
                }
                renderer.render(scene, camera);
            }

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