# ThreeJS-3D-Music-Visualizer

**Repository Path**: bgoonz/ThreeJS-3D-Music-Visualizer

## Basic Information

- **Project Name**: ThreeJS-3D-Music-Visualizer
- **Description**: Three.js terrain + starfield (object oriented)
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-20
- **Last Updated**: 2021-07-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#Seeing Sounds with Three.js
<p>This is a tutorial series I have been writing, and very much a work in progress. The series provides an introduction the world of three.js through developing a music visualizer. The tutorials created and code used so far can be seen below:</p>

![header](https://gfulton-images.s3.amazonaws.com/2015/Dec/a77c9b93142db7e47dcb1effde43c14f-1449307608685.jpg)


<h3>Contents</h3>
<h5>Three.js Basics</h5>
<p><a href="http://www.graemefulton.com/get-up-to-speed-with-three-js-webgl/">Get up to speed with three.js: setting your first scene</a></p>
<h5>Seeing Sounds Project</h5>
<p><a title="Seeing sounds Intro" href="http://www.graemefulton.com/seeing-sounds-three-js-webglmusic-visualization/" target="_blank">Seeing Sounds with ThreeJS + WebGL [Intro]</a></p>
<p><a title="Seeing sounds part 1" href="http://www.graemefulton.com/create-star-field-three-js-webgl-part-1/" target="_blank">Seeing Sounds [Part 1]: Creating the star field </a></p>
<p><a title="Seeing Sounds Part 2" href="http://www.graemefulton.com/creating-terrain-three-js-webgl-part-2/" target="_blank">Seeing Sounds [Part 2]: Creating the terrain</a></p>
<p><a title="Seeing sounds Part 3" href="http://www.graemefulton.com/animating-terrain-three-js-webgl-part-3/" target="_blank">Seeing sounds [Part 3]: Star field + Terrain</a></p>
<p><a title="Seeing sounds part 4" href="http://www.graemefulton.com/animating-terrain-three-js-webgl-part-4-2/" target="_blank">Seeing sounds [Part 4]: Animating a terrain with three.js</a></p>
<p>[Todo: First person movement with the Chase Camera]</p>
<h5>Coding an infinite 3D terrain</h5>
<p><a href="/three-js-infinite-world-webgl-p1/">Coding an infinite 3D world with three.js [Part 1]</a></p>
<p><a href="/threejs-infinite-world-webgl/">Coding an infinite 3D world with three.js [Part 2]</a></p>
<h3>Code</h3>
<h4>Tutorial repository</h4>
<p>Code samples can be seen <a title="seeing sounds code" href="https://github.com/GraemeFulton/threejs-starter" target="_blank">here</a></p>
<h4>Object oriented repository</h4>
<p>To create a more re-usable codebase, I then refactored the javascript into object oriented code, which can be seen in <a title="Object oriented code samples" href="https://github.com/GraemeFulton/three-js-visualizerOO" target="_blank">this repository</a>.</p>