1+ var hoverEffect = function ( opts ) {
2+ var vertex = `
3+ varying vec2 vUv;
4+ void main() {
5+ vUv = uv;
6+ gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
7+ }
8+ ` ;
9+
10+ var fragment = `
11+ varying vec2 vUv;
12+
13+ uniform sampler2D texture;
14+ uniform sampler2D texture2;
15+ uniform sampler2D disp;
16+
17+ // uniform float time;
18+ // uniform float _rot;
19+ uniform float dispFactor;
20+ uniform float effectFactor;
21+
22+ // vec2 rotate(vec2 v, float a) {
23+ // float s = sin(a);
24+ // float c = cos(a);
25+ // mat2 m = mat2(c, -s, s, c);
26+ // return m * v;
27+ // }
28+
29+ void main() {
30+
31+ vec2 uv = vUv;
32+
33+ // uv -= 0.5;
34+ // vec2 rotUV = rotate(uv, _rot);
35+ // uv += 0.5;
36+
37+ vec4 disp = texture2D(disp, uv);
38+
39+ vec2 distortedPosition = vec2(uv.x + dispFactor * (disp.r*effectFactor), uv.y);
40+ vec2 distortedPosition2 = vec2(uv.x - (1.0 - dispFactor) * (disp.r*effectFactor), uv.y);
41+
42+ vec4 _texture = texture2D(texture, distortedPosition);
43+ vec4 _texture2 = texture2D(texture2, distortedPosition2);
44+
45+ vec4 finalTexture = mix(_texture, _texture2, dispFactor);
46+
47+ gl_FragColor = finalTexture;
48+ // gl_FragColor = disp;
49+ }
50+ ` ;
51+
52+ var parent = opts . parent || console . warn ( "no parent" ) ;
53+ var dispImage = opts . displacementImage || console . warn ( "displacement image missing" ) ;
54+ var image1 = opts . image1 || console . warn ( "first image missing" ) ;
55+ var image2 = opts . image2 || console . warn ( "second image missing" ) ;
56+ var intensity = opts . intensity || 1 ;
57+ var speedIn = opts . speedIn || 1.6 ;
58+ var speedOut = opts . speedOut || 1.2 ;
59+ var userHover = ( opts . hover === undefined ) ? true : opts . hover ;
60+ var easing = opts . easing || Expo . easeOut ;
61+
62+ var mobileAndTabletcheck = function ( ) {
63+ var check = false ;
64+ ( function ( a ) { if ( / ( a n d r o i d | b b \d + | m e e g o ) .+ m o b i l e | a v a n t g o | b a d a \/ | b l a c k b e r r y | b l a z e r | c o m p a l | e l a i n e | f e n n e c | h i p t o p | i e m o b i l e | i p ( h o n e | o d ) | i r i s | k i n d l e | l g e | m a e m o | m i d p | m m p | m o b i l e .+ f i r e f o x | n e t f r o n t | o p e r a m ( o b | i n ) i | p a l m ( o s ) ? | p h o n e | p ( i x i | r e ) \/ | p l u c k e r | p o c k e t | p s p | s e r i e s ( 4 | 6 ) 0 | s y m b i a n | t r e o | u p \. ( b r o w s e r | l i n k ) | v o d a f o n e | w a p | w i n d o w s c e | x d a | x i i n o | a n d r o i d | i p a d | p l a y b o o k | s i l k / i. test ( a ) || / 1 2 0 7 | 6 3 1 0 | 6 5 9 0 | 3 g s o | 4 t h p | 5 0 [ 1 - 6 ] i | 7 7 0 s | 8 0 2 s | a w a | a b a c | a c ( e r | o o | s \- ) | a i ( k o | r n ) | a l ( a v | c a | c o ) | a m o i | a n ( e x | n y | y w ) | a p t u | a r ( c h | g o ) | a s ( t e | u s ) | a t t w | a u ( d i | \- m | r | s ) | a v a n | b e ( c k | l l | n q ) | b i ( l b | r d ) | b l ( a c | a z ) | b r ( e | v ) w | b u m b | b w \- ( n | u ) | c 5 5 \/ | c a p i | c c w a | c d m \- | c e l l | c h t m | c l d c | c m d \- | c o ( m p | n d ) | c r a w | d a ( i t | l l | n g ) | d b t e | d c \- s | d e v i | d i c a | d m o b | d o ( c | p ) o | d s ( 1 2 | \- d ) | e l ( 4 9 | a i ) | e m ( l 2 | u l ) | e r ( i c | k 0 ) | e s l 8 | e z ( [ 4 - 7 ] 0 | o s | w a | z e ) | f e t c | f l y ( \- | _ ) | g 1 u | g 5 6 0 | g e n e | g f \- 5 | g \- m o | g o ( \. w | o d ) | g r ( a d | u n ) | h a i e | h c i t | h d \- ( m | p | t ) | h e i \- | h i ( p t | t a ) | h p ( i | i p ) | h s \- c | h t ( c ( \- | | _ | a | g | p | s | t ) | t p ) | h u ( a w | t c ) | i \- ( 2 0 | g o | m a ) | i 2 3 0 | i a c ( | \- | \/ ) | i b r o | i d e a | i g 0 1 | i k o m | i m 1 k | i n n o | i p a q | i r i s | j a ( t | v ) a | j b r o | j e m u | j i g s | k d d i | k e j i | k g t ( | \/ ) | k l o n | k p t | k w c \- | k y o ( c | k ) | l e ( n o | x i ) | l g ( g | \/ ( k | l | u ) | 5 0 | 5 4 | \- [ a - w ] ) | l i b w | l y n x | m 1 \- w | m 3 g a | m 5 0 \/ | m a ( t e | u i | x o ) | m c ( 0 1 | 2 1 | c a ) | m \- c r | m e ( r c | r i ) | m i ( o 8 | o a | t s ) | m m e f | m o ( 0 1 | 0 2 | b i | d e | d o | t ( \- | | o | v ) | z z ) | m t ( 5 0 | p 1 | v ) | m w b p | m y w a | n 1 0 [ 0 - 2 ] | n 2 0 [ 2 - 3 ] | n 3 0 ( 0 | 2 ) | n 5 0 ( 0 | 2 | 5 ) | n 7 ( 0 ( 0 | 1 ) | 1 0 ) | n e ( ( c | m ) \- | o n | t f | w f | w g | w t ) | n o k ( 6 | i ) | n z p h | o 2 i m | o p ( t i | w v ) | o r a n | o w g 1 | p 8 0 0 | p a n ( a | d | t ) | p d x g | p g ( 1 3 | \- ( [ 1 - 8 ] | c ) ) | p h i l | p i r e | p l ( a y | u c ) | p n \- 2 | p o ( c k | r t | s e ) | p r o x | p s i o | p t \- g | q a \- a | q c ( 0 7 | 1 2 | 2 1 | 3 2 | 6 0 | \- [ 2 - 7 ] | i \- ) | q t e k | r 3 8 0 | r 6 0 0 | r a k s | r i m 9 | r o ( v e | z o ) | s 5 5 \/ | s a ( g e | m a | m m | m s | n y | v a ) | s c ( 0 1 | h \- | o o | p \- ) | s d k \/ | s e ( c ( \- | 0 | 1 ) | 4 7 | m c | n d | r i ) | s g h \- | s h a r | s i e ( \- | m ) | s k \- 0 | s l ( 4 5 | i d ) | s m ( a l | a r | b 3 | i t | t 5 ) | s o ( f t | n y ) | s p ( 0 1 | h \- | v \- | v ) | s y ( 0 1 | m b ) | t 2 ( 1 8 | 5 0 ) | t 6 ( 0 0 | 1 0 | 1 8 ) | t a ( g t | l k ) | t c l \- | t d g \- | t e l ( i | m ) | t i m \- | t \- m o | t o ( p l | s h ) | t s ( 7 0 | m \- | m 3 | m 5 ) | t x \- 9 | u p ( \. b | g 1 | s i ) | u t s t | v 4 0 0 | v 7 5 0 | v e r i | v i ( r g | t e ) | v k ( 4 0 | 5 [ 0 - 3 ] | \- v ) | v m 4 0 | v o d a | v u l c | v x ( 5 2 | 5 3 | 6 0 | 6 1 | 7 0 | 8 0 | 8 1 | 8 3 | 8 5 | 9 8 ) | w 3 c ( \- | ) | w e b c | w h i t | w i ( g | n c | n w ) | w m l b | w o n u | x 7 0 0 | y a s \- | y o u r | z e t o | z t e \- / i. test ( a . substr ( 0 , 4 ) ) ) check = true ; } ) ( navigator . userAgent || navigator . vendor || window . opera ) ;
65+ return check ;
66+ } ;
67+
68+ var scene = new THREE . Scene ( ) ;
69+ var camera = new THREE . OrthographicCamera (
70+ parent . offsetWidth / - 2 ,
71+ parent . offsetWidth / 2 ,
72+ parent . offsetHeight / 2 ,
73+ parent . offsetHeight / - 2 ,
74+ 1 ,
75+ 1000
76+ ) ;
77+
78+ camera . position . z = 1 ;
79+
80+ var renderer = new THREE . WebGLRenderer ( {
81+ antialias : false ,
82+ // alpha: true
83+ } ) ;
84+
85+ renderer . setPixelRatio ( window . devicePixelRatio ) ;
86+ renderer . setClearColor ( 0xffffff , 0.0 ) ;
87+ renderer . setSize ( parent . offsetWidth , parent . offsetHeight ) ;
88+ parent . appendChild ( renderer . domElement ) ;
89+
90+ // var addToGPU = function(t) {
91+ // renderer.setTexture2D(t, 0);
92+ // };
93+
94+ var loader = new THREE . TextureLoader ( ) ;
95+ loader . crossOrigin = "" ;
96+ var texture1 = loader . load ( image1 ) ;
97+ var texture2 = loader . load ( image2 ) ;
98+
99+ var disp = loader . load ( dispImage ) ;
100+ disp . wrapS = disp . wrapT = THREE . RepeatWrapping ;
101+
102+ texture1 . magFilter = texture2 . magFilter = THREE . LinearFilter ;
103+ texture1 . minFilter = texture2 . minFilter = THREE . LinearFilter ;
104+
105+ texture1 . anisotropy = renderer . getMaxAnisotropy ( ) ;
106+ texture2 . anisotropy = renderer . getMaxAnisotropy ( ) ;
107+
108+ var mat = new THREE . ShaderMaterial ( {
109+ uniforms : {
110+ effectFactor : { type : "f" , value : intensity } ,
111+ dispFactor : { type : "f" , value : 0.0 } ,
112+ texture : { type : "t" , value : texture1 } ,
113+ texture2 : { type : "t" , value : texture2 } ,
114+ disp : { type : "t" , value : disp }
115+ } ,
116+
117+ vertexShader : vertex ,
118+ fragmentShader : fragment ,
119+ transparent : true ,
120+ opacity : 1.0
121+ } ) ;
122+
123+ var geometry = new THREE . PlaneBufferGeometry (
124+ parent . offsetWidth ,
125+ parent . offsetHeight ,
126+ 1
127+ ) ;
128+ var object = new THREE . Mesh ( geometry , mat ) ;
129+ scene . add ( object ) ;
130+
131+ var addEvents = function ( ) {
132+ var evtIn = "mouseenter" ;
133+ var evtOut = "mouseleave" ;
134+ if ( mobileAndTabletcheck ( ) ) {
135+ evtIn = "touchstart" ;
136+ evtOut = "touchend" ;
137+ }
138+ parent . addEventListener ( evtIn , function ( e ) {
139+ TweenMax . to ( mat . uniforms . dispFactor , speedIn , {
140+ value : 1 ,
141+ ease : easing
142+ } ) ;
143+ } ) ;
144+
145+ parent . addEventListener ( evtOut , function ( e ) {
146+ TweenMax . to ( mat . uniforms . dispFactor , speedOut , {
147+ value : 0 ,
148+ ease : easing
149+ } ) ;
150+ } ) ;
151+ } ;
152+
153+ if ( userHover ) {
154+ addEvents ( ) ;
155+ }
156+
157+ window . addEventListener ( "resize" , function ( e ) {
158+ renderer . setSize ( parent . offsetWidth , parent . offsetHeight ) ;
159+ } ) ;
160+
161+
162+ this . next = function ( ) {
163+ TweenMax . to ( mat . uniforms . dispFactor , speedIn , {
164+ value : 1 ,
165+ ease : easing
166+ } ) ;
167+ }
168+
169+ this . previous = function ( ) {
170+ TweenMax . to ( mat . uniforms . dispFactor , speedOut , {
171+ value : 0 ,
172+ ease : easing
173+ } ) ;
174+ } ;
175+
176+ var animate = function ( ) {
177+ requestAnimationFrame ( animate ) ;
178+
179+ renderer . render ( scene , camera ) ;
180+ } ;
181+ animate ( ) ;
182+ } ;
0 commit comments