API tools faq
paste
Shriyansh_Agrawal

Untitled

Shriyansh_Agrawal
Mar 29th, 2016
38
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.10 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js canvas - combo camera - orthographic + perspective</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. font-family: Monospace;
  10. background-color: #f0f0f0;
  11. margin: 0px;
  12. overflow: hidden;
  13. color: purple;
  14. }
  15.  
  16. a {
  17. color: red;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22.  
  23. <script src="js/three.min.js"></script>
  24.  
  25. <script src="js/CombinedCamera.js"></script>
  26.  
  27. <script src="js/Projector.js"></script>
  28. <script src="js/CanvasRenderer.js"></script>
  29.  
  30. <script src="js/stats.min.js"></script>
  31.  
  32. <div style="position: absolute; top: 10px; width: 100%; text-align: center; ">
  33. <a href="http://threejs.org" target="_blank">three.js</a> - Combo Camera<br>
  34. View: <a href="#" onclick="setOrthographic();return false;"> Orthographic</a> |
  35. <a href="#" onclick="setPerspective();return false;">Perspective</a><br>
  36. Lens: <a href="#" onclick="setLens(12);return false;">12mm</a> |
  37. <a href="#" onclick="setLens(16);return false;">16mm</a> |
  38. <a href="#" onclick="setLens(24);return false;">24mm</a> |
  39. <a href="#" onclick="setLens(35);return false;">35mm</a> |
  40. <a href="#" onclick="setLens(50);return false;">50mm</a> |
  41. <a href="#" onclick="setLens(60);return false;">60mm</a> |
  42. <a href="#" onclick="setLens(85);return false;">85mm</a> |
  43. <a href="#" onclick="setLens(105);return false;">105mm</a><br>
  44. Fov: <a href="#" onclick="setFov(30);return false;">30°</a> |
  45. <a href="#" onclick="setFov(50);return false;">50°</a> |
  46. <a href="#" onclick="setFov(70);return false;">70°</a> |
  47. <a href="#" onclick="setFov(100);return false;">100°</a><br>
  48. Zoom: <a href="#" onclick="camera.setZoom(0.5);return false;">0.5x</a> |
  49. <a href="#" onclick="camera.setZoom(1);return false;">1x</a> |
  50. <a href="#" onclick="camera.setZoom(2);return false;">2x</a> |
  51.  
  52. <br/>
  53. Views: <a href="#" onclick="camera.toTopView();lookAtScene=false;return false;">Top view</a> |
  54. <a href="#" onclick="camera.toBottomView();lookAtScene=false;return false;">Bottom view</a> |
  55. <a href="#" onclick="camera.toLeftView();lookAtScene=false;return false;">Left view</a> |
  56. <a href="#" onclick="camera.toRightView();lookAtScene=false;return false;">Right view</a> |
  57. <a href="#" onclick="camera.toFrontView();lookAtScene=false;return false;">Front view</a> |
  58. <a href="#" onclick="camera.toBackView();lookAtScene=false;return false;">Back view</a> |
  59. <a href="#" onclick="lookAtScene=true;return false;">Look at Scene</a>
  60. <br/>
  61. <div id="fov"></div>
  62. </div>
  63.  
  64.  
  65.  
  66. <script>
  67.  
  68. var container, stats;
  69. var camera, scene, renderer;
  70. var lookAtScene = true;
  71. var striker;
  72. var whiteGoti = [];
  73. var blackGoti = [];
  74. var listofkhambe = [];
  75. var queen, arrow, count=0, arrowangle = 90, power=0, start_time;
  76. init();
  77. animate();
  78. function setFov( fov ) {
  79.  
  80. camera.setFov( fov );
  81.  
  82. document.getElementById('fov').innerHTML = 'FOV '+ fov.toFixed(2) +'&deg;' ;
  83.  
  84. }
  85.  
  86. function setLens( lens ) {
  87.  
  88. // try adding a tween effect while changing focal length, and it'd be even cooler!
  89.  
  90. var fov = camera.setLens( lens );
  91.  
  92. document.getElementById('fov').innerHTML = 'Converted ' + lens + 'mm lens to FOV '+ fov.toFixed(2) +'&deg;' ;
  93.  
  94. }
  95.  
  96. function setOrthographic() {
  97.  
  98. camera.toOrthographic();
  99.  
  100. document.getElementById('fov').innerHTML = 'Orthographic mode' ;
  101.  
  102. }
  103.  
  104. function setPerspective() {
  105.  
  106. camera.toPerspective();
  107.  
  108. document.getElementById('fov').innerHTML = 'Perspective mode' ;
  109.  
  110. }
  111.  
  112. function checkKey(e) {
  113.  
  114. e = e || window.event;
  115.  
  116. if (e.keyCode == '38') {
  117. if (count==2)
  118. {
  119. power += 1000;
  120. }
  121. }
  122. else if (e.keyCode == '40') {
  123. if (count==2)
  124. {
  125. power -= 1000;
  126. }
  127. }
  128. else if (e.keyCode == '37') {
  129. if (striker.position.x > -225 && count==0){
  130. striker.position.x -= 50;
  131. }
  132. if ( count == 1 )
  133. {
  134. arrowangle += 5;
  135. updatearrow();
  136. }
  137. }
  138. else if (e.keyCode == '39' ) {
  139. if (striker.position.x < 275 && count==0){
  140. striker.position.x += 50;
  141. }
  142. if ( count == 1 )
  143. {
  144. arrowangle -= 5;
  145. updatearrow();
  146. }
  147. }
  148. else if (e.keyCode == '13') {
  149. if (count == 0 ){
  150. arrow = createArrow();
  151. scene.add(arrow);
  152. }
  153. count += 1;
  154. if (count == 3)
  155. {
  156. scene.remove(arrow);
  157. }
  158. }
  159. }
  160. function createCylinder(posx, posy, posz, ccolor) {
  161. var geometry = new THREE.CylinderGeometry( 15, 15, 20, 32 );
  162. var material = new THREE.MeshBasicMaterial( { color: ccolor, overdraw: 0.5 } );
  163. var obj = new THREE.Mesh( geometry, material );
  164.  
  165. obj.scale.y = Math.floor( 0.3 );
  166. obj.position.x = posx;
  167. obj.position.y = posy;
  168. obj.position.z = posz;
  169. return obj;
  170.  
  171. }
  172. function createArrow() {
  173.  
  174. var sourcePos = new THREE.Vector3(striker.position.x, striker.position.y, striker.position.z);
  175. var targetPos = new THREE.Vector3(striker.position.x + 100*Math.cos(arrowangle*(Math.PI/180)), 0, striker.position.z - 100*Math.sin(arrowangle*(Math.PI/180)));
  176. var direction = new THREE.Vector3().sub(targetPos, sourcePos);
  177. var arrowtemp = new THREE.ArrowHelper(direction.clone().normalize(), sourcePos, 100, 0x000000);
  178. return arrowtemp;
  179. }
  180.  
  181. function updatearrow(){
  182. var newSourcePos = new THREE.Vector3(striker.position.x, striker.position.y, striker.position.z);
  183.  
  184. var newtargetPos = new THREE.Vector3(striker.position.x + 100*Math.cos(arrowangle*(Math.PI/180)), 0, striker.position.z - 100*Math.sin(arrowangle*(Math.PI/180)));
  185.  
  186. var direction = new THREE.Vector3().sub(newtargetPos, newSourcePos);
  187. arrow.setDirection(direction.normalize());
  188. }
  189. function movestriker(){
  190. if (count == 3 )
  191. {
  192. var d = new Date();
  193. var time_elapsed = d.getTime() - start_time;
  194. striker.position.x += power*Math.cos(arrowangle*(Math.PI/180))*(time_elapsed/1000);
  195. striker.position.y += 0;
  196. striker.position.z -= power*Math.sin(arrowangle*(Math.PI/180))*(time_elapsed/1000);
  197. power = power/1.02;
  198. }
  199. }
  200. function checkcollisionwithwalls(){
  201. if (striker.position.x <= -435 || striker.position.x >= 435 )
  202. {
  203. arrowangle += 180 - 2*arrowangle;
  204. }
  205.  
  206. if (striker.position.z <= -435 || striker.position.z >= 435)
  207. {
  208. arrowangle += -2*arrowangle ;
  209. }
  210. }
  211. function checkcollisionwithcoins(obj)
  212. {
  213. for (i = 0 ; i < 4; i++ ){
  214. var distance = Math.sqrt((whiteGoti[i].position.z-obj.position.z)*(whiteGoti[i].position.z-obj.position.z) + (whiteGoti[i].position.x-obj.position.x)*(whiteGoti[i].position.x-obj.position.x));
  215. if (Math.round(distance) == 30 || Math.round(distance) == 31 || Math.round(distance) == 29)
  216. {
  217. alert("Cool!");
  218. }
  219. }
  220. }
  221. function init() {
  222.  
  223. container = document.createElement( 'div' );
  224. document.body.appendChild( container );
  225.  
  226. camera = new THREE.CombinedCamera( window.innerWidth / 2, window.innerHeight / 2, 70, 1, 1000, - 500, 1000 );
  227.  
  228. camera.position.x = 200;
  229. camera.position.y = 100;
  230. camera.position.z = 200;
  231.  
  232. scene = new THREE.Scene();
  233.  
  234. // Grid
  235.  
  236. var size = 500, step = 50;
  237.  
  238. var geometry = new THREE.Geometry();
  239.  
  240. for ( var i = - size; i <= size; i += step ) {
  241.  
  242. geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );
  243. geometry.vertices.push( new THREE.Vector3( size, 0, i ) );
  244.  
  245. geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );
  246. geometry.vertices.push( new THREE.Vector3( i, 0, size ) );
  247.  
  248. }
  249.  
  250. var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } );
  251.  
  252. var line = new THREE.LineSegments( geometry, material );
  253. scene.add( line );
  254.  
  255. // Cubes
  256.  
  257. var geometry = new THREE.BoxGeometry( 50, 50, 50 );
  258. var material = new THREE.MeshBasicMaterial( { color: 0xb35900, overdraw: 0.5 } );
  259. // Drawing the borders
  260. var cornerx = -500;
  261. var cornerz = -500;
  262. for ( var i = 0; i < 80; i ++ ) {
  263.  
  264. var cube = new THREE.Mesh( geometry, material );
  265.  
  266. cube.scale.y = Math.floor( 1 );
  267.  
  268. cube.position.x = cornerx + 25;
  269. cube.position.y = ( cube.scale.y * 50 ) / 2;
  270. cube.position.z = cornerz + 25;
  271.  
  272. scene.add(cube);
  273. if (cornerx == -500 && cornerz > -500){
  274. cornerz -= 50;
  275. }
  276.  
  277. if (cornerz == 500 && cornerx > -500){
  278. cornerx -= 50;
  279. }
  280.  
  281. if (cornerx == 500 && cornerz < 500){
  282. cornerz += 50;
  283. }
  284.  
  285. if (cornerz == -500 && cornerx < 500){
  286. cornerx += 50;
  287. }
  288. }
  289. //Body Start
  290. var cornerx = -450;
  291. var cornerz = -450;
  292. var material = new THREE.MeshBasicMaterial( { color: 0xffb366, overdraw: 0.5 } );
  293. while ( cornerz <= 450 ) {
  294.  
  295. var cube = new THREE.Mesh( geometry, material );
  296.  
  297. cube.scale.y = Math.floor( 0.2 );
  298.  
  299. cube.position.x = cornerx + 25;
  300. cube.position.y = ( cube.scale.y * 50 ) / 2;
  301. cube.position.z = cornerz + 25;
  302. if(!(( cornerx==-450 && cornerz==-450) || ( cornerx==450 && cornerz==-450) || ( cornerx==-450 && cornerz==450) || ( cornerx==450 && cornerz==450)))
  303. {
  304. scene.add(cube);
  305. }
  306. if (cornerx == 450){
  307. cornerz += 50;
  308. cornerx = -450;
  309. }
  310. else {
  311. cornerx += 50;
  312. }
  313.  
  314. }
  315. //Body End
  316. var geometry = new THREE.CylinderGeometry( 25, 25, 20, 32 );
  317.  
  318. listofkhambe.push(createCylinder(-275, 0, -275, 0xb32d00));
  319. listofkhambe.push(createCylinder(325, 0, 325, 0xb32d00));
  320. listofkhambe.push(createCylinder(-275, 0, 325, 0xb32d00));
  321. listofkhambe.push(createCylinder(325, 0, -275, 0xb32d00));
  322. scene.add(listofkhambe[0]);
  323. scene.add(listofkhambe[1]);
  324. scene.add(listofkhambe[2]);
  325. scene.add(listofkhambe[3]);
  326. queen = createCylinder(25, 0, 25, 0xff0000)
  327. scene.add(queen);
  328. blackGoti.push(createCylinder(75, 0, 25, 0x000000));
  329. blackGoti.push(createCylinder(25, 0, -25, 0x000000));
  330. blackGoti.push(createCylinder(-25, 0, 25, 0x000000));
  331. blackGoti.push(createCylinder(25, 0, 75, 0x000000));
  332. scene.add(blackGoti[0]);
  333. scene.add(blackGoti[1]);
  334. scene.add(blackGoti[2]);
  335. scene.add(blackGoti[3]);
  336. whiteGoti.push(createCylinder(25 + 50*Math.cos(Math.PI/4), 0, 25 + 50*Math.sin(Math.PI/4), 0xffffff));
  337. whiteGoti.push(createCylinder(25 + 50*Math.cos(3*Math.PI/4), 0, 25 + 50*Math.sin(3*Math.PI/4), 0xffffff));
  338. whiteGoti.push(createCylinder(25 + 50*Math.cos(5*Math.PI/4), 0, 25 + 50*Math.sin(5*Math.PI/4), 0xffffff));
  339. whiteGoti.push(createCylinder(25 + 50*Math.cos(7*Math.PI/4), 0, 25 + 50*Math.sin(7*Math.PI/4), 0xffffff));
  340. scene.add(whiteGoti[0]);
  341. scene.add(whiteGoti[1]);
  342. scene.add(whiteGoti[2]);
  343. scene.add(whiteGoti[3]);
  344. striker = createCylinder(75, 0, 325, 0x5900b3);
  345. scene.add(striker);
  346.  
  347. var geometry = new THREE.Geometry();
  348. geometry.vertices.push( new THREE.Vector3( -300, 0.4, 350 ) );
  349. geometry.vertices.push( new THREE.Vector3( 350, 0.4, 350 ) );
  350. geometry.vertices.push( new THREE.Vector3( 350, 0.4, -300 ) );
  351. geometry.vertices.push( new THREE.Vector3( -300, 0.4, -300 ) );
  352. geometry.vertices.push( new THREE.Vector3( 350, 0.4, 350 ) );
  353. geometry.vertices.push( new THREE.Vector3( 350, 0.4, -300 ) );
  354. geometry.vertices.push( new THREE.Vector3( -300, 0.4, 350 ) );
  355. geometry.vertices.push( new THREE.Vector3( -300, 0.4, -300 ) );
  356. var material = new THREE.LineBasicMaterial( { color: 0xb32d00 } );
  357. var line = new THREE.LineSegments( geometry, material );
  358. scene.add( line );
  359.  
  360.  
  361.  
  362.  
  363. renderer = new THREE.CanvasRenderer();
  364. renderer.setClearColor( 0xf0f0f0 );
  365. renderer.setPixelRatio( window.devicePixelRatio );
  366. renderer.setSize( window.innerWidth, window.innerHeight );
  367. container.appendChild( renderer.domElement );
  368.  
  369. stats = new Stats();
  370. stats.domElement.style.position = 'absolute';
  371. stats.domElement.style.top = '0px';
  372. container.appendChild( stats.domElement );
  373.  
  374. window.addEventListener( 'resize', onWindowResize, false );
  375.  
  376. function onWindowResize(){
  377.  
  378. camera.setSize( window.innerWidth, window.innerHeight );
  379. camera.updateProjectionMatrix();
  380.  
  381. renderer.setSize( window.innerWidth, window.innerHeight );
  382.  
  383. }
  384.  
  385. }
  386.  
  387. //
  388.  
  389. function animate() {
  390.  
  391. requestAnimationFrame( animate );
  392.  
  393. stats.begin();
  394. render();
  395. stats.end();
  396.  
  397. }
  398.  
  399. function render() {
  400.  
  401. var timer = Date.now() * 0.0001;
  402. document.onkeydown = checkKey
  403. movestriker();
  404. checkcollisionwithwalls();
  405. checkcollisionwithcoins(striker);
  406. camera.position.x = Math.cos( timer ) * 200;
  407. camera.position.z = Math.sin( timer ) * 200;
  408. if ( lookAtScene ) camera.lookAt( scene.position );
  409. renderer.render( scene, camera );
  410. var d = new Date();
  411. start_time = d.getTime();
  412.  
  413. }
  414.  
  415. </script>
  416.  
  417. </body>
  418. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!