# 3D Model as Audio visualizer

**URL:** <https://discourse.threejs.org/t/3d-model-as-audio-visualizer/42000>\
**Category:** Questions\
**Tags:** audio, model, sound-visualization\
**Created:** [August 29, 2022, 8:59am UTC](https://discourse.threejs.org/t/3d-model-as-audio-visualizer/42000 "2022-08-29T08:59:36Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![hrbang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hrbang/32/29132_2.png) [@hrbang](https://discourse.threejs.org/u/hrbang)\
**Post date:** [August 29, 2022, 8:59am UTC](https://discourse.threejs.org/t/3d-model-as-audio-visualizer/42000/1 "2022-08-29T08:59:36Z")

</div>

Hello

I have started a project where i have made a 3D model with some pillars and want them to visualize audio by moving up and down.

As it is now i can get the audio data from the analyzer and console log it but i can’t seem to wrap my head around how to apply it to the model

Here is my code:

> **[import "./style.css"import \* as THREE from "three"import { OrbitControls } f...](https://pastebin.com/PhM5H2LD)**
>
> Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

Here is what i get when i console log the model

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/0/605ba71b1017c29b348976bf16c941dc0beaadf9.png)

Can somebody help me with what to do here?

Thanks and have a great day!

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [August 29, 2022, 9:46am UTC](https://discourse.threejs.org/t/3d-model-as-audio-visualizer/42000/2 "2022-08-29T09:46:39Z")

</div>

Here is an example where I displace vertices from your microphone input  
[FFT - Three.js Tutorials (sbcode.net)](https://sbcode.net/threejs/fft/)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/1/11327e649e0e78f26d509e11414b5ceb1856e7b9.png)

Look at line 106-112 in my example code, and see that I am just getting numbers and drawing a colour onto a canvas based on that number.  
You could use some of those numbers to change the Y value of some cubes.

Type “HTML5 Audio FFT Threejs” into your favourite search engine and you fill find more examples.