1- import React , { useEffect , useMemo , useRef } from ' react'
2- import fragmentShader from ' ./fragmentShader.js'
3- import vertexShader from ' ./vertexShader.js'
4- import { useFrame } from ' @react-three/fiber'
5- import { MathUtils } from ' three'
6- import * as THREE from ' three'
1+ import React , { useEffect , useMemo , useRef } from " react" ;
2+ import fragmentShader from " ./fragmentShader.js" ;
3+ import vertexShader from " ./vertexShader.js" ;
4+ import { useFrame } from " @react-three/fiber" ;
5+ import { MathUtils } from " three" ;
6+ import * as THREE from " three" ;
77
88const Sphere = ( { sound } ) => {
9- const mesh = useRef ( )
10- const analyser = useRef ( ) ;
11- useEffect (
12- ( ) => void ( analyser . current = new THREE . AudioAnalyser ( sound . current , 32 ) ) ,
13- [ ]
14- ) ;
15- const uniforms = useMemo ( ( ) => {
16- return {
17- u_time : { value : 0 } ,
18- u_intensity : { value : 3 }
19- }
20- } )
21- useFrame ( ( state , delta ) => {
22- const { clock } = state ;
23- if ( mesh . current ) {
24- mesh . current . material . uniforms . u_time . value = 0.4 * clock . getElapsedTime ( ) ;
25- mesh . current . material . uniforms . u_intensity . value = MathUtils . lerp ( mesh . current . material . uniforms . u_intensity . value , 0.15 , 0.02 ) ;
26- }
27- if ( analyser . current ) {
28- const data = analyser . current . getAverageFrequency ( ) ;
29- mesh . current . scale . x = mesh . current . scale . y = mesh . current . scale . z =
30- ( data / 100 ) * 2 ;
31- uniforms . u_intensity . value = ( data / 100 ) * 2
32- }
33- mesh . current . rotation . x += 0.005 * delta ;
34- mesh . current . rotation . y += 0.005 * delta ;
35- } )
9+ const mesh = useRef ( ) ;
10+ const analyser = useRef ( ) ;
11+ useEffect (
12+ ( ) => void ( analyser . current = new THREE . AudioAnalyser ( sound . current , 32 ) ) ,
13+ [ sound ]
14+ ) ;
15+
16+ const uniforms = useMemo ( ( ) => {
17+ return {
18+ u_time : { value : 0 } ,
19+ u_intensity : { value : 3 } ,
20+ } ;
21+ } , [ ] ) ;
3622
23+ useFrame ( ( state , delta ) => {
24+ const { clock } = state ;
25+ if ( mesh . current ) {
26+ mesh . current . material . uniforms . u_time . value =
27+ 0.4 * clock . getElapsedTime ( ) ;
28+ mesh . current . material . uniforms . u_intensity . value = MathUtils . lerp (
29+ mesh . current . material . uniforms . u_intensity . value ,
30+ 0.15 ,
31+ 0.02
32+ ) ;
33+ }
34+ if ( analyser . current ) {
35+ const data = analyser . current . getAverageFrequency ( ) ;
36+ mesh . current . scale . x =
37+ mesh . current . scale . y =
38+ mesh . current . scale . z =
39+ ( data / 100 ) * 2 ;
40+ uniforms . u_intensity . value = ( data / 100 ) * 2 ;
41+ }
42+ mesh . current . rotation . x += 0.005 * delta ;
43+ mesh . current . rotation . y += 0.005 * delta ;
44+ } ) ;
3745
38- return (
39- < mesh ref = { mesh } scale = { 3 }
40- position = { [ 0 , 0 , 0 ] } >
41- < icosahedronGeometry args = { [ 2 , 20 ] } />
42- < shaderMaterial fragmentShader = { fragmentShader } vertexShader = { vertexShader } uniforms = { uniforms } />
43- </ mesh >
44- )
45- }
46+ return (
47+ < mesh ref = { mesh } scale = { 3 } position = { [ 0 , 0 , 0 ] } >
48+ < icosahedronGeometry args = { [ 2 , 20 ] } />
49+ < shaderMaterial
50+ fragmentShader = { fragmentShader }
51+ vertexShader = { vertexShader }
52+ uniforms = { uniforms }
53+ />
54+ </ mesh >
55+ ) ;
56+ } ;
4657
47-
48-
49- export default Sphere
58+ export default Sphere ;
0 commit comments