Website – 3D STL viewer – Thingiview (java)
Thingiview
Met de thingiview kan je SLT objecten in 3D laten weergeven in een webbrowser doormiddel van Java (Tree.js), zo kun e het model bekijken.
Ps. De webbroweser moet wel OpenGL ondersteunen!
Informatie (ENG)
A javascript (using Canvas and WebGL if available) 3D model viewer. Uses the Three.js 3D Engine. Check out the Examples.
Features:
- supports binary and ascii STL and OBJ files without requiring any preprocessing, all the parsing is done on the client in javascript
- everything is done client side in javascript, requires no plugins for most browsers
- should work in all browsers, including iPhone/iPad (might require Google Chrome Frame for IE)
- uses HTML canvas or automatically detects and enables webgl if browser supports it
- configurable colors
- is made of awesome
Usage:
It’s important that everything is done within window.onload.
thingiurlbase = "/javascripts";
Must be set to the path where the javascript files are located so that related scripts can be loaded dynamically.
thingiview = new Thingiview("id of viewer's container div");
Pass the id of the div to place the viewer into. You can set the width and height on the css for that div.
Loads the scene into the container div.
thingiview.loadSTL("/path/to/model.stl"); or thingiview.loadOBJ("/path/to/model.obj");
Make sure you pass the full url path to the model file you want to load. This will make an ajax call to the server to fetch it.
thingiview.setShowPlane(true);
true or false. Show or hide the 100×100 grid plane under the object.
thingiview.setBackgroundColor('#ffffff');
Sets the background color of the viewer’s container.
thingiview.setObjectMaterial('solid');
solid or wireframe. Changes the object’s material.
thingiview.setObjectColor('#C0D8F0');
Yep, it sets the object’s color.
true or false. This causes the object to slowly rotate around the z axis.
thingiview.setCameraView('top');
Possible values include: top, side, bottom, diagonal. Resets the camera view to the desired angle.
Pass a positive number to zoom the camera in or a negative number to zoom out.
thingiview.displayAlert("This is a message");
Displays the text passed in a window inside the viewer with an Ok button to then hide it.
Om het werkend te maken moest ik er wel veel aan verbouwen, je kan daarvoor mijn voorbeeld downloaden onderaan deze pagina, deze is makkelijk te begrijpen en aan te passen!
Dit is het script met de knoppen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!doctype html> <html lang="en" class="no-js"> <head> <title>Thingiview.js voorbeeld</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> <script type="text/javascript" src="javascripts/CFInstall.min.js"></script> <script type="text/javascript" src="javascripts/Three.js"></script> <script type="text/javascript" src="javascripts/plane.js"></script> <script type="text/javascript" src="javascripts/thingiview.js"></script> <script> window.onload = function() { // Deze lijnen laden in een "onload handler". CFInstall.check({ mode: "inline", // standaard node: "prompt" }); thingiurlbase = "javascripts"; thingiview = new Thingiview("viewer"); thingiview.initScene(); thingiview.setObjectColor('#C0D8F0'); thingiview.setBackgroundColor('#ffffff'); // wit thingiview.loadSTL("../stl_bestanden/megaman_helmet.stl"); //thingiview.loadPLY("../stl_bestanden/bestand.ply"); } </script> </head> <body> <div id="prompt"> <!-- Hieronder de tekst voor IE zonder GCF ondersteuning. --> </div> <p> <input onclick="thingiview.setCameraView('top');" type="button" value="Boven" /> <input onclick="thingiview.setCameraView('side');" type="button" value="Zijkant" /> <input onclick="thingiview.setCameraView('bottom');" type="button" value="Onderkant" /> <input onclick="thingiview.setCameraView('diagonal');" type="button" value="Diagonaal" /> <input onclick="thingiview.setCameraZoom(5);" type="button" value="Zoom +" /> <input onclick="thingiview.setCameraZoom(-5);" type="button" value="Zoom -" /> Rotatie: <input onclick="thingiview.setRotation(true);" type="button" value="aan" /> | <input onclick="thingiview.setRotation(false);" type="button" value="uit" /> </p> <div id="viewer" style="width:100%;height:600px"></div> <p> <input onclick="thingiview.setObjectMaterial('wireframe');" type="button" value="Wireframe" /> <input onclick="thingiview.setObjectMaterial('solid');" type="button" value="Dicht" /> </p> <p> Ondergrond: <a href="#" onclick="thingiview.setShowPlane(false)">Verbergen</a> | <a href="#" onclick="thingiview.setShowPlane(true)">Weergeven</a><br/> Achtergrond kleur: <a href="#" onclick="thingiview.setBackgroundColor('#606060')">Grijs</a> | <a href="#" onclick="thingiview.setBackgroundColor('#ffffff')">Wit</a> | <a href="#" onclick="thingiview.setBackgroundColor('#000000')">Zwart</a><br/> Object kleur: <a href="#" onclick="thingiview.setObjectColor('#ffffff')">Wit</a> | <a href="#" onclick="thingiview.setObjectColor('#aa0000')">rood</a> | <a href="#" onclick="thingiview.setObjectColor('#CDFECD')">Groen</a> | <a href="#" onclick="thingiview.setObjectColor('#C0D8F0')">Blauw</a><br/> </p> </body> </html> |
Dit is echt een plain script en laat alleen het object zien:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!doctype html> <html lang="en" class="no-js"> <head> <title>Thingiview.js voorbeeld</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> <script type="text/javascript" src="javascripts/CFInstall.min.js"></script> <script type="text/javascript" src="javascripts/Three.js"></script> <script type="text/javascript" src="javascripts/plane.js"></script> <script type="text/javascript" src="javascripts/thingiview.js"></script> <script> window.onload = function() { // Deze lijnen laden in een "onload handler". CFInstall.check({ mode: "inline", // standaard node: "prompt" }); thingiurlbase = "javascripts"; thingiview = new Thingiview("viewer"); thingiview.initScene(); thingiview.setBackgroundColor('#ffffff'); // Achtergrondkleur - Wit //thingiview.setBackgroundColor('#606060'); // Achtergrondkleur - Grijs //thingiview.setBackgroundColor('#000000'); // Achtergrondkleur - Zwart //thingiview.setObjectColor('#ffffff'); //Objectkleur - Wit //thingiview.setObjectColor('#aa0000'); //Objectkleur - Rood //thingiview.setObjectColor('#CDFECD'); //Objectkleur - Groen thingiview.setObjectColor('#C0D8F0'); //Objectkleur - Blauw //thingiview.setCameraView('side'); // Zijkant (werkt niet?) //thingiview.setCameraView('top'); // Bovenkant //thingiview.setCameraView('bottom'); // Onderkant //thingiview.setRotation(false); // Rotatie UIT (werkt niet?) //thingiview.setObjectMaterial('wireframe'); // Laat model zien als wireframe //thingiview.setShowPlane(false); // Ondergrond uit (werkt niet?) thingiview.loadSTL("../stl_bestanden/megaman_helmet.stl"); //thingiview.loadPLY("../stl_bestanden/bestand.ply"); } </script> </head> <body> <div id="viewer" style="width:100%;height:600px"></div> </body> </html> |
Het resultaat:
[#/software/thingiview” ]