tparisi/webglbook

Code Examples for Tony Parisi's Book, WebGL Up and Running

WebGLBook

Code Examples for Tony Parisi's Book, WebGL Up and Running.

You can grab the stable version that corresponds with August 2012 release of the book by getting the tag v1.0 (see Tags).

Please note that currently these examples are based on an older version of Three.js (r46). A snapshot of that version is included as libs/Three.js. I am currently working on upgrading to the latest stable Three.js (r50). Thanks for your patience!

VERY IMPORTANT TECH NOTE: It seems that folks are missing my little tech tip at the bottom of page 19, in the section titled "Setting up Three.js." These examples must be run from a web server such as Apache. localhost:// is fine but it needs to be coming from a server or loading external files such as textures and JSON for models simply won't work because of browser security restrictions. Or, if you have Python installed on your machine, you can run the simple web server module and serve up files that way:

cd <path to the example files>

python -m SimpleHTTPServer

Then point your web browser at

http://localhost:8000/

Happy coding!

webglbook's Issues

Python HTTP server start command changed with Python 3

In file README.md the start command for a HTTP server should be modified:
Python 2:
python -m SimpleHTTPServer

Python 2:
python -m http.server

Code updates?

Code examples are written to Three.js r46, as of July 2017 the current version of Three is r86.

I understand concepts are the same but code and technical examples are simply broken. Is there any plan to update?

example 2-1 typo?

Is scene.add( camera ); necessary in example 2-1? Isn't the camera added by WebGLRenderer.render() ? That's how it's done in Example 2-2 and https://github.com/mrdoob/three.js/wiki/Getting-Started.

Explicit license for Sim?

Would you consider posting an explicit license on the Sim js code? Perhaps same as Three's? ie. https://github.com/mrdoob/three.js/blob/master/LICENSE

earth-shader.js - Does not render ShaderMaterial()

After updating my Sim.js with the objectIntersects() method call, I was able to get earth-lit.js to work, however, the next example, earth-shader.js, does not render properly. Using the custom ShaderMaterial(), it only renders the clouds. When I switch that chunk of code for a MeshPhongMaterial() as coded in earth-lit.js, I'm able to render the earth surface, of course without specularity and bump map. Something is wrong with the ShaderMaterial() setup.

stars.js - THREE.Vertex has been deprecated, use THREE.Vector3 instead

stars.js throws error to the console "THREE.Vertex has been DEPRECATED. Use THREE.Vector3 instead."

Still haven't gotten it to show the stars...

Probably want to just change:

starsGeometry.vertices.push( new THREE.Vertex( vector ) ) ;

to:

starsGeometry.vertices.push( vector );

since vector is already a Vector3 object.

Update sim.js

There were some updates on three.js and SIM.js is not working properly. The main problem is comming form the intersectScene which is now replaced with intersectObjects and some slight modifications are required

sim.js: update()-function defined twice

In the sim.js lib at line 462-465 you have this function definition for Sim.Object

Sim.Object.prototype.update = function()
{
this.updateChildren();
}

Later in line 505 this function definition starts defining Sim.Object.prototype.update a second time

Sim.Object.prototype.update = function()
{
var i, len;
len = this.children.length;
for (i = 0; i < len; i++)
{
    this.children[i].update();
}
}

I guess the first definition gets overwritten and so the first definition simple gets ignored and so no errors derive. updateChildren() is nowhere defined.

This could be cleaned up in a later revision.