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

mercurial