CODEWITHSUNDEEP
three.jswebgl
meetar
meetar

Reputation: 7611

What is ThreeExtras.js?

I'm attempting to deconstruct this webGL moon, which uses ThreeExtras.js.

Threeextras.js seems to be some variant of Three.js plus some pieces from elsewhere in the repo; is there any documentation for it, or description of how it differs from standard Three.js?

(I also found a repository of variant builds, but no docs or mention of origin besides the three.js repo.) http://www.chandlerprall.com/threebuilds/

Upvotes: 2

Views: 840

Answers (3)

Cory Gross
Cory Gross

Reputation: 37206

I saw that same WebGL moon demo and decided to see if I could do better. If you'd like to see how you can do something similar with the latest version of Three.JS you can check out my Moon Demo. There is a blog posted linked to on the repository page, but it's a work in progress. If you don't mind digging into the code though, you'll probably be able to use it better than the demo you're looking at now. Here is the live demo if you want to check it out. It implements the diffuse lighting and also the normal mapping. No specular lighting was applied however.

Upvotes: 1

Stemkoski
Stemkoski

Reputation: 9045

If what you're looking to deconstruct in the WebGL moon demo are the texture-based effects, here is some information: in more recent versions of Three.js, some of the texture effects such as bump mapping and specular mapping were incorporated into THREE.MeshPhongMaterial. For an example of a similar set of effects -- say, for the planet Earth -- check out the example at:

http://stemkoski.github.io/Three.js/Earth.html

The particularly relevant code is:

// Create the Earth with nice texturing - normal map for elevation, specular highlights
var sphereGeo = new THREE.SphereGeometry(100, 64, 32);  

var colors = THREE.ImageUtils.loadTexture( "images/earth-day.jpg" );
var bumps  = THREE.ImageUtils.loadTexture( "images/earth-topo.jpg" );
var shine  = THREE.ImageUtils.loadTexture( "images/earth-specular.jpg" );

var earthMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, map: colors, 
    bumpMap: bumps, bumpScale: 4, specular: 0xffffff, specularMap: shine, emissive: 0x888888 } );

var earthSphere = new THREE.Mesh( sphereGeo, earthMaterial ); 
scene.add(earthSphere);

Hope this helps!

Upvotes: 1

gaitat
gaitat

Reputation: 12642

ThreeExtras.js lived in the repository until r49. You can look at it at https://github.com/mrdoob/three.js/tree/r49. After that things moved around. You would have to look at the migration guide at https://github.com/mrdoob/three.js/wiki/Migration and the changes log at https://github.com/mrdoob/three.js to see how you can bring the code to the latest release or ask questions about specific problems.

Upvotes: 2

Related Questions