We have capabilities in our browsers that we wouldn’t have dreamt of 5 or 10 years ago. Entire 3D game worlds can run in the browser and interactive websites can be more immersive experiences.

With a certain virtual reality company being purchased by a certain social media company, now is the perfect time to start working with 3D. Amazingly, we can now create 3D with pure JavaScript, including meshes and materials.

Of course, even though it’s possible, it does require a huge amount of code, and that’s where Three.js comes in, allowing us to build 3D environments simply and with less code.

Browser compatibility

Unfortunately, because it’s new, 3D isn’t supported by all browsers. We’re currently restricted to Chrome, Safari and Firefox.

As time goes by, support on IE will improve, but for now you’ll need a fallback for Microsoft devotees.

Getting started

The first thing we need to do is head over to the three.js website and download the latest version of the library.

Next, reference it in the head of your document like you would any other JavaScript file, and we’re ready to go.

Creating our first scene

The first thing we need to do, to render anything with three.js is to create a scene, a camera, and a renderer. Starting with a scene:

var scene = new THREE.Scene();

Next, we need a camera. Think of this as the point of view that the user is looking from. Three.js actually has a lot of options here, but for simplicity’s sake we’re going to use a perspective camera:

var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);

This method takes four parameters: the first is the field of view, the second is the aspect ratio (I’d recommend always basing this on the user’s viewport), the near clipping plane, and lastly the far clipping plane. These last two parameters determine the limits of rendering, so that objects that are too close or too far away aren’t drawn, which would waste resources.

Next up, we need to set up the WebGL Renderer:

var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );

As you can see, the first thing here is to create an instance of the renderer, then set its size to the user’s viewport, finally we add it to the page to create a blank canvas for us to work with.

Adding some objects

So far, all we’ve done is set up the stage, now we’ve going to create our first 3D object.

For this tutorial it’s going to be a simple cylinder:

var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );

This method also takes 4 parameters: the first is the radius of the top of the cylinder, the second is the radius of the bottom of the cylinder, the third is the height, the last is the number of height segments.

We’ve set up the mathematics of the object, now we need to wrap it in a material so that it actually looks like something on screen:

var material = new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true} );

This code adds a simple material for the object, in this case a blue color. I’ve set wireframe to true because it will show the object more clearly once we get to animating it.

Finally, we need to add our cylinder to our scene, like so:

var cylinder = new THREE.Mesh( geometry, material ); scene.add( cylinder );

The last thing to do before we render the scene is to set the camera position:

camera.position.z = 20;

As you can see, the JavaScript involved is extremely simple, that’s because Three.js is dealing with all the complicated stuff, so we don’t have to.

Rendering the scene

If you test the file in a browser now you’ll see that nothing is happening. That’s because we haven’t told the scene to render. To render the scene we need the following code:

function render() { requestAnimationFrame(render); renderer.render(scene, camera); } render();

If you now take a look at the file in your browser you’ll see it does indeed render a cylinder, but it’s not very exciting.

To really enhance the value of 3D you need to start animating, which we can do with a couple of small changes to our render function:

function render() { requestAnimationFrame(render); cylinder.rotation.z += 0.01; cylinder.rotation.y += 0.1; renderer.render(scene, camera); } render();

If you test in your browser now you’ll see a properly animating 3D cylinder.

Conclusion

If you want to see a demo and play around with the code you can do so here.

As you can see, creating this (admittedly very simple) scene took less than two dozen lines of code, and there’s very little math involved.

If you check out the examples on the three.js website you’ll see some incredible work that has been done.

This amazing library for JavaScript has really lowered the entry-level for coding 3D to the point that anyone who can write basic JavaScript can get involved.

Featured image/thumbnail, 3D image via Shutterstock.

Over 600 Secrets, Tips and Tricks for Marketers – only $8!

Update:

Given recent IT security threats generally, DoIT has decided to force the password change to May 23, 2014, the day after Undergraduate Commencement. Thank you in advance for your patience and understanding. 

--------------------------------------------

