Mercurial > hg-public > scubatools / file comparison
comparison: stlviewer.html
stlviewer.html
- changeset 13
- 39fb313ba27c
- parent 12
- b3cf0176512e
- child 14
- ba3d8c56e6f5
equal
deleted
inserted
replaced
| 12:b3cf0176512e | 13:39fb313ba27c |
|---|---|
| 18 </head> | 18 </head> |
| 19 <body> | 19 <body> |
| 20 <div id="info"> | 20 <div id="info"> |
| 21 <div class="listcontainer"> | 21 <div class="listcontainer"> |
| 22 <h2>Available:</h2> | 22 <h2>Available:</h2> |
| 23 move to selected | |
| 23 <ul id="sortable1"> | 24 <ul id="sortable1"> |
| 24 <!-- PLACEHOLDER CYLINDERS --> | 25 <!-- PLACEHOLDER CYLINDERS --> |
| 25 </ul> | 26 </ul> |
| 26 </div> | 27 </div> |
| 27 <div class="listcontainer"> | 28 <div class="listcontainer"> |
| 28 <h2>Selected:</h2> | 29 <h2>Selected:</h2> |
| 30 <a href="#" id="clearselected">clear list</a> | |
| 29 <ul id="sortable2"> | 31 <ul id="sortable2"> |
| 30 | 32 |
| 31 </ul> | 33 </ul> |
| 32 </div> | 34 </div> |
| 33 | 35 |
| 38 Left mouse: rotate camera, right mouse: move camera, middle mouse or wheel: zoom | 40 Left mouse: rotate camera, right mouse: move camera, middle mouse or wheel: zoom |
| 39 | 41 |
| 40 | 42 |
| 41 </div> | 43 </div> |
| 42 | 44 |
| 45 <div id="rendercontainer"></div> | |
| 46 | |
| 43 <script src="stlviewer.js"></script> | 47 <script src="stlviewer.js"></script> |
| 44 | 48 |
| 45 <script> | 49 <script> |
| 46 if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); | 50 if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); |
| 47 var container; | 51 var container; |
| 52 var controls; | |
| 48 var camera, cameraTarget, scene, renderer; | 53 var camera, cameraTarget, scene, renderer; |
| 49 var m_spacer = new THREE.MeshPhongMaterial( { | 54 var m_spacer = new THREE.MeshPhongMaterial( { |
| 50 color: 0x736f6e, specular: 0x111111, shininess: 100 } ); | 55 color: 0x736f6e, specular: 0x111111, shininess: 100 } ); |
| 51 | 56 |
| 52 /* | |
| 53 var mapHeight = new THREE.TextureLoader().load( "img/rust1.jpg" ); | |
| 54 mapHeight.anisotropy = 4; | |
| 55 mapHeight.repeat.set( 0.998, 0.998 ); | |
| 56 mapHeight.offset.set( 0.001, 0.001 ); | |
| 57 mapHeight.wrapS = mapHeight.wrapT = THREE.RepeatWrapping; | |
| 58 mapHeight.format = THREE.RGBFormat; | |
| 59 var m_cylinder = new THREE.MeshPhongMaterial( { | |
| 60 color: 0x4682b4, | |
| 61 specular: 0x222222, | |
| 62 shininess: 25, | |
| 63 bumpMap: mapHeight, | |
| 64 bumpScale: 12 | |
| 65 } ); | |
| 66 */ | |
| 67 var m_cylinder = new THREE.MeshPhongMaterial( { | 57 var m_cylinder = new THREE.MeshPhongMaterial( { |
| 68 color: 0x4682b4, specular: 0x111111, shininess: 200 } ); | 58 color: 0x4682b4, specular: 0x111111, shininess: 200 } ); |
| 59 | |
| 69 init(); | 60 init(); |
| 70 animate(); | 61 animate(); |
| 71 | 62 |
| 72 </script><div><canvas style="width: 1589px; height: 711px;" height="711" width="1589"></canvas><div style="position: fixed; top: 0px; left: 0px; cursor: pointer; opacity: 0.9; z-index: 10000;"><canvas style="width: 80px; height: 48px; display: block;" height="48" width="80"></canvas><canvas style="width: 80px; height: 48px; display: none;" height="48" width="80"></canvas></div></div> | 63 </script><div><canvas style="width: 1589px; height: 711px;" height="711" width="1589"></canvas><div style="position: fixed; top: 0px; left: 0px; cursor: pointer; opacity: 0.9; z-index: 10000;"><canvas style="width: 80px; height: 48px; display: block;" height="48" width="80"></canvas><canvas style="width: 80px; height: 48px; display: none;" height="48" width="80"></canvas></div></div> |
| 73 | 64 |
