1+ <!DOCTYPE html>
2+ < html lang ="en "> < head >
3+ < meta http-equiv ="content-type " content ="text/html; charset=UTF-8 ">
4+ < title > DisplaceMap demo and three.js</ title >
5+ < meta charset ="utf-8 ">
6+ < meta name ="viewport " content ="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0 ">
7+ < style >
8+ body
9+ {
10+ background-color : # 121212
11+ }
12+ </ style >
13+ < script type ="text/javascript " src ="./three.min.js "> </ script >
14+ < script type ="text/javascript " src ="../../build/mod3.bundle.js "> </ script >
15+ < script type ="text/javascript " src ="../js/Tween.js "> </ script >
16+ < script type ="text/javascript " src ="../js/RequestAnimationFrame.js "> </ script >
17+ </ head >
18+ < body >
19+ < div id ="container " style ="position:relative;margin:0 auto;padding:0;z-index:0;cursor:pointer; "> </ div >
20+ < script >
21+ var container ;
22+ var camera , scene , renderer , projector ;
23+ var multx = 0.5 * Math . PI ;
24+ var multy = - Math . PI ;
25+
26+ var cube ;
27+
28+ var targetRotationY = 0 ;
29+ var targetRotationOnMouseDownY = 0 ;
30+ var targetRotationX = 0 ;
31+ var targetRotationOnMouseDownX = 0 ;
32+ var rad = 500 ;
33+ var mouse = { x :0 , y :0 } ;
34+ var mouseX = 0 ;
35+ var mouseXOnMouseDown = 0 ;
36+ var mouseY = 0 ;
37+ var mouseYOnMouseDown = 0 ;
38+ var mstack , mod ;
39+ var windowHalfX = window . innerWidth / 2 ;
40+ var windowHalfY = window . innerHeight / 2 ;
41+ var w , h , w2 , h2 ;
42+
43+ init ( ) ;
44+ animate ( ) ;
45+
46+
47+ function init ( ) {
48+
49+ container = document . getElementById ( 'container' ) ;
50+ w = window . innerWidth ;
51+ h = window . innerHeight ;
52+ w2 = w / 2 ;
53+ h2 = h / 2 ;
54+ container . style . width = w + "px" ;
55+ container . style . height = h + "px" ;
56+ container . style . marginTop = 0.5 * ( window . innerHeight - h ) + 'px' ;
57+
58+ scene = new THREE . Scene ( ) ;
59+
60+ camera = new THREE . PerspectiveCamera ( 70 , w / h , 1 , 1000 ) ;
61+ camera . position . z = rad ;
62+ scene . add ( camera ) ;
63+
64+ projector = new THREE . Projector ( ) ;
65+
66+ // Cube Cube
67+ var materials = [ ] ;
68+ for ( var mii = 0 ; mii < 6 ; mii ++ )
69+ {
70+ var mat = new THREE . MeshBasicMaterial ( { color : 0xffffff } ) ;
71+ materials . push ( mat ) ;
72+ }
73+ cube = new THREE . Mesh ( new THREE . CubeGeometry ( 400 , 400 , 1 , 20 , 20 , 20 ) , new THREE . MeshFaceMaterial ( materials ) ) ;
74+ scene . add ( cube ) ;
75+ renderer = new THREE . CanvasRenderer ( ) ;
76+ renderer . setSize ( w , h ) ;
77+
78+ container . appendChild ( renderer . domElement ) ;
79+
80+ container . addEventListener ( 'mousedown' , onDocumentMouseDown , false ) ;
81+
82+ var displacemap = document . createElement ( 'canvas' ) ,
83+ ctx = displacemap . getContext ( '2d' ) , grd , displaceData ,
84+ dW = 100 , dH = 100
85+ ;
86+
87+ // create a displace map image
88+ displacemap . width = dW ;
89+ displacemap . height = dH ;
90+ displacemap . style . width = dW + 'px' ;
91+ displacemap . style . height = dH + 'px' ;
92+ ctx . createImageData ( dW , dH ) ;
93+ ctx . fillStyle = "rgb(128,128,128)" ;
94+ ctx . fillRect ( 0 , 0 , dW , dH ) ;
95+ // create radial gradient
96+ grd = ctx . createRadialGradient ( dW / 2 , dH / 2 , 0 , dW / 2 , dH / 2 , dW / 2 ) ;
97+ grd . addColorStop ( 1 , "#ffffff" ) ; // neutral
98+ grd . addColorStop ( 0 , "#808080" ) ; // white
99+ ctx . fillStyle = grd ;
100+ ctx . beginPath ( ) ;
101+ ctx . arc ( dW / 2 , dH / 2 , dW / 2 , 0 , Math . PI * 2 , true ) ;
102+ ctx . fill ( ) ;
103+ displaceData = ctx . getImageData ( 0 , 0 , dW , dH ) ;
104+
105+ // display the map also
106+ displacemap . style . position = 'absolute' ;
107+ displacemap . style . top = 0 ;
108+ displacemap . style . left = 0 ;
109+ displacemap . style . zIndex = 10 ;
110+ container . appendChild ( displacemap ) ;
111+
112+ mstack = new MOD3 . ModifierStack ( MOD3 . LibraryThree , cube ) ;
113+ mod = new MOD3 . DisplaceMap ( displaceData . data , displaceData . width , displaceData . height ) ;
114+ mod . offset = 128 ;
115+ mstack . addModifier ( mod ) ;
116+ var tobj = { force :- 1.5 } ;
117+ new TWEEN . Tween ( tobj ) . to ( { force :1.5 } , 5000 ) . onUpdate ( function ( ) {
118+ mod . force = this . force ;
119+ mstack . apply ( ) ;
120+ } ) . start ( ) ;
121+ }
122+
123+ function onDocumentMouseDown ( event ) {
124+ event . preventDefault ( ) ;
125+ mouseX = ( ( event . clientX / w ) * 2 - 1 ) ;
126+ targetRotationY = mouseX ;
127+ mouseY = ( ( event . clientY / h ) * 2 - 1 ) ;
128+ targetRotationX = mouseY ;
129+ container . addEventListener ( 'mousemove' , onDocumentMouseMove , false ) ;
130+ container . addEventListener ( 'mouseup' , onDocumentMouseUp , false ) ;
131+ container . addEventListener ( 'mouseout' , onDocumentMouseOut , false ) ;
132+ }
133+
134+
135+ function onDocumentMouseMove ( event ) {
136+
137+ /*mouseX = event.clientX - w2;
138+ mouseY = event.clientY - h2;
139+
140+ targetRotationY = targetRotationOnMouseDownY + ( mouseX - mouseXOnMouseDown ) * 0.02;
141+ targetRotationX = targetRotationOnMouseDownX + ( mouseY - mouseYOnMouseDown ) * 0.02;*/
142+ //var target=
143+ //mouse_path.push(e.seenas.ray);
144+ mouseX = ( ( event . clientX / w ) * 2 - 1 ) ;
145+ targetRotationY = mouseX ;
146+ mouseY = ( ( event . clientY / h ) * 2 - 1 ) ;
147+ targetRotationX = mouseY ;
148+ }
149+
150+ function onDocumentMouseUp ( event ) {
151+ container . removeEventListener ( 'mousemove' , onDocumentMouseMove , false ) ;
152+ container . removeEventListener ( 'mouseup' , onDocumentMouseUp , false ) ;
153+ container . removeEventListener ( 'mouseout' , onDocumentMouseOut , false ) ;
154+ }
155+
156+
157+ function onDocumentMouseOut ( event ) {
158+
159+ container . removeEventListener ( 'mousemove' , onDocumentMouseMove , false ) ;
160+ container . removeEventListener ( 'mouseup' , onDocumentMouseUp , false ) ;
161+ container . removeEventListener ( 'mouseout' , onDocumentMouseOut , false ) ;
162+ }
163+ //
164+
165+ function animate ( ) {
166+
167+ requestAnimationFrame ( animate ) ;
168+
169+ camera . position . x = rad * Math . sin ( targetRotationY * multy ) * Math . cos ( targetRotationX * multx ) ;
170+ camera . position . y = rad * Math . sin ( targetRotationX * multx ) ;
171+ camera . position . z = rad * Math . cos ( targetRotationY * multy ) * Math . cos ( targetRotationX * multx ) ;
172+ camera . lookAt ( scene . position ) ;
173+ TWEEN . update ( ) ;
174+ renderer . render ( scene , camera ) ;
175+ }
176+ </ script >
177+ </ body > </ html >
0 commit comments