In an effort to improve campus security and better protect user information, DoIT is requiring that everyone with a UMBC account must change his or her password by June 9, 2014, unless this has already been done this calendar year. This will apply to all myUMBC account holders -- students, faculty, staff and alumni. We know people hate changing their account passwords, but with the rise of emails targeting people to share their account and password, called phishing, we feel it is necessary for security.

As part of this effort, everyone will also be required to provide an alternate email address and create account security questions. Once in place, all users will then be able to reset their password through a self-service page. We have had these account security questions in place for the last two years for students and the program has been very successful in reducing the number of time-consuming, manual password resets performed by our Technolgy Support Center (TSC). We expect that by expanding self-service password resets to all account holders, everyone will benefit.

A notice will appear to all faculty and staff when they login on Wednesday, April 23, informing them they need to change their password and establish their security questions, if they have not done so already in 2014. While the final date for password changes is June 9th, DoIT especially recommends that faculty make this change before they leave for the summer. We will also be sending out regular reminders.

To create your own security questions, visit the following Frequently Asked Question (FAQ):

How do I create my security questions to reset a forgotten password?

If you have any questions or need help, please submit an RT Ticket or contact the TSC at 410.455.3838.

The ALM Forum is being held in Seattle, a software development conference.

In his latest column for The Baltimore Sun, Political Science Professor Thomas Schaller writes about Maryland Governor Martin O’Malley’s political future and possible presidential bid in 2016. He argues that an O’Malley presidential campaign could benefit former Secretary of State Hillary Clinton should she decide to run.

“What possible benefit is there for Mr. O’Malley to play the role of primary sparring partner? That’s pretty obvious: the vice presidential slot on the Clinton ticket. He is ideally suited for that role, too,” Schaller writes.

He notes if chosen to be a vice presidential candidate, O’Malley would help balance the ticket and would receive support based on his record as governor.

“Progressives will also be cheered by Mr. O’Malley’s successful efforts to move Maryland leftward on issues ranging from gay marriage to college tuition to the death penalty.

To read the full column titled, “Your move, governor,” click here.

UMBC red-shirt freshman goalkeeper Connor Gordon has been named America East Conference Men’s Lacrosse Rookie of the Week for games ending March 29, the league office announced on March 31.

Gordon fell one save shy of his season high, making 15 stops against Stony Brook as the Retrievers prevailed, 12-11, in overtime.

The Retriever netminder made a one-on-one save with his team two men down midway through overtime, setting up Pat Young’s game-winning goal with 9.6 seconds to play in extra time. He has recorded more saves than goals allowed in eight of his nine starts for UMBC (5-4, 1-0 America East) this season.

Gordon is averaging 12.33 saves per game, good for sixth place in the nation through games of March 30. His save percentage is an outstanding 56.3 percent, which is 14th-best in the country.

DBmaestro solution available for both Oracle and SQL Server platforms – now reaches over 65% of Database market.

Join us this May and June for great alumni events like these: 

CBLA Scholarship Jazz Brunch
Sunday, May 18, 12 – 3 p.m.

Join UMBC alumni for a fabulous buffet, energizing jazz and fantastic fellowship as we raise money in support of the Second Generation and Esperanza Scholarships at the annual CBLA Scholarship Jazz Brunch.

This year’s event will be held in the Reginald F. Lewis Museum of Maryland African American History and Culture and the ticket price includes an unlimited brunch buffet, special brunch beverages, and full access to the museum (brunch ends at 3 p.m., access to the museum is available until 5 p.m.).

Register by May 1 for an early-bird rate of $40 per person. The ticket price for children ages 4 to 12 is $12.

IT & Engineering Alumni Happy Hour
Wednesday, June 25, 6 – 8 p.m.

An IT and an Engineering alum walk into a bar. The bartender says, “Hey, is this some kind of joke?” to which they reply, “No, we just like networking.” Join fellow graduates of the College of Engineering and Information Technology and those who now work in those fields for a happy hour. Enjoy fabulous food and drinks on us while connecting with other IT&E Retrievers. This event is sponsored by the UMBC Training Centers. RSVP to this FREE event now!

Save the date for these great summer events:

• UMBC Day at Camden Yards, July 9
• UMBC Night at Nationals Stadium, August 2

Check out our full events calendar.