Commit a4721e84f946db38fd36dbf534108bf1a36f953b
- Diff rendering mode:
- inline
- side by side
index.html
(33 / 3)
| 27 | 27 | <div id="container" style="position:relative;margin:0 auto;padding:0;z-index:0;cursor:pointer;"></div> | |
| 28 | 28 | <script> | |
| 29 | 29 | var container; | |
| 30 | var camera, scene, renderer, projector; | ||
| 30 | var camera, scene, renderer, projector, clock; | ||
| 31 | 31 | ||
| 32 | 32 | var targetRotationY = 0; | |
| 33 | 33 | var targetRotationOnMouseDownY = 0; | |
| … | … | ||
| 59 | 59 | var max_pages; | |
| 60 | 60 | var fetched = 0; | |
| 61 | 61 | ||
| 62 | var controls; | ||
| 63 | |||
| 62 | 64 | $.getJSON('books.json', function(books) { | |
| 63 | 65 | console.log(books); | |
| 64 | 66 | test_book = books[0]; | |
| … | … | ||
| 81 | 81 | container.style.height=h+"px"; | |
| 82 | 82 | container.style.marginTop=0.5*(window.innerHeight-h)+'px'; | |
| 83 | 83 | ||
| 84 | clock = new THREE.Clock(); | ||
| 84 | 85 | scene = new THREE.Scene(); | |
| 85 | 86 | ||
| 86 | camera = new THREE.PerspectiveCamera( 50, w / h, 1, 1000 ); | ||
| 87 | camera = new THREE.PerspectiveCamera( 50, w / h, 0.1, 10000 ); | ||
| 88 | |||
| 87 | 89 | camera.position.z = rad; | |
| 88 | 90 | scene.add( camera ); | |
| 89 | 91 | projector = new THREE.Projector(); | |
| … | … | ||
| 156 | 156 | container.addEventListener( 'mousemove', onDocumentMouseMove, false ); | |
| 157 | 157 | container.addEventListener( 'mouseup', onDocumentMouseUp, false ); | |
| 158 | 158 | container.addEventListener( 'mouseout', onDocumentMouseOut, false ); | |
| 159 | window.addEventListener( 'keydown', onKeyDown, false ); | ||
| 160 | window.addEventListener( 'keyup', onKeyUp, false ); | ||
| 159 | 161 | } | |
| 160 | 162 | ||
| 161 | |||
| 163 | function onKeyDown(event) { | ||
| 164 | var key = event.keyCode; | ||
| 165 | var scale = book.centerContainer.scale; | ||
| 166 | if(key == 87 || key == 38) { | ||
| 167 | book.centerContainer.scale.set(scale.x+=0.1, scale.y +=0.1, scale.z += 0.1); | ||
| 168 | //book.centerContainer.translateZ(10); | ||
| 169 | } | ||
| 170 | else if(key == 83 || key == 40) { | ||
| 171 | book.centerContainer.scale.set(scale.x-=0.1, scale.y -=0.1, scale.z -= 0.1); | ||
| 172 | //book.centerContainer.translateZ(-10); | ||
| 173 | } | ||
| 174 | /*else if(key == 65) { | ||
| 175 | //book.centerContainer.position.x += 1; | ||
| 176 | book.centerContainer.translateX(-10); | ||
| 177 | } | ||
| 178 | else if(key == 68) { | ||
| 179 | book.centerContainer.translateX(10); | ||
| 180 | }*/ | ||
| 181 | //book.centerContainer.position.z += 1; | ||
| 182 | } | ||
| 183 | |||
| 184 | function onKeyUp(event) { | ||
| 185 | } | ||
| 186 | |||
| 162 | 187 | function onDocumentMouseMove( event ) { | |
| 163 | 188 | ||
| 164 | 189 | /*mouseX = event.clientX - w2; | |
| … | … | ||
| 235 | 235 | camera.position.x = rad * Math.sin( targetRotationY*multy ) * Math.cos( targetRotationX*multx ); | |
| 236 | 236 | camera.position.y = rad * Math.sin( targetRotationX*multx ); | |
| 237 | 237 | camera.position.z = rad * Math.cos( targetRotationY*multy ) * Math.cos( targetRotationX*multx ); | |
| 238 | //controls.update(clock.getDelta()); | ||
| 238 | 239 | camera.lookAt(scene.position); | |
| 239 | 240 | render2(); | |
| 240 | 241 | } |
