{"id":1721,"date":"2015-01-03T15:33:31","date_gmt":"2015-01-03T15:33:31","guid":{"rendered":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1721"},"modified":"2015-01-03T17:17:10","modified_gmt":"2015-01-03T17:17:10","slug":"loading-a-3d-model-using-three-js","status":"publish","type":"post","link":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/loading-a-3d-model-using-three-js\/","title":{"rendered":"Loading a 3D Model using Three.js"},"content":{"rendered":"\n<!-- Facebook Like Button v1.9.6 BEGIN [http:\/\/blog.bottomlessinc.com] -->\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=http%3A%2F%2Finspiredtoeducate.net%2Finspiredtoeducate%2Floading-a-3d-model-using-three-js%2F&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:450px; height: 30px; align: left; margin: 2px 0px 2px 0px\"><\/iframe>\n<!-- Facebook Like Button END -->\n<p><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2015\/01\/threejs.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-1722\" src=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2015\/01\/threejs.png\" alt=\"three js\" width=\"621\" height=\"481\" srcset=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2015\/01\/threejs.png 621w, http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2015\/01\/threejs-300x232.png 300w\" sizes=\"(max-width: 621px) 100vw, 621px\" \/><\/a><\/p>\n<p>If you\u2019re looking for a way to program 3D experiences for Google Chrome and other modern web browsers, make sure to <a href=\"http:\/\/threejs.org\/\" target=\"_blank\">check out three.js<\/a> .\u00a0\u00a0\u00a0 For many professional programmers, JavaScript has become an essential language to making web applications.\u00a0\u00a0 It still amazes me that we can use JavaScript to create 3D experiences, games, or visualizations. \u00a0 If you&#8217;re interested in learning JavaScript, check out <a href=\"http:\/\/www.codecademy.com\/\" target=\"_blank\">CodeAcademy.com<\/a> .<\/p>\n<p>My wife, biology professor, asked me if there would be an easy way to share 3D models of cell structures for her classes. \u00a0 We want to explore 3D printed objects\u00a0too. \u00a0I, however, started to wonder if we could share the 3D model using a custom web page. \u00a0While glancing through the <a href=\"http:\/\/threejs.org\/examples\/\" target=\"_blank\">three.js examples<\/a>, I noticed that the library includes an STL model loader and \u00a0an example for first person exploration. \u00a0An STL file is a standard file format for saving 3D structure. \u00a0 You can create STL files using software like <a title=\"3 Tutorials on 3D Modelling with TinkerCAD.COM\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1557\" target=\"_blank\">TinkerCAD.com<\/a>\u00a0, <a title=\"Make 3D Printable Models with JavaScript\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1636\" target=\"_blank\">openjscad<\/a>,\u00a0 or <a href=\"http:\/\/www.123dapp.com\/design\" target=\"_blank\">123D design<\/a>. \u00a0 You can also find STL content at <a href=\"http:\/\/thingiverse.com\" target=\"_blank\">thingiverse.com<\/a> .<\/p>\n<p>You can inspect these examples here:<\/p>\n<p><a href=\"http:\/\/threejs.org\/examples\/#misc_controls_pointerlock\">http:\/\/threejs.org\/examples\/#misc_controls_pointerlock<\/a><\/p>\n<p><a href=\"http:\/\/threejs.org\/examples\/#webgl_loader_stl\">http:\/\/threejs.org\/examples\/#webgl_loader_stl<\/a><\/p>\n<p>In a few hours, I was able to combine the \u201cpointer lock\u201d control and the STL loader program into a single experience. \u00a0 In this experience, I loaded the &#8220;Winter fall&#8221; castle. \u00a0 This model can be found at\u00a0<a href=\"http:\/\/www.thingiverse.com\/thing:84866\" target=\"_blank\">http:\/\/www.thingiverse.com\/thing:84866<\/a> .<\/p>\n<p><a href=\"http:\/\/inspiredtoeducate.net\/blogPostDemos\/threejsdemo1.html\">http:\/\/inspiredtoeducate.net\/blogPostDemos\/threejsdemo1.html<\/a><\/p>\n<p>Here&#8217;s the code for loading a\u00a0binary STL.<\/p>\n<p><code><br \/>\nvar material = new THREE.MeshPhongMaterial( { color: 0x00AAFF, shininess: 30, specular: 0x111111  } );<\/p>\n<p>var loader = new THREE.STLLoader();<br \/>\nloader.addEventListener( 'load', function ( event ) {<\/p>\n<p>\tvar geometry = event.content;<br \/>\n\tgeometry.computeTangents();<br \/>\n\tvar mesh = new THREE.Mesh( geometry, material );<\/p>\n<p>\tmesh.position.set( 0, -10, 0 );<br \/>\n\tmesh.rotation.set( - Math.PI \/ 2, 0, 0 );<br \/>\n\tmesh.scale.set( 15, 15, 15 );<\/p>\n<p>\tmesh.castShadow = true;<br \/>\n\tmesh.receiveShadow = true;<\/p>\n<p>\tobjects.push(mesh);<br \/>\n\tscene.add( mesh );<\/p>\n<p>} );<\/p>\n<p>loader.load( '.\/models\/winterfell.stl' );<br \/>\n<\/code><\/p>\n<p>The following line describes the material properties of the STL and color.<\/p>\n<p>var material = new THREE.MeshPhongMaterial( { color: 0x00AAFF, shininess: 30, specular: 0x111111\u00a0 } );<\/p>\n<p>In the next few lines, we define an event handler to load the STL content into memory.\u00a0 \u00a0The geometry data of the STL is combined with the material to create a mesh object.\u00a0\u00a0\u00a0 You can set the position of the mesh, rotation, and scale factors.\u00a0 \u00a0In the final two statements, the mesh is added to an \u201cobjects\u201d collection and the scene.\u00a0\u00a0 By adding the mesh to the \u201cobjects\u201d collection, the player will be able to stand on objects defined in your STL file.\u00a0 If there\u2019s a chair\u00a0defined in your scene, the player will be able to stand on top of that chair.<\/p>\n<p>The following line executes the loader for the STL you specified.<\/p>\n<p>loader.load( &#8216;.\/models\/winterfell.stl&#8217; );<\/p>\n<p>If the STL has too much complexity, the STL loader seems to break down. \u00a0I would encourage you to tinker with it to see if it works for you. \u00a0 I was impressed with the number of STL files I was able to load.<\/p>\n<p>Make sure to check out the other <a href=\"http:\/\/threejs.org\/examples\/\" target=\"_blank\">great examples\u00a0on the three.js website<\/a>.<\/p>\n<p>Here\u2019s a few links to help you get started with three.js .<\/p>\n<ul>\n<li><a href=\"http:\/\/threejs.org\/docs\/index.html#Manual\/Introduction\/Creating_a_scene\">http:\/\/threejs.org\/docs\/index.html#Manual\/Introduction\/Creating_a_scene<\/a><\/li>\n<li><a href=\"http:\/\/www.johannes-raida.de\/tutorials.htm\">http:\/\/www.johannes-raida.de\/tutorials.htm<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><strong>Top Stories on InspiredToEducate.NET<\/strong><\/p>\n<p><strong>Learning To Code<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1319\">Easy Data Visualization with Google Charts and JavaScript<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=795\">Learn to Build Your Own Conversational Bot using ChatScript<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1285\">10 Free Resources for Learning JavaScript and HTML5<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1238\">17 Fun Tools To Teach Kids To Code by @ChrisBetcher<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=623\">Benefits of Teaching Kids To Code That No One Is Talking About<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1349\">Easy Recipes for Building Android Apps using MIT App Inventor<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=738\">12 Steps To 3D Print Your Minecraft Creations<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=849\">How to Build Your Mobile App using HTML<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1079\" target=\"_blank\">Simple Minecraft Programming Using ScriptCraftJS<\/a><\/li>\n<\/ul>\n<p><strong>Science Education<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1093\">Why hate science?<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=374\">7 ideas for creating a student centered learning environment by Paul Andersen<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1022\">Using candy to teach DNA structure<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><strong>Join the\u00a0<a href=\"https:\/\/www.facebook.com\/groups\/1529734900588516\/\" target=\"_blank\">Spark Macon Maker Space Community on Facebook<\/a><\/strong><\/p>\n\n<!-- Facebook Like Button v1.9.6 BEGIN [http:\/\/blog.bottomlessinc.com] -->\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=http%3A%2F%2Finspiredtoeducate.net%2Finspiredtoeducate%2Floading-a-3d-model-using-three-js%2F&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:450px; height: 30px; align: left; margin: 2px 0px 2px 0px\"><\/iframe>\n<!-- Facebook Like Button END -->\n","protected":false},"excerpt":{"rendered":"<p>If you\u2019re looking for a way to program 3D experiences for Google Chrome and other modern web browsers, make sure to check out three.js .\u00a0\u00a0\u00a0 For many professional programmers, JavaScript has become an essential language to making web applications.\u00a0\u00a0 It still amazes me that we can use JavaScript to create [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,16,23,8],"tags":[],"_links":{"self":[{"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/1721"}],"collection":[{"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/comments?post=1721"}],"version-history":[{"count":3,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/1721\/revisions"}],"predecessor-version":[{"id":1726,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/1721\/revisions\/1726"}],"wp:attachment":[{"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/media?parent=1721"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/categories?post=1721"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/tags?post=1721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}