github.com/EngineerKamesh/gofullstack@v0.0.0-20180609171605-d41341d7d4ee/volume3/section2/3dgopher/static/3dgopherfinal.html (about) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>3D Gopher</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: #ffffff; 11 margin: 0px; 12 overflow: hidden; 13 } 14 15 #info { 16 color: #fff; 17 position: absolute; 18 top: 10px; 19 width: 100%; 20 text-align: center; 21 z-index: 100; 22 display:block; 23 24 } 25 26 a { color: skyblue } 27 .button { background:#999; color:#eee; padding:0.2em 0.5em; cursor:pointer } 28 .highlight { background:orange; color:#fff; } 29 30 span { 31 display: inline-block; 32 width: 60px; 33 float: left; 34 text-align: center; 35 } 36 37 canvas { 38 background-color: transparent; 39 } 40 41 </style> 42 </head> 43 <body> 44 <script src="/js/three.js"></script> 45 <script src="/js/OBJLoader.js"></script> 46 <script> 47 48 49 function resizeCanvasToDisplaySize(canvas) { 50 const width = canvas.clientWidth; 51 const height = canvas.clientHeight; 52 if (canvas.width !== width || canvas.height !== height) { 53 canvas.width = width; 54 canvas.height = height; 55 } 56 } 57 58 function panCamera(camera, cameraTarget) { 59 var timer = Date.now() * 0.0005; 60 camera.position.x = Math.cos(timer) * 2.7 * -1; 61 camera.position.z = Math.sin(timer) * 2.7; 62 camera.lookAt( cameraTarget ); 63 } 64 65 </script> 66 67 <script src="/js/3dgopherfinal.js"></script> 68 69 </body> 70 </html> 71