Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher

Forum Contest: Create a WebGL Scene

EDIT: This contest has ended! Congrats to Tamas Nemeth for his winning entry. The next contest is all about creating a favicon.

Hi everybody,

It's time for a new Treehouse Forum contest! First, watch this video to learn more:

After you've watched the video, please read the details below carefully. I'm looking forward to your entries!

How to Enter: Create your WebGL scene as a web page and then post the link as an answer to this post. Please do not post zip files, Github repos, or anything other than a "live" link. Entries will be judged in the latest version of Google Chrome. Any kind of WebGL will be acceptable, so get creative!

Due Date: All entries must be submitted by Sunday, June 15th at 11:45pm ET. Here's a timezone chart so you can see what time that is for your locale.

Prize: The entries will be judged by Treehouse teachers based on both design and code. One winner will receive a free month of Treehouse Pro on us! :) We'll announce the winner on Monday, June 16th and reveal the next contest.

14 Answers

Chase Lester
Chase Lester
10,972 Points

I was guessing that was the issue. Thanks guys! I will just run a local server!

seiichi tanaka
seiichi tanaka
16,378 Points

my entry is http://codepen.io/ymd/full/sxgLE/ I didn't use Blender. Please Click to hit a ball.

Nick Pettit
Nick Pettit
Treehouse Teacher

Wow, did you create this in 25 minutes? If so I'm super impressed. :)

Thiago de Bastos
Thiago de Bastos
14,556 Points

Maybe Yordi de Kleijn has some new top-secret Ninja-Coder-Class Implant!

Yordi de Kleijn
seal-mask
.a{fill-rule:evenodd;}techdegree
Yordi de Kleijn
iOS Development Techdegree Student 5,166 Points

Nick Pettit , Yes ! created it in less than 25 minutes, got some left over Math skills from my previous college :). Three JS is a really nice library, the only thing is, that it renders really slow on a Macbook Retina because of all the pixel calculations...

Chase Lester
Chase Lester
10,972 Points

Why cant I get the treehouse logo to view when viewing the file offline/ or local, after downloading the files (html, js, models.)?

Nick Pettit
Nick Pettit
Treehouse Teacher

You should read this blog post. :) http://blog.teamtreehouse.com/the-beginners-guide-to-three-js

See the section titled "Setup the Local Environment"

Yordi de Kleijn
seal-mask
.a{fill-rule:evenodd;}techdegree
Yordi de Kleijn
iOS Development Techdegree Student 5,166 Points

If you are pretty familiar with the command line, navigate to your project folder and start a php server this way : php -S localhost:<port number, e.g. 8000>

than navigate to localhost:8000, in your prevered browser

Maxim Kontsevitch
Maxim Kontsevitch
25,447 Points

Can I use exporting from blender to three.js?

Chase Lester
Chase Lester
10,972 Points

I didn't use blender. Don't have too much time this week to try and figure it out. This is the first time I even attempted three.js. Was fun to play around with. But this is just with the three.min.js. http://chaselester.com/threejs/

<a href="http://vasrozsa-etterem.hu/THREE_apps/projectCube/projectCube.html">http://vasrozsa-etterem.hu/THREE_apps/projectCube/projectCube.html</a> This project is a 3D Three.js based lightbox engine. It took me a while to set all the stuff properly, and let them work together. It's a scene, but it's kinda interactive. I hope it's not a problem. :)

Btw i used IE 11 to display my site locally, worked fine, just lagged a bit. This version of Internet Explorer supports WebGL and Three.js.

Kind of silly, but oh well: http://squarehighlight.com/soccer/ Relatively resource heavy: 200,000 triangles, 70 percent of which are the grass. I used the .obj to binary converter, but it's still a 9.5 MB total scene, hence the spinner while downloading and parsing.

I should say that I've played with three.js previously, for work. Our intention is to display industrial products, so I haven't moved past this type of scene. I've unsuccessfully worked at collision detection (boxes on a conveyor).

James Magnavacca
James Magnavacca
20,170 Points

i have made a changing color 3D Minion: http://jamesmagnavacca.altervista.org/ I made the Minion using blender and imported it with three.js. Unfortunately i haven't figured out how to reset the scene yet and before changing the color you have to refresh the page. Due to the size of the model (aprox. 10MB) it may be a bit slow. Using three.js for the first time was really stimulating and I am looking forward to more projects in the future.

This is my entry: http://somespotlights.com/BluePaleDot/BluePaleDot.html

I followed some tutorials and kinda assembled this space scene.

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher

Hi everyone,

Wow, another forum contest and another round of amazing entries! This one was a little bit more challenging, so I'm glad to see so much quality work. Remember, these are great projects to add to your portfolio.

This week's winner is Tamas Nemeth. His 3D image gallery entry was a great example of WebGL interactivity and made clever use of the user's perspective within the browser. Great job, Tamas!

The next forum contest is all about creating a favicon!

I am so glad to see that i won. :) It was pretty hard to accomplish what i exactly wanted. Thanks for the positive rating.