Skip to content

Commit

Permalink
more work
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeromeetienne
jeromeetienne committed Sep 12, 2012
1 parent 6fbdd81 commit 86bd2ec
Show file tree
Hide file tree
Showing 8 changed files with 417 additions and 47 deletions.
9 changes: 7 additions & 2 deletions build/tquery-bundle-require.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions build/tquery-bundle.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions build/tquery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2102,9 +2102,9 @@ tQuery.mixinAttributes(tQuery.MeshPhongMaterial, {
tQuery.Geometry.register('computeAll', function(){
this.each(function(tGeometry){
tGeometry.computeBoundingBox();
tGeometry.computeCentroids();
//tGeometry.computeCentroids();
tGeometry.computeFaceNormals();
tGeometry.computeVertexNormals();
//tGeometry.computeVertexNormals();
//tGeometry.computeTangents();
});

Expand Down
4 changes: 2 additions & 2 deletions js/plugins/tquery.geometry.toolbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@
tQuery.Geometry.register('computeAll', function(){
this.each(function(tGeometry){
tGeometry.computeBoundingBox();
tGeometry.computeCentroids();
//tGeometry.computeCentroids();
tGeometry.computeFaceNormals();
tGeometry.computeVertexNormals();
//tGeometry.computeVertexNormals();
//tGeometry.computeTangents();
});

Expand Down
2 changes: 1 addition & 1 deletion plugins/planets/examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<body><script>
var world = tQuery.createWorld().boilerplate().start();
// create the planet
var planet = tQuery.createPlanet().id('obj').addTo(world);
var planet = tQuery.createPlanet('earthNormal').id('obj').addTo(world);

// setup light
tQuery.createDirectionalLight().addTo(world).position(1,1,1);
Expand Down
293 changes: 293 additions & 0 deletions plugins/planets/examples/webgl_trackballcamera_earth.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,293 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - trackball camera - earth</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background: #000;
color: #EEE;
padding: 0;
margin: 0;
font-weight: bold;
overflow: hidden;

font-family: Monospace;
font-size: 13px;
text-align: center;
}

#info {
position: absolute;
top: 0px;
width: 100%;
padding: 5px;
z-index: 100;
}

a { color: green; }
b { color: green; }
</style>

<script src="../../../vendor/three.js/THREE.js"></script>
<script src="../../../vendor/three.js/Detector.js"></script>
<script src="../../../vendor/three.js//Stats.js"></script>

</head>

<body>

<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - earth [trackball camera]<br/><br/>
<b>MOVE</b> mouse &amp; press <b>LEFT/A:</b> rotate, <b>MIDDLE/S:</b> zoom, <b>RIGHT/D:</b> pan
</div>

<script>

var radius = 6371,
tilt = 0.41,
rotationSpeed = 0.1,

cloudsScale = 1.005,
moonScale = 0.23,

height = window.innerHeight,
width = window.innerWidth,

container, stats,

camera, controls, scene, renderer,
geometry, meshPlanet, meshClouds, meshMoon,
dirLight, ambientLight,

clock = new THREE.Clock();

window.onload = function() {

if ( !Detector.webgl ) {

Detector.addGetWebGLMessage();
return;

}

init();
animate();

}

function init() {

container = document.createElement( 'div' );
document.body.appendChild( container );

scene = new THREE.Scene();

renderer = new THREE.WebGLRenderer( { clearAlpha: 1, clearColor: 0x000000, antialias: true } );
renderer.setSize( width, height );
renderer.sortObjects = false;
renderer.autoClear = false;

//

renderer.gammaInput = true;
renderer.gammaOutput = true;

//

container.appendChild( renderer.domElement );

camera = new THREE.PerspectiveCamera( 25, width / height, 50, 1e7 );
camera.position.z = radius * 7;

controls = new THREE.TrackballControls( camera, renderer.domElement );

controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.2;

controls.noZoom = false;
controls.noPan = false;

controls.staticMoving = false;
controls.dynamicDampingFactor = 0.3;

controls.minDistance = radius * 1.1;
controls.maxDistance = radius * 100;

controls.keys = [ 65, 83, 68 ]; // [ rotateKey, zoomKey, panKey ]

dirLight = new THREE.DirectionalLight( 0xFFFFFF );
dirLight.position.set( -1, 0, 1 ).normalize();
scene.add( dirLight );

var planetTexture = THREE.ImageUtils.loadTexture( "../images/earth_atmos_2048.jpg" ),
cloudsTexture = THREE.ImageUtils.loadTexture( "../images/earth_clouds_1024.png" ),
normalTexture = THREE.ImageUtils.loadTexture( "../images/earth_normal_2048.jpg" ),
specularTexture = THREE.ImageUtils.loadTexture( "../images/earth_specular_2048.jpg" ),
moonTexture = THREE.ImageUtils.loadTexture( "../images/moon_1024.jpg" );

var shader = THREE.ShaderUtils.lib[ "normal" ],
uniforms = THREE.UniformsUtils.clone( shader.uniforms );

uniforms[ "tNormal" ].texture = normalTexture;
uniforms[ "uNormalScale" ].value = 0.85;

uniforms[ "tDiffuse" ].texture = planetTexture;
uniforms[ "tSpecular" ].texture = specularTexture;

uniforms[ "enableAO" ].value = false;
uniforms[ "enableDiffuse" ].value = true;
uniforms[ "enableSpecular" ].value = true;

uniforms[ "uDiffuseColor" ].value.setHex( 0xffffff );
uniforms[ "uSpecularColor" ].value.setHex( 0x666666 );
uniforms[ "uAmbientColor" ].value.setHex( 0x000000 );

uniforms[ "uShininess" ].value = 20;

uniforms[ "uDiffuseColor" ].value.convertGammaToLinear();
uniforms[ "uSpecularColor" ].value.convertGammaToLinear();
uniforms[ "uAmbientColor" ].value.convertGammaToLinear();

var materialNormalMap = new THREE.ShaderMaterial({
fragmentShader : shader.fragmentShader,
vertexShader : shader.vertexShader,
uniforms : uniforms,
lights : true
});


// planet

geometry = new THREE.SphereGeometry( radius, 100, 50 );
geometry.computeTangents();

meshPlanet = new THREE.Mesh( geometry, materialNormalMap );
meshPlanet.rotation.y = 0;
meshPlanet.rotation.z = tilt;
scene.add( meshPlanet );


// clouds

var materialClouds = new THREE.MeshLambertMaterial( { color: 0xffffff, map: cloudsTexture, transparent:true } );

meshClouds = new THREE.Mesh( geometry, materialClouds );
meshClouds.scale.set( cloudsScale, cloudsScale, cloudsScale );
meshClouds.rotation.z = tilt;
scene.add( meshClouds );

// moon
var materialMoon = new THREE.MeshPhongMaterial( { color: 0xffffff, map: moonTexture } );

meshMoon = new THREE.Mesh( geometry, materialMoon );
meshMoon.position.set( radius * 5, 0, 0 );
meshMoon.scale.set( moonScale, moonScale, moonScale );
scene.add( meshMoon );


// stars

var starsGeometry = new THREE.Geometry();

for ( var i = 0; i < 1500; i ++ ) {

var vertex = new THREE.Vector3();
vertex.x = Math.random() * 2 - 1;
vertex.y = Math.random() * 2 - 1;
vertex.z = Math.random() * 2 - 1;
vertex.multiplyScalar( radius );

starsGeometry.vertices.push( vertex );

}

var stars,
starsMaterials = [
new THREE.ParticleBasicMaterial( { color: 0x555555, size: 2, sizeAttenuation: false } ),
new THREE.ParticleBasicMaterial( { color: 0x555555, size: 1, sizeAttenuation: false } ),
new THREE.ParticleBasicMaterial( { color: 0x333333, size: 2, sizeAttenuation: false } ),
new THREE.ParticleBasicMaterial( { color: 0x3a3a3a, size: 1, sizeAttenuation: false } ),
new THREE.ParticleBasicMaterial( { color: 0x1a1a1a, size: 2, sizeAttenuation: false } ),
new THREE.ParticleBasicMaterial( { color: 0x1a1a1a, size: 1, sizeAttenuation: false } )
];

for ( i = 10; i < 30; i ++ ) {

stars = new THREE.ParticleSystem( starsGeometry, starsMaterials[ i % 6 ] );

stars.rotation.x = Math.random() * 6;
stars.rotation.y = Math.random() * 6;
stars.rotation.z = Math.random() * 6;

var s = i * 10;
stars.scale.set( s, s, s );

stars.matrixAutoUpdate = false;
stars.updateMatrix();

scene.add( stars );

}

stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );

window.addEventListener( 'resize', onWindowResize, false );

};

function onWindowResize( event ) {

width = window.innerWidth;
height = window.innerHeight;

renderer.setSize( width, height );

camera.aspect = width / height;
camera.updateProjectionMatrix();

controls.handleResize();

};

function animate() {

requestAnimationFrame( animate );

render();
stats.update();

};

function render() {

var delta = clock.getDelta();

meshPlanet.rotation.y += rotationSpeed * delta;
meshClouds.rotation.y += 1.25 * rotationSpeed * delta;

var angle = delta * rotationSpeed;

meshMoon.position = new THREE.Vector3(
Math.cos( angle ) * meshMoon.position.x - Math.sin( angle ) * meshMoon.position.z,
0,
Math.sin( angle ) * meshMoon.position.x + Math.cos( angle ) * meshMoon.position.z
);
meshMoon.rotation.y -= angle;

controls.update();

renderer.clear();
renderer.render( scene, camera );

};

</script>
</body>
</html>
Loading

0 comments on commit 86bd2ec

Please sign in to comment.