Playing with sound - 10

Make some 'art' using three js. Purple tunnel Use a cylinder to make the tunnel

by blackpolygon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.sound.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
<html>

  <head>
    <title>Playing with sound in 3D</title>
  </head>

  <body>
  </body>

</html>

CSS

html {
  width: 100%;
  height: 100%;
}

body {
  margin: 0 auto;
  overflow: hidden;
  height: 100%;
}

JavaScript

var container, camera, scene, renderer;
var mesh, geometry;

var worldWidth = 32, worldDepth = 30;

var mic, fft, spectrum;
var energySlots = worldWidth;

var radiusTop = 4000;
var radiusBottom = 4000;
var cylinderHeight = 30000;
var radialSegments = worldWidth;
var heightSegments = worldDepth;
var openEnded = true;


function setup() {
  noCanvas();
  init();
}


function init() {

  mic = new p5.AudioIn()
  mic.start();
  fft = new p5.FFT(0.6);
  fft.setInput(mic);

  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x0C102F);
   scene.fog = new THREE.FogExp2(0x0C102F, 0.00005);

  camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 70000);
  camera.position.y = 500;
  camera.position.z = 16000;

  geometry = new THREE.CylinderBufferGeometry(radiusTop, radiusBottom, cylinderHeight, radialSegments - 1, heightSegments - 1, openEnded);
  geometry.rotateX(-Math.PI / 2);
  
  var material = new THREE.MeshPhongMaterial({
    color: 0x000000,
    emissive: 0xDD00FF,
    specular: 0x111111,
   reflectivity: 99,
    shininess: 99,
    flatShading: true,
    wireframe: false,
    side: THREE.DoubleSide
  });


  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  var directionalLight = new THREE.DirectionalLight(0xFF00FF, 1);
  directionalLight.position.set(1000, 0, 1000).normalize();
  /// directionalLight.rotateX(-Math.PI / 2);
  // scene.add(directionalLight);
  
  
	

directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 500); 
// scene.add( directionalLightHelper); 

 var light = new THREE.PointLight(0xff00ff, 1, 15000); 
 light.position.set(0, 0, -4000);
 scene.add(light);
 
 var light2 = new THREE.PointLight(0xffff00, 1, 8000); 
 light2.position.set(-500, 0,- 5000);
 // scene.add(light2);
 
 var light3 = new THREE.PointLight(0xffffff, 1, 8000); 
 light3.position.set(-500, 0, 5000);
 // scene.add(light3);


  renderer = new THREE.WebGLRenderer();
 ...