Jump to content
  • Advertisement


  • Content Count

  • Joined

  • Last visited

Community Reputation

109 Neutral

About JaysonPowers

  • Rank
  1. JaysonPowers

    Extending Three.js Audio Code not working

    Here's the errors: I thought it was -= not =- . So it's setting the x coordinates to the same coordinates, doh!  
  2. Hi, I'm extending some code I found in a tutorial on how to make 3d bar graph objects react to audio volumes, the original code uses 2 bars, but I tried extending it to 4. It's not working, however when I log the object, it's there and reading it just fine. The objects are getting their image textures as well, since I changed the textures and it still partially worked. But no matter what I do, only 2 bars are showing. // global variables var renderer; var scene; var camera; var control; var stats; /** * Initializes the scene, camera and objects. Called when the window is * loaded by using window.onload (see below) */ function init() { // create a scene, that will hold all our elements such as objects, cameras and lights. scene = new THREE.Scene(); // create a camera, which defines where we're looking at. camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // create a render, sets the background color and the size renderer = new THREE.WebGLRenderer(); renderer.setClearColor(0x000000, 1.0); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMapEnabled = true; // create the ground plane var planeGeometry = new THREE.PlaneGeometry(80, 80); var planeMaterial = new THREE.MeshPhongMaterial({color: 0x3333ff}); var plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.receiveShadow = true; // rotate and position the plane plane.rotation.x = -0.5 * Math.PI; plane.position.x = 0; plane.position.y = -2; plane.position.z = 0; // add the plane to the scene scene.add(plane); // create a cube var cubeGeometry = new THREE.BoxGeometry(3, 6, 3, 15, 25, 15); var pm = new THREE.ParticleBasicMaterial(); pm.map = THREE.ImageUtils.loadTexture("../assets/textures/particles/particle4.png"); pm.blending= THREE.AdditiveBlending; pm.transparent = true; pm.size=1.0; var ps = new THREE.ParticleSystem(cubeGeometry, pm); ps.sortParticles = true; ps.name='cube'; ps.position.x=1.75; scene.add(ps); var pm2 = pm.clone(); pm2.map = THREE.ImageUtils.loadTexture("../assets/textures/particles/particle3.png"); var ps2 = new THREE.ParticleSystem(cubeGeometry, pm2); ps2.name = 'cube2'; ps2.position.x=-1.75; scene.add(ps2); var pm3 = pm.clone(); pm3.map = THREE.ImageUtils.loadTexture("../assets/textures/particles/particle2.png"); var ps3 = new THREE.ParticleSystem(cubeGeometry, pm3); ps3.name = 'cube3'; ps3.position.x=-1.75; scene.add(ps3); console.log(ps3); var pm4 = pm.clone(); pm4.map = THREE.ImageUtils.loadTexture("../assets/textures/particles/particle.png"); var ps4 = new THREE.ParticleSystem(cubeGeometry, pm4); ps4.name = 'cube4'; ps4.position.x=-1.75; scene.add(ps4); // cube.name='cube'; // cube.castShadow = true; // add the cube to the scene // scene.add(cube); // position and point the camera to the center of the scene camera.position.x = 10; camera.position.y = 14; camera.position.z = 10; camera.lookAt(scene.position); // add spotlight for the shadows var spotLight = new THREE.SpotLight(0xffffff); spotLight.position.set(10, 20, 20); spotLight.shadowCameraNear = 20; spotLight.shadowCameraFar = 50; spotLight.castShadow = true; scene.add(spotLight); // setup the control object for the control gui //control = new function() { // this.rotationSpeed = 0.005; // this.opacity = 0.6; // // this.color = cubeMaterial.color.getHex(); //}; // add extras //addControlGui(control); //addStatsObject(); // add the output of the renderer to the html element document.body.appendChild(renderer.domElement); console.log('Log statement from the init function'); // console.log(cube); // call the render function, after the first render, interval is determined // by requestAnimationFrame setupSound(); render(); loadSound("../assets/audio/01-01- Flying In A Blue Dream.ogg"); } //function addControlGui(controlObject) { // var gui = new dat.GUI(); //gui.add(controlObject, 'rotationSpeed', -0.01, 0.01); //} //function addStatsObject() { // stats = new Stats(); // stats.setMode(0); // stats.domElement.style.position = 'absolute'; // stats.domElement.style.left = '0px'; // stats.domElement.style.top = '0px'; // document.body.appendChild( stats.domElement ); //} var context; var sourceNode; var analyser; var analyser2; var analyser3; var analyser4; /** * Called when the scene needs to be rendered. Delegates to requestAnimationFrame * for future renders */ function render() { // update the camera var rotSpeed = 0.005//control.rotationSpeed; camera.position.x = camera.position.x * Math.cos(rotSpeed) + camera.position.z * Math.sin(rotSpeed); camera.position.z = camera.position.z * Math.cos(rotSpeed) - camera.position.x * Math.sin(rotSpeed); camera.lookAt(scene.position); // update stats //stats.update(); // and render the scene renderer.render(scene, camera); updateCubes(); // render using requestAnimationFrame requestAnimationFrame(render); } function updateCubes() { // get the average for the first channel var array = new Uint8Array(analyser.frequencyBinCount); analyser.getByteFrequencyData(array); var average = getAverageVolume(array); // get the average for the second channel var array2 = new Uint8Array(analyser2.frequencyBinCount); analyser2.getByteFrequencyData(array2); var average2 = getAverageVolume(array2); var array3 = new Uint8Array(analyser3.frequencyBinCount); analyser3.getByteFrequencyData(array3); var average3 = getAverageVolume(array3); var array4 = new Uint8Array(analyser4.frequencyBinCount); analyser4.getByteFrequencyData(array4); var average4 = getAverageVolume(array4); // clear the current state if (scene.getObjectByName('cube')) { var cube = scene.getObjectByName('cube'); var cube2 = scene.getObjectByName('cube2'); var cube3 = scene.getObjectByName('cube3'); var cube4 = scene.getObjectByName('cube4'); cube.scale.y=average/50; cube2.scale.y=average2/50; cube3.scale.y=average2/50; cube4.scale.y=average2/50; } } function setupSound() { if (! window.AudioContext) { if (! window.webkitAudioContext) { alert('no audiocontext found'); } window.AudioContext = window.webkitAudioContext; } context = new AudioContext(); // setup a analyzer analyser = context.createAnalyser(); analyser.smoothingTimeConstant = 0.4; analyser.fftSize = 1024; analyser2 = context.createAnalyser(); analyser2.smoothingTimeConstant = 0.4; analyser2.fftSize = 1024; analyser3 = context.createAnalyser(); analyser3.smoothingTimeConstant = 0.4; analyser3.fftSize = 1024; analyser4 = context.createAnalyser(); analyser4.smoothingTimeConstant = 0.4; analyser4.fftSize = 1024; // create a buffer source node sourceNode = context.createBufferSource(); var splitter = context.createChannelSplitter(); var splitter2 = context.createChannelSplitter(); // connect the source to the analyser and the splitter sourceNode.connect(splitter); // connect one of the outputs from the splitter to // the analyser splitter.connect(analyser,0); splitter.connect(analyser2,1); splitter2.connect(analyser3,0); splitter2.connect(analyser4,1); // and connect to destination sourceNode.connect(context.destination); context = new AudioContext(); } function getAverageVolume(array) { var values = 0; var average; var length = array.length; // get all the frequency amplitudes for (var i = 0; i < length; i++) { values += array[i]; } average = values / length; return average; } function playSound(buffer) { sourceNode.buffer = buffer; sourceNode.start(0); } // load the specified sound function loadSound(url) { var request = new XMLHttpRequest(); request.open('GET', url, true); request.responseType = 'arraybuffer'; // When loaded decode the data request.onload = function() { // decode the data context.decodeAudioData(request.response, function(buffer) { // when the audio is decoded play the sound playSound(buffer); }, onError); } request.send(); } function onError(e) { console.log(e); } /** * Function handles the resize event. This make sure the camera and the renderer * are updated at the correct moment. */ function handleResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } // calls the init function when the window is done loading. window.onload = init; // calls the handleResize function when the window is resized window.addEventListener('resize', handleResize, false); I'm wondering if using clone more than once is messing it up.   Please help!
  3. Installing ...forever
  4. Sounds good, I get a/some small program going, then hit a bigger one. Thanks for the resources. Can't wait to get some reusable member functions going, yippee! BTW, I'm thinking about starting with the game Bash, the old bouncy ball program, then go from there. There's a great book out there, but it uses DirectX, oh well, I'm going to need to start someplace.
  5. @Tom Thanks man I think I've got it, in case you're interested, here's my answers: 1. Yes, I've made some simple games, but it's been over 4 years 2.1 I'm in the deciding process, i.e. what's the end. 2.2 Loved the 7 Habits man, that's so cool. 2.3 My purpose, set a goal, stick with it 2.4 My games purpose, stress relief, possibly education 2.5 I'd love to open source it with a donate 3. That's totally great Decision tree (table) 4. That's a good question ; 5. Point taken 6. Cool Again, I'd marry you if I weren't taken already, just kidding. mathacha
  6. Wanted to let you know I'm reading your comments. Need some time to process b4 I answer. Thanks, mathacha
  7. Hi it's mathacha, I'm in a bit of a beginners pickle. I'm looking to make my first somewhat complex game, and I don't know where to start. I have programming experience, and I know what I like. Of all the choices of graphics libraries, game types, etc..., what do I do? Big picture is: based on Newtonian laws and simple physicsdark look, stress reliever, tad of goofynessAstronomy Theme I've decided on some general things: full screen mode, with bit-wise graphics control, C++3 month commitment and Open Source as much as possible. I want: Accessibility, i.e, not quick mouse movements or keystrokes.mostly 2D with my personal 3D transformations.short list of programming libraries, preferably a graphics library and audio library at most. What are some games to try to model after? Does anyone have any planning tips? I know a tad bit of UML, would that be too much to try to use?
  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!