If you’re looking for a way to program 3D experiences for Google Chrome and other modern web browsers, make sure to check out three.js . For many professional programmers, JavaScript has become an essential language to making web applications. It still amazes me that we can use JavaScript to create 3D experiences, games, or visualizations. If you’re interested in learning JavaScript, check out CodeAcademy.com .
My wife, biology professor, asked me if there would be an easy way to share 3D models of cell structures for her classes. We want to explore 3D printed objects too. I, however, started to wonder if we could share the 3D model using a custom web page. While glancing through the three.js examples, I noticed that the library includes an STL model loader and an example for first person exploration. An STL file is a standard file format for saving 3D structure. You can create STL files using software like TinkerCAD.com , openjscad, or 123D design. You can also find STL content at thingiverse.com .
You can inspect these examples here:
http://threejs.org/examples/#misc_controls_pointerlock
http://threejs.org/examples/#webgl_loader_stl
In a few hours, I was able to combine the “pointer lock” control and the STL loader program into a single experience. In this experience, I loaded the “Winter fall” castle. This model can be found at http://www.thingiverse.com/thing:84866 .
http://inspiredtoeducate.net/blogPostDemos/threejsdemo1.html
Here’s the code for loading a binary STL.
var material = new THREE.MeshPhongMaterial( { color: 0x00AAFF, shininess: 30, specular: 0x111111 } );
var loader = new THREE.STLLoader();
loader.addEventListener( 'load', function ( event ) {
var geometry = event.content;
geometry.computeTangents();
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 0, -10, 0 );
mesh.rotation.set( - Math.PI / 2, 0, 0 );
mesh.scale.set( 15, 15, 15 );
mesh.castShadow = true;
mesh.receiveShadow = true;
objects.push(mesh);
scene.add( mesh );
} );
loader.load( './models/winterfell.stl' );
The following line describes the material properties of the STL and color.
var material = new THREE.MeshPhongMaterial( { color: 0x00AAFF, shininess: 30, specular: 0x111111 } );
In the next few lines, we define an event handler to load the STL content into memory. The geometry data of the STL is combined with the material to create a mesh object. You can set the position of the mesh, rotation, and scale factors. In the final two statements, the mesh is added to an “objects” collection and the scene. By adding the mesh to the “objects” collection, the player will be able to stand on objects defined in your STL file. If there’s a chair defined in your scene, the player will be able to stand on top of that chair.
The following line executes the loader for the STL you specified.
loader.load( ‘./models/winterfell.stl’ );
If the STL has too much complexity, the STL loader seems to break down. I would encourage you to tinker with it to see if it works for you. I was impressed with the number of STL files I was able to load.
Make sure to check out the other great examples on the three.js website.
Here’s a few links to help you get started with three.js .
- http://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene
- http://www.johannes-raida.de/tutorials.htm
Top Stories on InspiredToEducate.NET
Learning To Code
- Easy Data Visualization with Google Charts and JavaScript
- Learn to Build Your Own Conversational Bot using ChatScript
- 10 Free Resources for Learning JavaScript and HTML5
- 17 Fun Tools To Teach Kids To Code by @ChrisBetcher
- Benefits of Teaching Kids To Code That No One Is Talking About
- Easy Recipes for Building Android Apps using MIT App Inventor
- 12 Steps To 3D Print Your Minecraft Creations
- How to Build Your Mobile App using HTML
- Simple Minecraft Programming Using ScriptCraftJS
Science Education
- Why hate science?
- 7 ideas for creating a student centered learning environment by Paul Andersen
- Using candy to teach DNA structure