materials[ 0 ];
material.morphTargets = true;
material.color.setHex( 0xffaaaa );
material.ambient.setHex( 0x222222 );
var faceMaterial = new THREE.MeshFaceMaterial( materials );
for ( var i = 0; i < 729; i ++ ) {
// random placement in a grid
var x = ( ( i % 27 ) - 13.5 ) * 2 + THREE.Math.randFloatSpread( 1 );
var z = ( Math.floor( i / 27 ) - 13.5 ) * 2 + THREE.Math.randFloatSpread( 1 );
// leave space for big monster
if ( Math.abs( x ) < 2 && Math.abs( z ) < 2 ) continue;
morph = new THREE.MorphAnimMesh( geometry, faceMaterial );
// one second duration
morph.duration = 1000;
// random animation offset
morph.time = 1000 * Math.random();
var s = THREE.Math.randFloat( 0.00075, 0.001 );
morph.scale.set( s, s, s );
morph.position.set( x, 0, z );
morph.rotation.y = THREE.Math.randFloat( -0.25, 0.25 );
morph.matrixAutoUpdate = false;
morph.updateMatrix();
scene.add( morph );
morphs.push( morph );
}
} );
// Add the COLLADA
scene.add( dae );
// Lights
scene.add( new THREE.AmbientLight( 0xcccccc ) );
pointLight = new THREE.PointLight( 0xff4400, 5, 30 );
pointLight.position.set( 5, 0, 0 );
scene.add( pointLight );
// Renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
// Stats
stats = new Stats();
container.appendChild( stats.domElement );
// Events
window.addEventListener( 'resize', onWindowResize, false );
}
//
function onWindowResize( event ) {
renderer.setSize( window.innerWidth, window.innerHeight );
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
//
var t = 0;
function animate() {
requestAnimationFrame( animate );
// animate Collada model
if ( t > 30 ) t = 0;
if ( skin ) {
// guess this can be done smarter...
// (Indeed, there are way more frames than needed and interpolation is not used at all
// could be something like - one morph per each skinning pose keyframe, or even less,
// animation could be resampled, morphing interpolation handles sparse keyframes quite well.
// Simple animation cycles like this look ok with 10-15 frames instead of 100 ;)
for ( var i = 0; i < skin.morphTargetInfluences.length; i++ ) {
skin.morphTargetInfluences[ i ] = 0;
}
skin.morphTargetInfluences[ Math.floor( t ) ] = 1;
t += 0.5;
}
// animate morphs
var delta = clock.getDelta();
if ( morphs.length ) {
for ( var i = 0; i < morphs.length; i ++ )
morphs[ i ].updateAnimation( 1000 * delta );
}
render();
stats.update();
}
function render() {
var timer = Date.now() * 0.0005;
camera.position.x = Math.cos( timer ) * 10;
camera.position.y = 4;
camera.position.z = Math.sin( timer ) * 10;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
};
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_loader_json_objconverter.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_loader_obj.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_loader_obj_mtl.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_loader_scene.html
()=>{
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container,stats;
var camera, scene, loaded;
var renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var rotatingObjects = [];
var morphAnimatedObjects = [];
var clock = new THREE.Clock();
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
init();
animate();
function $( id ) {
return document.getElementById( id );
}
function handle_update( result, pieces ) {
refreshSceneView( result );
//renderer.initWebGLObjects( result.scene );
var m, material, count = 0;
for ( m in result.materials ) {
material = result.materials[ m ];
if ( ! ( material instanceof THREE.MeshFaceMaterial || material instanceof THREE.ShaderMaterial || material.morphTargets ) ) {
if( !material.program ) {
renderer.initMaterial( material, result.scene.__lights, result.scene.fog );
count += 1;
if( count > pieces ) {
//console.log("xxxxxxxxx");
break;
}
}
}
}
}
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
var loadScene = createLoadScene();
camera = loadScene.camera;
scene = loadScene.scene;
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.domElement.style.position = "relative";
container.appendChild( renderer.domElement );
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.physicallyBasedShading = true;
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.right = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
$( "start" ).addEventListener( 'click', onStartClick, false );
var callbackProgress = function( progress, result ) {
var bar = 250,
total = progress.totalModels + progress.totalTextures,
loaded = progress.loadedModels + progress.loadedTextures;
if ( total )
bar = Math.floor( bar * loaded / total );
$( "bar" ).style.width = bar + "px";
var count = 0;
for ( var m in result.materials ) count++;
handle_update( result, Math.floor( count/total ) );
}
var callbackSync = function( result ) {
/*
// uncomment to see progressive scene loading
scene = result.scene;
camera = result.currentCamera;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
*/
//handle_update( result, 1 );
}
var callbackFinished = function ( result ) {
loaded = result;
$( "message" ).style.display = "none";
$( "progressbar" ).style.display = "none";
$( "start" ).style.display = "block";
$( "start" ).className = "enabled";
handle_update( result, 1 );
result.scene.traverse( function ( object ) {
if ( object.properties.rotating === true ) {
rotatingObjects.push( object );
}
if ( object instanceof THREE.MorphAnimMesh ) {
morphAnimatedObjects.push( object );
}
if ( object instanceof THREE.SkinnedMesh ) {
if ( object.geometry.animation ) {
THREE.AnimationHandler.add( object.geometry.animation );
var animation = new THREE.Animation( object, object.geometry.animation.name );
animation.interpolationType = THREE.AnimationHandler.LINEAR;
animation.play();
}
}
} );
}
$( "progress" ).style.display = "block";
var loader = new THREE.SceneLoader();
loader.addGeometryHandler( "binary", THREE.BinaryLoader );
loader.addGeometryHandler( "ctm", THREE.CTMLoader );
loader.addGeometryHandler( "vtk", THREE.VTKLoader );
loader.addGeometryHandler( "stl", THREE.STLLoader );
loader.addHierarchyHandler( "obj", THREE.OBJLoader );
loader.addHierarchyHandler( "dae", THREE.ColladaLoader );
loader.addHierarchyHandler( "utf8", THREE.UTF8Loader );
loader.callbackSync = callbackSync;
loader.callbackProgress = callbackProgress;
loader.load( "scenes/test_scene.js", callbackFinished );
$( "plus_exp" ).addEventListener( 'click', createToggle( "exp" ), false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function setButtonActive( id ) {
$( "start" ).style.backgroundColor = "green";
}
function onStartClick() {
$( "progress" ).style.display = "none";
camera = loaded.currentCamera;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
scene = loaded.scene;
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
function createLoadScene() {
var result = {
scene: new THREE.Scene(),
camera: new THREE.PerspectiveCamera( 65, window.innerWidth / window.innerHeight, 1, 1000 )
};
result.camera.position.z = 100;
result.scene.add( result.camera );
var object, geometry, material, light, count = 500, range = 200;
material = new THREE.MeshLambertMaterial( { color:0xffffff } );
geometry = new THREE.CubeGeometry( 5, 5, 5 );
for( var i = 0; i < count; i++ ) {
object = new THREE.Mesh( geometry, material );
object.position.x = ( Math.random() - 0.5 ) * range;
object.position.y = ( Math.random() - 0.5 ) * range;
object.position.z = ( Math.random() - 0.5 ) * range;
object.rotation.x = Math.random() * 6;
object.rotation.y = Math.random() * 6;
object.rotation.z = Math.random() * 6;
object.matrixAutoUpdate = false;
object.updateMatrix();
result.scene.add( object );
}
result.scene.matrixAutoUpdate = false;
light = new THREE.PointLight( 0xffffff );
result.scene.add( light );
light = new THREE.DirectionalLight( 0x111111 );
light.position.x = 1;
result.scene.add( light );
return result;
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var delta = clock.getDelta();
camera.position.x += ( mouseX - camera.position.x ) * .001;
camera.position.y += ( - mouseY - camera.position.y ) * .001;
camera.lookAt( scene.position );
// update skinning
THREE.AnimationHandler.update( delta * 0.75 );
for ( var i = 0; i < rotatingObjects.length; i ++ ) {
var object = rotatingObjects[ i ];
if ( object.properties.rotateX ) object.rotation.x += 1 * delta;
if ( object.properties.rotateY ) object.rotation.y += 0.5 * delta;
}
for ( var i = 0; i < morphAnimatedObjects.length; i ++ ) {
var object = morphAnimatedObjects[ i ];
object.updateAnimation( 1000 * delta );
}
renderer.render( scene, camera );
}
// Scene explorer user interface
function toggle( id ) {
var scn = $( "section_" + id ).style,
btn = $( "plus_" + id );
if ( scn.display == "block" ) {
scn.display = "none";
btn.innerHTML = "[+]";
}
else {
scn.display = "block";
btn.innerHTML = "[-]";
}
}
function createToggle( label ) { return function() { toggle( label ) } };
function refreshSceneView( result ) {
$( "section_exp" ).innerHTML = generateSceneView( result );
var config = [ "obj", "geo", "mat", "tex", "lit", "cam" ];
for ( var i = 0; i < config.length; i++ )
$( "plus_" + config[i] ).addEventListener( 'click', createToggle( config[i] ), false );
}
function generateSection( label, id, objects ) {
var html = "";
html += "[+] " + label + "
";
html += "";
for( var o in objects ) {
html += o + "
";
}
html += "
";
return html;
}
function generateSceneView( result ) {
var config = [
[ "Objects", "obj", result.objects ],
[ "Geometries", "geo", result.geometries ],
[ "Materials", "mat", result.materials ],
[ "Textures", "tex", result.textures ],
[ "Lights", "lit", result.lights ],
[ "Cameras", "cam", result.cameras ]
];
var html = "";
for ( var i = 0; i < config.length; i++ )
html += generateSection( config[i][0], config[i][1], config[i][2] );
return html;
}
};
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_loader_scene_blender.html
()=>{
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container,stats;
var camera, scene: THREE.Scene, loaded;
var renderer;
var mesh, zmesh, geometry;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
init();
animate();
function $( id ) {
return document.getElementById( id );
}
function handle_update( result, pieces ) {
refreshSceneView( result );
//renderer.initWebGLObjects( result.scene );
var m, material, count = 0;
for ( m in result.materials ) {
material = result.materials[ m ];
if ( ! ( material instanceof THREE.MeshFaceMaterial ) ) {
if( !material.program ) {
console.log(m);
renderer.initMaterial( material, result.scene.__lights, result.scene.fog );
count += 1;
if( count > pieces ) {
//console.log("xxxxxxxxx");
break;
}
}
}
}
}
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
var loadScene = createLoadScene();
camera = loadScene.camera;
scene = loadScene.scene;
renderer = new THREE.WebGLRenderer();
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.domElement.style.position = "relative";
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.right = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
$( "start" ).addEventListener( 'click', onStartClick, false );
var callbackProgress = function( progress, result ) {
var bar = 250,
total = progress.total_models + progress.total_textures,
loaded = progress.loaded_models + progress.loaded_textures;
if ( total )
bar = Math.floor( bar * loaded / total );
$( "bar" ).style.width = bar + "px";
var count = 0;
for ( var m in result.materials ) count++;
handle_update( result, Math.floor( count/total ) );
}
var callbackFinished = function( result ) {
loaded = result;
$( "message" ).style.display = "none";
$( "progressbar" ).style.display = "none";
$( "start" ).style.display = "block";
$( "start" ).className = "enabled";
handle_update( result, 1 );
}
$( "progress" ).style.display = "block";
var loader = new THREE.SceneLoader();
loader.callbackProgress = callbackProgress;
loader.load( "obj/blenderscene/scene.js", callbackFinished );
$( "plus_exp" ).addEventListener( 'click', createToggle( "exp" ), false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function setButtonActive( id ) {
$( "start" ).style.backgroundColor = "green";
}
function onStartClick() {
$( "progress" ).style.display = "none";
camera = loaded.currentCamera;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
scene = loaded.scene;
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
function createLoadScene() {
var result = {
scene: new THREE.Scene(),
camera: new THREE.PerspectiveCamera( 65, window.innerWidth / window.innerHeight, 1, 1000 )
};
result.camera.position.z = 100;
var object, geometry, material, light, count = 500, range = 200;
material = new THREE.MeshLambertMaterial( { color:0xffffff } );
geometry = new THREE.CubeGeometry( 5, 5, 5 );
for( var i = 0; i < count; i++ ) {
object = new THREE.Mesh( geometry, material );
object.position.x = ( Math.random() - 0.5 ) * range;
object.position.y = ( Math.random() - 0.5 ) * range;
object.position.z = ( Math.random() - 0.5 ) * range;
object.rotation.x = Math.random() * 6;
object.rotation.y = Math.random() * 6;
object.rotation.z = Math.random() * 6;
object.matrixAutoUpdate = false;
object.updateMatrix();
result.scene.add( object );
}
result.scene.matrixAutoUpdate = false;
light = new THREE.PointLight( 0xffffff );
result.scene.add( light );
light = new THREE.DirectionalLight( 0x111111 );
light.position.x = 1;
result.scene.add( light );
return result;
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .001;
camera.position.y += ( - mouseY - camera.position.y ) * .001;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
// Scene explorer user interface
function toggle( id ) {
var scn = $( "section_" + id ).style,
btn = $( "plus_" + id );
if ( scn.display == "block" ) {
scn.display = "none";
btn.innerHTML = "[+]";
}
else {
scn.display = "block";
btn.innerHTML = "[-]";
}
}
function createToggle( label ) { return function() { toggle( label ) } };
function refreshSceneView( result ) {
$( "section_exp" ).innerHTML = generateSceneView( result );
var config = [ "obj", "geo", "mat", "tex", "lit", "cam" ];
for ( var i = 0; i < config.length; i++ )
$( "plus_" + config[i] ).addEventListener( 'click', createToggle( config[i] ), false );
}
function generateSection( label, id, objects ) {
var html = "";
html += "[+] " + label + "
";
html += "";
for( var o in objects ) {
html += o + "
";
}
html += "
";
return html;
}
function generateSceneView( result ) {
var config = [
[ "Objects", "obj", result.objects ],
[ "Geometries", "geo", result.geometries ],
[ "Materials", "mat", result.materials ],
[ "Textures", "tex", result.textures ],
[ "Lights", "lit", result.lights ],
[ "Cameras", "cam", result.cameras ]
];
var html = "";
for ( var i = 0; i < config.length; i++ )
html += generateSection( config[i][0], config[i][1], config[i][2] );
return html;
}
};
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_loader_stl.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_loader_utf8.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_loader_vtk.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_lod.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_marching_cubes.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials.html
()=>{
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, objects;
var particleLight, pointLight;
var materials = [];
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set( 0, 200, 800 );
scene = new THREE.Scene();
// Grid
var line_material = new THREE.LineBasicMaterial( { color: 0x303030 } ),
geometry = new THREE.Geometry(),
floor = -75, step = 25;
for ( var i = 0; i <= 40; i ++ ) {
geometry.vertices.push( new THREE.Vector3( - 500, floor, i * step - 500 ) );
geometry.vertices.push( new THREE.Vector3( 500, floor, i * step - 500 ) );
geometry.vertices.push( new THREE.Vector3( i * step - 500, floor, -500 ) );
geometry.vertices.push( new THREE.Vector3( i * step - 500, floor, 500 ) );
}
var line = new THREE.Line( geometry, line_material, THREE.LinePieces );
scene.add( line );
// Materials
var texture = new THREE.Texture( generateTexture() );
texture.needsUpdate = true;
materials.push( new THREE.MeshLambertMaterial( { map: texture, transparent: true } ) );
materials.push( new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.FlatShading } ) );
materials.push( new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.FlatShading } ) );
materials.push( new THREE.MeshNormalMaterial( ) );
materials.push( new THREE.MeshBasicMaterial( { color: 0xffaa00, transparent: true, blending: THREE.AdditiveBlending } ) );
//materials.push( new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.SubtractiveBlending } ) );
materials.push( new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.SmoothShading } ) );
materials.push( new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.SmoothShading, map: texture, transparent: true } ) );
materials.push( new THREE.MeshNormalMaterial( { shading: THREE.SmoothShading } ) );
materials.push( new THREE.MeshBasicMaterial( { color: 0xffaa00, wireframe: true } ) );
materials.push( new THREE.MeshDepthMaterial() );
materials.push( new THREE.MeshLambertMaterial( { color: 0x666666, emissive: 0xff0000, ambient: 0x000000, shading: THREE.SmoothShading } ) );
materials.push( new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x666666, emissive: 0xff0000, ambient: 0x000000, shininess: 10, shading: THREE.SmoothShading, opacity: 0.9, transparent: true } ) );
materials.push( new THREE.MeshBasicMaterial( { map: texture, transparent: true } ) );
// Spheres geometry
var geometry_smooth = new THREE.SphereGeometry( 70, 32, 16 );
var geometry_flat = new THREE.SphereGeometry( 70, 32, 16 );
var geometry_pieces = new THREE.SphereGeometry( 70, 32, 16 ); // Extra geometry to be broken down for MeshFaceMaterial
for ( var i = 0, l = geometry_pieces.faces.length; i < l; i ++ ) {
var face = geometry_pieces.faces[ i ];
face.materialIndex = Math.floor( Math.random() * materials.length );
}
geometry_pieces["materials"] = materials;
materials.push( new THREE.MeshFaceMaterial( materials ) );
objects = [];
var sphere, material;
for ( var i = 0, l = materials.length; i < l; i ++ ) {
material = materials[ i ];
geometry = material instanceof THREE.MeshFaceMaterial ? geometry_pieces :
( material.shading == THREE.FlatShading ? geometry_flat : geometry_smooth );
sphere = new THREE.Mesh( geometry, material );
sphere.position.x = ( i % 4 ) * 200 - 400;
sphere.position.z = Math.floor( i / 4 ) * 200 - 200;
sphere.rotation.x = Math.random() * 200 - 100;
sphere.rotation.y = Math.random() * 200 - 100;
sphere.rotation.z = Math.random() * 200 - 100;
objects.push( sphere );
scene.add( sphere );
}
particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
scene.add( particleLight );
// Lights
scene.add( new THREE.AmbientLight( 0x111111 ) );
var directionalLight = new THREE.DirectionalLight( /*Math.random() * */ 0xffffff, 0.125 );
directionalLight.position.x = Math.random() - 0.5;
directionalLight.position.y = Math.random() - 0.5;
directionalLight.position.z = Math.random() - 0.5;
directionalLight.position.normalize();
scene.add( directionalLight );
pointLight = new THREE.PointLight( 0xffffff, 1 );
scene.add( pointLight );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
//
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function generateTexture() {
var canvas = document.createElement( 'canvas' );
canvas.width = 256;
canvas.height = 256;
var context = canvas.getContext( '2d' );
var image = context.getImageData( 0, 0, 256, 256 );
var x = 0, y = 0;
for ( var i = 0, j = 0, l = image.data.length; i < l; i += 4, j ++ ) {
x = j % 256;
y = x == 0 ? y + 1 : y;
image.data[ i ] = 255;
image.data[ i + 1 ] = 255;
image.data[ i + 2 ] = 255;
image.data[ i + 3 ] = Math.floor( x ^ y );
}
context.putImageData( image, 0, 0 );
return canvas;
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var timer = 0.0001 * Date.now();
camera.position.x = Math.cos( timer ) * 1000;
camera.position.z = Math.sin( timer ) * 1000;
camera.lookAt( scene.position );
for ( var i = 0, l = objects.length; i < l; i ++ ) {
var object = objects[ i ];
object.rotation.x += 0.01;
object.rotation.y += 0.005;
}
materials[ materials.length - 3 ].emissive.setHSV( 0.54, 1, 0.7 * ( 0.5 + 0.5 * Math.sin( 35 * timer ) ) );
materials[ materials.length - 4 ].emissive.setHSV( 0.04, 1, 0.7 * ( 0.5 + 0.5 * Math.cos( 35 * timer ) ) );
particleLight.position.x = Math.sin( timer * 7 ) * 300;
particleLight.position.y = Math.cos( timer * 5 ) * 400;
particleLight.position.z = Math.cos( timer * 3 ) * 300;
pointLight.position.x = particleLight.position.x;
pointLight.position.y = particleLight.position.y;
pointLight.position.z = particleLight.position.z;
renderer.render( scene, camera );
}
};
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials2.html
()=>{
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, objects;
var particleLight, pointLight;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set( 0, 200, 0 );
scene = new THREE.Scene();
// Materials
var imgTexture2 = THREE.ImageUtils.loadTexture( "textures/planets/moon_1024.jpg" );
imgTexture2.wrapS = imgTexture2.wrapT = THREE.RepeatWrapping;
imgTexture2.anisotropy = 16;
var imgTexture = THREE.ImageUtils.loadTexture( "textures/lava/lavatile.jpg" );
imgTexture.repeat.set( 4, 2 );
imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;
imgTexture.anisotropy = 16;
var shininess = 50, specular = 0x333333, bumpScale = 1, shading = THREE.SmoothShading;
var materials = [];
materials.push( new THREE.MeshPhongMaterial( { map: imgTexture, bumpMap: imgTexture, bumpScale: bumpScale, color: 0xffffff, ambient: 0x777777, specular: specular, shininess: shininess, shading: shading } ) );
materials.push( new THREE.MeshPhongMaterial( { map: imgTexture, bumpMap: imgTexture, bumpScale: bumpScale, color: 0x00ff00, ambient: 0x777777, specular: specular, shininess: shininess, shading: shading } ) );
materials.push( new THREE.MeshPhongMaterial( { map: imgTexture, bumpMap: imgTexture, bumpScale: bumpScale, color: 0x00ff00, ambient: 0x007700, specular: specular, shininess: shininess, shading: shading } ) );
materials.push( new THREE.MeshPhongMaterial( { map: imgTexture, bumpMap: imgTexture, bumpScale: bumpScale, color: 0x000000, ambient: 0x00ff00, specular: specular, shininess: shininess, shading: shading } ) );
materials.push( new THREE.MeshLambertMaterial( { map: imgTexture, color: 0xffffff, ambient: 0x777777, shading: shading } ) );
materials.push( new THREE.MeshLambertMaterial( { map: imgTexture, color: 0xff0000, ambient: 0x777777, shading: shading } ) );
materials.push( new THREE.MeshLambertMaterial( { map: imgTexture, color: 0xff0000, ambient: 0x770000, shading: shading } ) );
materials.push( new THREE.MeshLambertMaterial( { map: imgTexture, color: 0x000000, ambient: 0xff0000, shading: shading } ) );
shininess = 15;
materials.push( new THREE.MeshPhongMaterial( { map: imgTexture2, bumpMap: imgTexture2, bumpScale: bumpScale, color: 0x000000, ambient: 0x000000, specular: 0xffaa00, shininess: shininess, metal: true, shading: shading } ) );
materials.push( new THREE.MeshPhongMaterial( { map: imgTexture2, bumpMap: imgTexture2, bumpScale: bumpScale, color: 0x000000, ambient: 0x000000, specular: 0xaaff00, shininess: shininess, metal: true, shading: shading } ) );
materials.push( new THREE.MeshPhongMaterial( { map: imgTexture2, bumpMap: imgTexture2, bumpScale: bumpScale, color: 0x000000, ambient: 0x000000, specular: 0x00ffaa, shininess: shininess, metal: true, shading: shading } ) );
materials.push( new THREE.MeshPhongMaterial( { map: imgTexture2, bumpMap: imgTexture2, bumpScale: bumpScale, color: 0x000000, ambient: 0x000000, specular: 0x00aaff, shininess: shininess, metal: true, shading: shading } ) );
// Spheres geometry
var geometry_smooth = new THREE.SphereGeometry( 70, 32, 16 );
var geometry_flat = new THREE.SphereGeometry( 70, 32, 16 );
objects = [];
var sphere, geometry, material;
for ( var i = 0, l = materials.length; i < l; i ++ ) {
material = materials[ i ];
geometry = material.shading == THREE.FlatShading ? geometry_flat : geometry_smooth;
sphere = new THREE.Mesh( geometry, material );
sphere.position.x = ( i % 4 ) * 200 - 200;
sphere.position.z = Math.floor( i / 4 ) * 200 - 200;
objects.push( sphere );
scene.add( sphere );
}
particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
scene.add( particleLight );
// Lights
scene.add( new THREE.AmbientLight( 0x444444 ) );
var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
directionalLight.position.set( 1, 1, 1 ).normalize();
scene.add( directionalLight );
pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
scene.add( pointLight );
particleLight.material.color = pointLight.color;
pointLight.position = particleLight.position;
//
renderer = new THREE.WebGLRenderer( { clearColor: 0x0a0a0a, clearAlpha: 1, antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = true;
container.appendChild( renderer.domElement );
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.physicallyBasedShading = true;
//
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var timer = Date.now() * 0.00025;
camera.position.x = Math.cos( timer ) * 800;
camera.position.z = Math.sin( timer ) * 800;
camera.lookAt( scene.position );
for ( var i = 0, l = objects.length; i < l; i ++ ) {
var object = objects[ i ];
object.rotation.y += 0.005;
}
particleLight.position.x = Math.sin( timer * 7 ) * 300;
particleLight.position.y = Math.cos( timer * 5 ) * 400;
particleLight.position.z = Math.cos( timer * 3 ) * 300;
renderer.render( scene, camera );
}
};
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_blending.html
()=>{
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var camera, scene, renderer;
var mesh;
init();
animate();
function init() {
// CAMERA
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 600;
// SCENE
scene = new THREE.Scene();
// BACKGROUND
var x = document.createElement( "canvas" );
var xc = x.getContext( "2d" );
x.width = x.height = 128;
xc.fillStyle = "#ddd";
xc.fillRect( 0, 0, 128, 128 );
xc.fillStyle = "#555";
xc.fillRect( 0, 0, 64, 64 );
xc.fillStyle = "#999";
xc.fillRect( 32, 32, 32, 32 );
xc.fillStyle = "#555";
xc.fillRect( 64, 64, 64, 64 );
xc.fillStyle = "#777";
xc.fillRect( 96, 96, 32, 32 );
var mapBg = new THREE.Texture( x );
mapBg.wrapS = mapBg.wrapT = THREE.RepeatWrapping;
mapBg.repeat.set( 128, 64 );
mapBg.needsUpdate = true;
/*
var mapBg = THREE.ImageUtils.loadTexture( "textures/disturb.jpg" );
mapBg.wrapS = mapBg.wrapT = THREE.RepeatWrapping;
mapBg.repeat.set( 8, 4 );
*/
var materialBg = new THREE.MeshBasicMaterial( { map: mapBg } );
var meshBg = new THREE.Mesh( new THREE.PlaneGeometry( 4000, 2000 ), materialBg );
meshBg.position.set( 0, 0, -1 );
scene.add( meshBg );
// OBJECTS
var blendings = [ "NoBlending", "NormalBlending", "AdditiveBlending", "SubtractiveBlending", "MultiplyBlending", "AdditiveAlphaBlending" ];
var map0 = THREE.ImageUtils.loadTexture( 'textures/ash_uvgrid01.jpg' );
var map1 = THREE.ImageUtils.loadTexture( 'textures/sprite0.jpg' );
var map2 = THREE.ImageUtils.loadTexture( 'textures/sprite0.png' );
var map3 = THREE.ImageUtils.loadTexture( 'textures/lensflare/lensflare0.png' );
var map4 = THREE.ImageUtils.loadTexture( 'textures/lensflare/lensflare0_alpha.png' );
var geo1 = new THREE.PlaneGeometry( 100, 100 );
var geo2 = new THREE.PlaneGeometry( 100, 25 );
addImageRow( map0, 300 );
addImageRow( map1, 150 );
addImageRow( map2, 0 );
addImageRow( map3, -150 );
addImageRow( map4, -300 );
function addImageRow( map, y ) {
for ( var i = 0; i < blendings.length; i ++ ) {
var blending = blendings[ i ];
var material = new THREE.MeshBasicMaterial( { map: map } );
material.transparent = true;
material.blending = THREE[ blending ];
var x = ( i - blendings.length / 2 ) * 110;
var z = 0;
var mesh = new THREE.Mesh( geo1, material );
mesh.position.set( x, y, z );
scene.add( mesh );
var mesh = new THREE.Mesh( geo2, generateLabelMaterial( blending.replace( "Blending", "" ) ) );
mesh.position.set( x, y - 75, z );
scene.add( mesh );
}
}
// RENDERER
renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1 } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// EVENTS
window.addEventListener( 'resize', onWindowResize, false );
}
//
function onWindowResize( event ) {
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
camera.updateProjectionMatrix();
}
function generateLabelMaterial( text ) {
var x = document.createElement( "canvas" );
var xc = x.getContext( "2d" );
x.width = 128;
x.height = 32;
xc.fillStyle = "rgba( 0, 0, 0, 0.95 )";
xc.fillRect( 0, 0, 128, 32 );
xc.fillStyle = "white";
xc.font = "12pt arial bold";
xc.fillText( text, 10, 22 );
var map = new THREE.Texture( x );
map.needsUpdate = true;
var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } );
return material;
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
};
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_blending_custom.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_bumpmap.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_bumpmap_skin.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cars.html
()=>{
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var STATS_ENABLED = false;
var CARS = {
"veyron": {
name: "Bugatti Veyron",
url: "obj/veyron/VeyronNoUv_bin.js",
author: 'Troyano',
init_rotation: [ 0, 0, 0 ],
scale: 5.5,
init_material: 4,
body_materials: [ 2 ],
object: null,
buttons: null,
materials: null,
mmap: null
},
"gallardo": {
name: "Lamborghini Gallardo",
url: "obj/gallardo/GallardoNoUv_bin.js",
author: 'machman_3d',
init_rotation: [ 0, 0, 0 ],
scale: 3.7,
init_material: 9,
body_materials: [ 3 ],
object: null,
buttons: null,
materials: null,
mmap: null
},
"f50": {
name: "Ferrari F50",
url: "obj/f50/F50NoUv_bin.js",
author: 'daniel sathya',
init_rotation: [ 0, 0, 0 ],
scale: 0.175,
init_material: 2,
body_materials: [ 3, 6, 7, 8, 9, 10, 23, 24 ],
object: null,
buttons: null,
materials: null,
mmap: null
},
"camaro": {
name: "Chevrolet Camaro",
url: "obj/camaro/CamaroNoUv_bin.js",
author: 'dskfnwn',
init_rotation: [ 0.0, 0.0, 0.0 /*0, 1, 0*/ ],
scale: 75,
init_material: 0,
body_materials: [ 0 ],
object: null,
buttons: null,
materials: null,
mmap: null
}
};
var container, stats;
var camera, scene, renderer;
var cameraCube, sceneCube;
var m, mi;
var directionalLight, pointLight;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var loader = new THREE.BinaryLoader( true );
document.body.appendChild( loader.statusDomElement );
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
// CAMERAS
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
cameraCube = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
// SCENE
scene = new THREE.Scene();
sceneCube = new THREE.Scene();
// LIGHTS
var ambient = new THREE.AmbientLight( 0x050505 );
scene.add( ambient );
directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
directionalLight.position.set( 2, 1.2, 10 ).normalize();
scene.add( directionalLight );
directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
directionalLight.position.set( -2, 1.2, -10 ).normalize();
scene.add( directionalLight );
pointLight = new THREE.PointLight( 0xffaa00, 2 );
pointLight.position.set( 2000, 1200, 10000 );
scene.add( pointLight );
// Skybox
var shader = THREE.ShaderLib[ "cube" ];
shader.uniforms[ "tCube" ].value = textureCube;
var material = new THREE.ShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
depthWrite: false,
side: THREE.BackSide
} ),
mesh = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100 ), material );
sceneCube.add( mesh );
//
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setFaceCulling( THREE.CullFaceNone );
renderer.autoClear = false;
container.appendChild( renderer.domElement );
if ( STATS_ENABLED ) {
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
}
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
var r = "textures/cube/Bridge2/";
var urls = [ r + "posx.jpg", r + "negx.jpg",
r + "posy.jpg", r + "negy.jpg",
r + "posz.jpg", r + "negz.jpg" ];
var textureCube = THREE.ImageUtils.loadTextureCube( urls );
textureCube.format = THREE.RGBFormat;
// common materials
var mlib = {
"Orange": new THREE.MeshLambertMaterial( { color: 0xff6600, ambient: 0xff2200, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ),
"Blue": new THREE.MeshLambertMaterial( { color: 0x001133, ambient: 0x001133, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ),
"Red": new THREE.MeshLambertMaterial( { color: 0x660000, ambient: 0x330000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ),
"Black": new THREE.MeshLambertMaterial( { color: 0x000000, ambient: 0x000000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.15 } ),
"White": new THREE.MeshLambertMaterial( { color: 0xffffff, ambient: 0x666666, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ),
"Carmine": new THREE.MeshPhongMaterial( { color: 0x770000, specular:0xffaaaa, envMap: textureCube, combine: THREE.MultiplyOperation } ),
"Gold": new THREE.MeshPhongMaterial( { color: 0xaa9944, specular:0xbbaa99, shininess:50, envMap: textureCube, combine: THREE.MultiplyOperation } ),
"Bronze": new THREE.MeshPhongMaterial( { color: 0x150505, specular:0xee6600, shininess:10, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ),
"Chrome": new THREE.MeshPhongMaterial( { color: 0xffffff, specular:0xffffff, envMap: textureCube, combine: THREE.MultiplyOperation } ),
"Orange metal": new THREE.MeshLambertMaterial( { color: 0xff6600, ambient: 0xff2200, envMap: textureCube, combine: THREE.MultiplyOperation } ),
"Blue metal": new THREE.MeshLambertMaterial( { color: 0x001133, ambient: 0x002266, envMap: textureCube, combine: THREE.MultiplyOperation } ),
"Red metal": new THREE.MeshLambertMaterial( { color: 0x770000, envMap: textureCube, combine: THREE.MultiplyOperation } ),
"Green metal": new THREE.MeshLambertMaterial( { color: 0x007711, envMap: textureCube, combine: THREE.MultiplyOperation } ),
"Black metal": new THREE.MeshLambertMaterial( { color: 0x222222, envMap: textureCube, combine: THREE.MultiplyOperation } ),
"Pure chrome": new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: textureCube } ),
"Dark chrome": new THREE.MeshLambertMaterial( { color: 0x444444, envMap: textureCube } ),
"Darker chrome":new THREE.MeshLambertMaterial( { color: 0x222222, envMap: textureCube } ),
"Black glass": new THREE.MeshLambertMaterial( { color: 0x101016, envMap: textureCube, opacity: 0.975, transparent: true } ),
"Dark glass": new THREE.MeshLambertMaterial( { color: 0x101046, envMap: textureCube, opacity: 0.25, transparent: true } ),
"Blue glass": new THREE.MeshLambertMaterial( { color: 0x668899, envMap: textureCube, opacity: 0.75, transparent: true } ),
"Light glass": new THREE.MeshBasicMaterial( { color: 0x223344, envMap: textureCube, opacity: 0.25, transparent: true, combine: THREE.MixOperation, reflectivity: 0.25 } ),
"Red glass": new THREE.MeshLambertMaterial( { color: 0xff0000, opacity: 0.75, transparent: true } ),
"Yellow glass": new THREE.MeshLambertMaterial( { color: 0xffffaa, opacity: 0.75, transparent: true } ),
"Orange glass": new THREE.MeshLambertMaterial( { color: 0x995500, opacity: 0.75, transparent: true } ),
"Orange glass 50": new THREE.MeshLambertMaterial( { color: 0xffbb00, opacity: 0.5, transparent: true } ),
"Red glass 50": new THREE.MeshLambertMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } ),
"Fullblack rough": new THREE.MeshLambertMaterial( { color: 0x000000 } ),
"Black rough": new THREE.MeshLambertMaterial( { color: 0x050505 } ),
"Darkgray rough": new THREE.MeshLambertMaterial( { color: 0x090909 } ),
"Red rough": new THREE.MeshLambertMaterial( { color: 0x330500 } ),
"Darkgray shiny": new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x050505 } ),
"Gray shiny": new THREE.MeshPhongMaterial( { color: 0x050505, shininess: 20 } )
}
// Gallardo materials
CARS[ "gallardo" ].materials = {
body: [
[ "Orange", mlib[ "Orange" ] ],
[ "Blue", mlib[ "Blue" ] ],
[ "Red", mlib[ "Red" ] ],
[ "Black", mlib[ "Black" ] ],
[ "White", mlib[ "White" ] ],
[ "Orange metal", mlib[ "Orange metal" ] ],
[ "Blue metal", mlib[ "Blue metal" ] ],
[ "Green metal", mlib[ "Green metal" ] ],
[ "Black metal", mlib[ "Black metal" ] ],
[ "Carmine", mlib[ "Carmine" ] ],
[ "Gold", mlib[ "Gold" ] ],
[ "Bronze", mlib[ "Bronze" ] ],
[ "Chrome", mlib[ "Chrome" ] ]
]
}
m = CARS[ "gallardo" ].materials;
mi = CARS[ "gallardo" ].init_material;
CARS[ "gallardo" ].mmap = {
0: mlib[ "Pure chrome" ], // wheels chrome
1: mlib[ "Black rough" ], // tire
2: mlib[ "Black glass" ], // windshield
3: m.body[ mi ][ 1 ], // body
4: mlib[ "Red glass" ], // back lights
5: mlib[ "Yellow glass" ], // front lights
6: mlib[ "Dark chrome" ] // windshield rim
}
// Veyron materials
CARS[ "veyron" ].materials = {
body: [
[ "Orange metal", mlib[ "Orange metal" ] ],
[ "Blue metal", mlib[ "Blue metal" ] ],
[ "Red metal", mlib[ "Red metal" ] ],
[ "Green metal", mlib[ "Green metal" ] ],
[ "Black metal", mlib[ "Black metal" ] ],
[ "Gold", mlib[ "Gold" ] ],
[ "Bronze", mlib[ "Bronze" ] ],
[ "Chrome", mlib[ "Chrome" ] ]
],
}
m = CARS[ "veyron" ].materials;
mi = CARS[ "veyron" ].init_material;
CARS[ "veyron" ].mmap = {
0: mlib[ "Black rough" ], // tires + inside
1: mlib[ "Pure chrome" ], // wheels + extras chrome
2: m.body[ mi ][ 1 ], // back / top / front torso
3: mlib[ "Dark glass" ], // glass
4: mlib[ "Pure chrome" ], // sides torso
5: mlib[ "Pure chrome" ], // engine
6: mlib[ "Red glass 50" ], // backlights
7: mlib[ "Orange glass 50" ] // backsignals
}
// F50 materials
CARS[ "f50" ].materials = {
body: [
[ "Orange", mlib[ "Orange" ] ],
[ "Blue", mlib[ "Blue" ] ],
[ "Red", mlib[ "Red" ] ],
[ "Black", mlib[ "Black" ] ],
[ "White", mlib[ "White" ] ],
[ "Orange metal", mlib[ "Orange metal" ] ],
[ "Blue metal", mlib[ "Blue metal" ] ],
[ "Black metal", mlib[ "Black metal" ] ],
[ "Carmine", mlib[ "Carmine" ] ],
[ "Gold", mlib[ "Gold" ] ],
[ "Bronze", mlib[ "Bronze" ] ],
[ "Chrome", mlib[ "Chrome" ] ]
],
}
m = CARS[ "f50" ].materials;
mi = CARS[ "f50" ].init_material;
CARS[ "f50" ].mmap = {
0: mlib[ "Dark chrome" ], // interior + rim
1: mlib[ "Pure chrome" ], // wheels + gears chrome
2: mlib[ "Blue glass" ], // glass
3: m.body[ mi ][ 1 ], // torso mid + front spoiler
4: mlib[ "Darkgray shiny" ], // interior + behind seats
5: mlib[ "Darkgray shiny" ], // tiny dots in interior
6: m.body[ mi ][ 1 ], // back torso
7: m.body[ mi ][ 1 ], // right mirror decal
8: m.body[ mi ][ 1 ], // front decal
9: m.body[ mi ][ 1 ], // front torso
10: m.body[ mi ][ 1 ], // left mirror decal
11: mlib[ "Pure chrome" ], // engine
12: mlib[ "Darkgray rough" ], // tires side
13: mlib[ "Darkgray rough" ], // tires bottom
14: mlib[ "Darkgray shiny" ], // bottom
15: mlib[ "Black rough" ], // ???
16: mlib[ "Orange glass" ], // front signals
17: mlib[ "Dark chrome" ], // wheels center
18: mlib[ "Red glass" ], // back lights
19: mlib[ "Black rough" ], // ???
20: mlib[ "Red rough" ], // seats
21: mlib[ "Black rough" ], // back plate
22: mlib[ "Black rough" ], // front light dots
23: m.body[ mi ][ 1 ], // back torso
24: m.body[ mi ][ 1 ] // back torso center
}
// Camero materials
CARS[ "camaro" ].materials = {
body: [
[ "Orange", mlib[ "Orange" ] ],
[ "Blue", mlib[ "Blue" ] ],
[ "Red", mlib[ "Red" ] ],
[ "Black", mlib[ "Black" ] ],
[ "White", mlib[ "White" ] ],
[ "Orange metal", mlib[ "Orange metal" ] ],
[ "Blue metal", mlib[ "Blue metal" ] ],
[ "Red metal", mlib[ "Red metal" ] ],
[ "Green metal", mlib[ "Green metal" ] ],
[ "Black metal", mlib[ "Black metal" ] ],
[ "Gold", mlib[ "Gold" ] ],
[ "Bronze", mlib[ "Bronze" ] ],
[ "Chrome", mlib[ "Chrome" ] ]
],
}
m = CARS[ "camaro" ].materials;
mi = CARS[ "camaro" ].init_material;
CARS[ "camaro" ].mmap = {
0: m.body[ mi ][ 1 ], // car body
1: mlib[ "Pure chrome" ], // wheels chrome
2: mlib[ "Pure chrome" ], // grille chrome
3: mlib[ "Dark chrome" ], // door lines
4: mlib[ "Light glass" ], // windshield
5: mlib[ "Gray shiny" ], // interior
6: mlib[ "Black rough" ], // tire
7: mlib[ "Fullblack rough" ], // tireling
8: mlib[ "Fullblack rough" ] // behind grille
}
loader.load( CARS[ "veyron" ].url, function( geometry ) { createScene( geometry, "veyron" ) } );
for( var c in CARS ) initCarButton( c );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
cameraCube.aspect = window.innerWidth / window.innerHeight;
cameraCube.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function initCarButton( car ) {
$( car ).addEventListener( 'click', function() {
if ( ! CARS[ car ].object ) {
loader.statusDomElement.style.display = "block";
loader.load( CARS[ car ].url, function( geometry ) { createScene( geometry, car ) } );
} else {
switchCar( car );
}
}, false );
}
function $( id ) { return document.getElementById( id ) }
function button_name( car, index ) { return "m_" + car + "_" + index }
function switchCar( car ) {
for ( var c in CARS ) {
if ( c != car && CARS[ c ].object ) {
CARS[ c ].object.visible = false;
CARS[ c ].buttons.style.display = "none";
}
}
CARS[ car ].object.visible = true;
CARS[ car ].buttons.style.display = "block";
$( "car_name" ).innerHTML = CARS[ car ].name + " model";
$( "car_author" ).innerHTML = CARS[ car ].author;
}
function createButtons( materials, car ) {
var buttons, i, src = "";
for( i = 0; i < materials.length; i ++ ) {
src += ' ';
}
buttons = document.createElement( "div" );
buttons.innerHTML = src;
$( "buttons_materials" ).appendChild( buttons );
return buttons;
}
function attachButtonMaterials( materials, faceMaterial, material_indices, car ) {
for( var i = 0; i < materials.length; i ++ ) {
$( button_name( car, i ) )["counter"] = i;
$( button_name( car, i ) ).addEventListener( 'click', function() {
for ( var j = 0; j < material_indices.length; j ++ ) {
faceMaterial.materials[ material_indices [ j ] ] = materials[ this.counter ][ 1 ];
}
}, false );
}
}
function createScene( geometry, car ) {
loader.statusDomElement.innerHTML = "Creating model ...";
var m = new THREE.MeshFaceMaterial(),
s = CARS[ car ].scale * 1,
r = CARS[ car ].init_rotation,
materials = CARS[ car ].materials,
mi = CARS[ car ].init_material,
bm = CARS[ car ].body_materials;
for ( var i in CARS[ car ].mmap ) {
m.materials[ i ] = CARS[ car ].mmap[ i ];
}
var mesh = new THREE.Mesh( geometry, m );
mesh.rotation.x = r[ 0 ];
mesh.rotation.y = r[ 1 ];
mesh.rotation.z = r[ 2 ];
mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
scene.add( mesh );
CARS[ car ].object = mesh;
CARS[ car ].buttons = createButtons( materials.body, car );
attachButtonMaterials( materials.body, m, bm, car );
switchCar( car );
loader.statusDomElement.style.display = "none";
loader.statusDomElement.innerHTML = "Loading model ...";
}
function onDocumentMouseMove(event) {
mouseY = ( event.clientY - window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var timer = -0.0002 * Date.now();
camera.position.x = 1000 * Math.cos( timer );
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.position.z = 1000 * Math.sin( timer );
camera.lookAt( scene.position );
cameraCube.rotation.copy( camera.rotation );
renderer.render( sceneCube, cameraCube );
renderer.render( scene, camera );
if ( STATS_ENABLED ) stats.update();
}
};
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cars_anaglyph.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cars_camaro.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cars_camaro_crosseyed.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cars_parallaxbarrier.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cubemap.html
()=>{
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer;
var cameraCube, sceneCube;
var mesh, lightMesh, geometry;
var loader;
var directionalLight, pointLight;
var mouseX = 0;
var mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
document.addEventListener('mousemove', onDocumentMouseMove, false);
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
camera.position.z = 2000;
cameraCube = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 100 );
scene = new THREE.Scene();
sceneCube = new THREE.Scene();
// LIGHTS
var ambient = new THREE.AmbientLight( 0xffffff );
scene.add( ambient );
pointLight = new THREE.PointLight( 0xffffff, 2 );
scene.add( pointLight );
// light representation
var sphere = new THREE.SphereGeometry( 100, 16, 8 );
lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
lightMesh.position = pointLight.position;
lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
scene.add( lightMesh );
var path = "textures/cube/SwedishRoyalCastle/";
var format = '.jpg';
var urls = [
path + 'px' + format, path + 'nx' + format,
path + 'py' + format, path + 'ny' + format,
path + 'pz' + format, path + 'nz' + format
];
var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
reflectionCube.format = THREE.RGBFormat;
var refractionCube = new THREE.Texture( reflectionCube.image, new THREE.CubeRefractionMapping() );
refractionCube.format = THREE.RGBFormat;
//var cubeMaterial3 = new THREE.MeshPhongMaterial( { color: 0x000000, specular:0xaa0000, envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.25 } );
var cubeMaterial3 = new THREE.MeshLambertMaterial( { color: 0xff6600, ambient: 0x993300, envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.3 } );
var cubeMaterial2 = new THREE.MeshLambertMaterial( { color: 0xffee00, ambient: 0x996600, envMap: refractionCube, refractionRatio: 0.95 } );
var cubeMaterial1 = new THREE.MeshLambertMaterial( { color: 0xffffff, ambient: 0xaaaaaa, envMap: reflectionCube } )
// Skybox
var shader = THREE.ShaderLib[ "cube" ];
shader.uniforms[ "tCube" ].value = reflectionCube;
var material = new THREE.ShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
depthWrite: false,
side: THREE.BackSide
} ),
mesh = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100 ), material );
sceneCube.add( mesh );
//
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClear = false;
container.appendChild( renderer.domElement );
//
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
//
loader = new THREE.BinaryLoader( true );
document.body.appendChild( loader.statusDomElement );
loader.load( "obj/walt/WaltHead_bin.js", function( geometry ) { createScene( geometry, cubeMaterial1, cubeMaterial2, cubeMaterial3 ) } );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
cameraCube.aspect = window.innerWidth / window.innerHeight;
cameraCube.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function createScene( geometry, m1, m2, m3 ) {
var s = 15;
var mesh = new THREE.Mesh( geometry, m1 );
mesh.position.z = - 100;
mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
scene.add( mesh );
var mesh = new THREE.Mesh( geometry, m2 );
mesh.position.x = - 900;
mesh.position.z = - 100;
mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
scene.add( mesh );
var mesh = new THREE.Mesh( geometry, m3 );
mesh.position.x = 900;
mesh.position.z = - 100;
mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
scene.add( mesh );
loader.statusDomElement.style.display = "none";
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX ) * 4;
mouseY = ( event.clientY - windowHalfY ) * 4;
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var timer = -0.0002 * Date.now();
lightMesh.position.x = 1500 * Math.cos( timer );
lightMesh.position.z = 1500 * Math.sin( timer );
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position );
cameraCube.rotation.copy( camera.rotation );
renderer.render( sceneCube, cameraCube );
renderer.render( scene, camera );
}
};
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cubemap_balls_reflection.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cubemap_balls_reflection_anaglyph.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cubemap_balls_refraction.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cubemap_balls_refraction_crosseyed.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cubemap_dynamic.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cubemap_dynamic2.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cubemap_escher.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_cubemap_refraction.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_grass.html
()=>{
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var camera, scene, renderer,
mesh, levels = [];
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 75, 100 );
scene = new THREE.Scene();
var geometry = new THREE.PlaneGeometry( 100, 100 );
var bitmap = generateTextureBase();
for ( var i = 0; i < 15; i ++ ) {
mesh = levels[ i ] = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: new THREE.Texture( generateTextureLevel( bitmap ) ), transparent: true, depthWrite: false, depthTest: false } ) );
mesh.material.map.needsUpdate = true;
mesh.position.y = i * 0.25;
mesh.rotation.x = - Math.PI / 2;
scene.add( mesh );
}
renderer = new THREE.WebGLRenderer();
renderer.sortObjects = false;
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function generateTextureBase() {
var canvas = document.createElement( 'canvas' );
canvas.width = 512;
canvas.height = 512;
var context = canvas.getContext( '2d' );
for ( var i = 0; i < 20000; i ++ ) {
context.fillStyle = 'rgba(0,' + Math.floor( Math.random() * 64 + 32 ) + ',16,1)';
context.beginPath();
context.arc( Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 1 + 0.5, 0, Math.PI * 2, true );
context.closePath();
context.fill();
}
context.globalAlpha = 0.075;
context.globalCompositeOperation = 'lighter';
return canvas;
}
function generateTextureLevel( texture ) {
texture.getContext( '2d' ).drawImage( texture, 0, 0 );
var canvas = document.createElement( 'canvas' );
canvas.width = texture.width;
canvas.height = texture.height;
canvas.getContext( '2d' ).drawImage( texture, 0, 0 );
return canvas;
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var time = Date.now() / 6000;
camera.position.x = 80 * Math.cos( time );
camera.position.z = 80 * Math.sin( time );
camera.lookAt( scene.position );
for ( var i = 0, l = levels.length; i < l; i ++ ) {
mesh = levels[ i ];
mesh.position.x = Math.sin( time * 4 ) * i * i * 0.005;
mesh.position.z = Math.cos( time * 6 ) * i * i * 0.005;
}
renderer.render( scene, camera );
}
};
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_lightmap.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_normalmap.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_normalmap2.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_shaders.html
()=>{
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var FLOOR = -250;
var container, stats;
var camera, scene, canvasRenderer, webglRenderer;
var mesh, zmesh, lightMesh, geometry;
var directionalLight, pointLight;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var render_canvas = false, render_gl = true;
var has_gl = false;
var bcanvas = document.getElementById( "rcanvas" );
var bwebgl = document.getElementById( "rwebgl" );
init();
animate();
render_canvas = !has_gl;
bwebgl.style.display = has_gl ? "inline" : "none";
bcanvas.className = render_canvas ? "button" : "button inactive";
function addMesh( geometry, scale, x, y, z, rx, ry, rz, material ) {
mesh = new THREE.Mesh( geometry, material );
mesh.scale.set( scale, scale, scale );
mesh.position.set( x, y, z );
mesh.rotation.set( rx, ry, rz );
scene.add( mesh );
}
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
camera.position.z = 1000;
scene = new THREE.Scene();
// LIGHTS
var ambient = new THREE.AmbientLight( 0x101010 );
scene.add( ambient );
directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 1, 1, 2 ).normalize();
scene.add( directionalLight );
pointLight = new THREE.PointLight( 0xffffff );
scene.add( pointLight );
// light representation
var sphere = new THREE.SphereGeometry( 100, 16, 8 );
lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
lightMesh.scale.set( 0.05, 0.05, 0.05 );
lightMesh.position = pointLight.position;
scene.add( lightMesh );
// material samples
sphere = new THREE.SphereGeometry( 100, 32, 32 );
var y1 = 0, y2 = - 200;
addMesh( sphere, 1, -600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x000000, specular: 0x555555, shininess: 30 } ) );
addMesh( sphere, 1, -600, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0x050505 } ) );
addMesh( sphere, 1, -400, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0xffffff, specular: 0x555555, shininess: 30 } ) );
addMesh( sphere, 1, -400, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0xffffff } ) );
addMesh( sphere, 1, -200, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0xff5500, specular: 0x555555, shininess: 10 } ) );
addMesh( sphere, 1, -200, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0xff5500 } ) );
addMesh( sphere, 1, 0, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0xffaa00, specular: 0x555555, shininess: 30 } ) );
addMesh( sphere, 1, 0, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0xffaa00 } ) );
addMesh( sphere, 1, 200, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0x55ff00, specular: 0x555555, shininess: 30 } ) );
addMesh( sphere, 1, 200, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0x55ff00 } ) );
addMesh( sphere, 1, 400, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0x0055ff, specular: 0x555555, shininess: 30 } ) );
addMesh( sphere, 1, 400, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0x0055ff } ) );
addMesh( sphere, 1, 600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0x5500ff, specular: 0x555555, shininess: 30 } ) );
addMesh( sphere, 1, 600, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { color: 0x5500ff } ) );
addToruses( new THREE.TorusGeometry( 100, 20, 32, 32 ) );
//
if ( render_gl ) {
try {
webglRenderer = new THREE.WebGLRenderer();
webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
webglRenderer.domElement.style.position = "relative";
container.appendChild( webglRenderer.domElement );
has_gl = true;
} catch (e) {
}
}
canvasRenderer = new THREE.CanvasRenderer();
canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild( canvasRenderer.domElement );
//
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
bcanvas.addEventListener("click", toggleCanvas, false);
bwebgl.addEventListener("click", toggleWebGL, false);
document.addEventListener('mousemove', onDocumentMouseMove, false);
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
if ( webglRenderer ) webglRenderer.setSize( window.innerWidth, window.innerHeight );
if ( canvasRenderer ) canvasRenderer.setSize( window.innerWidth, window.innerHeight );
}
function addToruses( geometry ) {
var s = 0.85, t = s + 100, y = 200, rx = 0;
addMesh( geometry, s, -6*t, y, 0, rx,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, color: 0x000000, specular: 0x333333, shininess: 10 } ) );
addMesh( geometry, s, -4*t, y, 0, rx,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x888888, specular: 0x333333, shininess: 10 } ) );
addMesh( geometry, s, -2*t, y, 0, rx,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0xff5500, shininess: 10 } ) );
addMesh( geometry, s, 0, y, 0, rx,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0xffaa00, shininess: 10 } ) );
addMesh( geometry, s, 2*t, y, 0, rx,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0x55ff00, shininess: 10 } ) );
addMesh( geometry, s, 4*t, y, 0, rx,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0x0055ff, shininess: 10 } ) );
addMesh( geometry, s, 6*t, y, 0, rx,0,0, new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0x030303, specular: 0x5500ff, shininess: 10 } ) );
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var timer = -0.0002 * Date.now();
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position );
lightMesh.position.x = 700 * Math.cos( timer );
lightMesh.position.z = 700 * Math.sin( timer );
if ( render_canvas ) canvasRenderer.render( scene, camera );
if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
}
function toggleCanvas() {
render_canvas = !render_canvas;
bcanvas.className = render_canvas ? "button" : "button inactive";
render_gl = !render_canvas;
bwebgl.className = render_gl ? "button" : "button inactive";
if( has_gl )
webglRenderer.domElement.style.display = render_gl ? "block" : "none";
canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
}
function toggleWebGL() {
render_gl = !render_gl;
bwebgl.className = render_gl ? "button" : "button inactive";
render_canvas = !render_gl;
bcanvas.className = render_canvas ? "button" : "button inactive";
if( has_gl )
webglRenderer.domElement.style.display = render_gl ? "block" : "none";
canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
}
};
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_shaders_fresnel.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_skin.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_texture_anisotropy.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_texture_compressed.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_texture_filters.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_texture_manualmipmap.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_video.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_materials_wireframe.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_morphnormals.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_morphtargets.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_morphtargets_horse.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_morphtargets_md2.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_morphtargets_md2_control.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_multiple_canvases_circle.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_multiple_canvases_complex.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_multiple_canvases_grid.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_multiple_views.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_panorama_equirectangular.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_particles_billboards.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_particles_billboards_colors.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_particles_dynamic.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_particles_random.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_particles_shapes.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_particles_sprites.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_performance.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_performance_doublesided.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_performance_static.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_postprocessing.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_postprocessing2.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_postprocessing_advanced.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_postprocessing_dof.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_postprocessing_godrays.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_ribbons.html
()=>{
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, ribbon, geometry, geometry2, ribbons = [],
parameters, i, i2, h, color, x, y, z, z2, s, n, n2, nribbons, grid;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var postprocessing = { enabled : true };
var composer;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 3000 );
camera.position.z = 1200;
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0x000000, 0.0016 );
geometry = new THREE.Geometry();
geometry2 = new THREE.Geometry();
n = 1000;
n2 = 2 * n;
for ( i = -n; i < n; i++ ) {
i2 = i + n;
x = i * 1.175;
y = ( i2 % 2 ) * 5;
if ( i2 % 2 ) {
z = 10 * Math.sin( i2 * 0.3 ) * Math.cos( i2 * 0.1 );
}
geometry.vertices.push( new THREE.Vector3( x, y, z ) );
geometry2.vertices.push( new THREE.Vector3( x, y, z ) );
h = i2 % 2 ? 1 : 0.15;
if( i2 % 4 <= 2 ) h -= 0.15;
color = new THREE.Color( 0xffffff );
color.setHSL( 0.1, 0, h );
geometry.colors.push( color );
geometry2.colors.push( color );
}
//
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClear = false;
renderer.setClearColor( scene.fog.color, 1 );
container.appendChild( renderer.domElement );
//
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
//
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
//
var renderModel = new THREE.RenderPass( scene, camera );
var effectBloom = new THREE.BloomPass( 1.0 );
var effectCopy = new THREE.ShaderPass( THREE.CopyShader );
effectCopy.renderToScreen = true;
composer = new THREE.EffectComposer( renderer );
composer.addPass( renderModel );
composer.addPass( effectBloom );
composer.addPass( effectCopy );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
composer.reset();
}
function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function onDocumentTouchStart( event ) {
if ( event.touches.length === 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function onDocumentTouchMove( event ) {
if ( event.touches.length === 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var time = Date.now() * 0.00005;
camera.position.x += ( mouseX - camera.position.x ) * 0.036;
camera.position.y += ( - mouseY - camera.position.y ) * 0.036;
camera.lookAt( scene.position );
for ( i = -n; i < n; i ++ ) {
i2 = i + n;
z = 10 * Math.sin( i2 * 0.1 + time*30 );
z2 = 20 * Math.cos( Math.sin( i2 * 0.1 + time * 20 ) );
geometry.vertices[ i2 ].z = z;
geometry2.vertices[ i2 ].z = z2;
}
geometry.verticesNeedUpdate = true;
geometry2.verticesNeedUpdate = true;
for ( i = 0; i < nribbons; i++ ) {
h = ( 360 * ( i / nribbons + time ) % 360 ) / 360;
ribbons[ i ].material.color.setHSL( h, ( i % 20 / 20 ) * 0.3 + 0.7, 0.6 );
}
renderer.clear();
composer.render( 0.1 );
}
};
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_rtt.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_sandbox.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_shader.html
()=>{
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer;
var uniforms, material, mesh;
var mouseX = 0, mouseY = 0,
lat = 0, lon = 0, phy = 0, theta = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.getElementById( 'container' );
camera = new THREE.Camera();
camera.position.z = 1;
scene = new THREE.Scene();
uniforms = {
time: { type: "f", value: 1.0 },
resolution: { type: "v2", value: new THREE.Vector2() }
};
material = new THREE.ShaderMaterial( {
uniforms: uniforms,
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} );
mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
onWindowResize();
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize( event? ) {
uniforms.resolution.value.x = window.innerWidth;
uniforms.resolution.value.y = window.innerHeight;
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
uniforms.time.value += 0.05;
renderer.render( scene, camera );
}
};
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_shader2.html
()=>{
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var start_time;
var camera, scene, renderer;
var uniforms1, uniforms2, material1, material2, mesh, meshes = [];
var mouseX = 0, mouseY = 0,
lat = 0, lon = 0, phy = 0, theta = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var clock = new THREE.Clock();
init();
animate();
function init() {
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 40, windowHalfX / windowHalfY, 1, 3000 );
camera.position.z = 4;
scene = new THREE.Scene();
start_time = Date.now();
uniforms1 = {
time: { type: "f", value: 1.0 },
resolution: { type: "v2", value: new THREE.Vector2() }
};
uniforms2 = {
time: { type: "f", value: 1.0 },
resolution: { type: "v2", value: new THREE.Vector2() },
texture: { type: "t", value: THREE.ImageUtils.loadTexture( "textures/disturb.jpg" ) }
};
uniforms2.texture.value.wrapS = uniforms2.texture.value.wrapT = THREE.RepeatWrapping;
var size = 0.75, mlib = [],
params = [ [ 'fragment_shader1', uniforms1 ], [ 'fragment_shader2', uniforms2 ], [ 'fragment_shader3', uniforms1 ], [ 'fragment_shader4', uniforms1 ] ];
for( var i = 0; i < params.length; i++ ) {
var material = new THREE.ShaderMaterial( {
uniforms: params[ i ][ 1 ],
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( params[ i ][ 0 ] ).textContent
} );
mlib[ i ] = material;
mesh = new THREE.Mesh( new THREE.CubeGeometry( size, size, size ), new THREE.MeshFaceMaterial( [ mlib[ i ], mlib[ i ], mlib[ i ], mlib[ i ], mlib[ i ], mlib[ i ] ] ) );
mesh.position.x = i - ( params.length - 1 ) / 2;
mesh.position.y = i % 2 - 0.5;
scene.add( mesh );
meshes[ i ] = mesh;
}
renderer = new THREE.WebGLRenderer();
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
onWindowResize();
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize( event? ) {
uniforms1.resolution.value.x = window.innerWidth;
uniforms1.resolution.value.y = window.innerHeight;
uniforms2.resolution.value.x = window.innerWidth;
uniforms2.resolution.value.y = window.innerHeight;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var delta = clock.getDelta();
uniforms1.time.value += delta * 5;
uniforms2.time.value = clock.elapsedTime;
for( var i = 0; i < meshes.length; ++ i ) {
meshes[ i ].rotation.y += delta * 0.5 * ( i % 2 ? 1 : -1 );
meshes[ i ].rotation.x += delta * 0.5 * ( i % 2 ? -1 : 1 );
}
renderer.render( scene, camera );
}
};
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_shader_lava.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_shading_physical.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_shadowmap.html
()=>{
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 1024;
var MARGIN = 100;
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
var FLOOR = -250;
var camera, controls, scene, renderer;
var container, stats;
var NEAR = 5, FAR = 3000;
var sceneHUD, cameraOrtho, hudMaterial;
var morph, morphs = [];
var light;
var clock = new THREE.Clock();
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
// SCENE CAMERA
camera = new THREE.PerspectiveCamera( 23, SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR );
camera.position.set( 700, 50, 1900 );
controls = new THREE.FirstPersonControls( camera );
controls.lookSpeed = 0.0125;
controls.movementSpeed = 500;
controls.noFly = false;
controls.lookVertical = true;
controls.constrainVertical = true;
controls.verticalMin = 1.5;
controls.verticalMax = 2.0;
controls.lon = -110;
// SCENE
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x59472b, 1000, FAR );
// LIGHTS
var ambient = new THREE.AmbientLight( 0x444444 );
scene.add( ambient );
light = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI, 1 );
light.position.set( 0, 1500, 1000 );
light.target.position.set( 0, 0, 0 );
light.castShadow = true;
light.shadowCameraNear = 700;
light.shadowCameraFar = camera.far;
light.shadowCameraFov = 50;
//light.shadowCameraVisible = true;
light.shadowBias = 0.0001;
light.shadowDarkness = 0.5;
light.shadowMapWidth = SHADOW_MAP_WIDTH;
light.shadowMapHeight = SHADOW_MAP_HEIGHT;
scene.add( light );
createHUD();
createScene();
// RENDERER
renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1, antialias: false } );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.domElement.style.position = "relative";
renderer.domElement.style.top = MARGIN + 'px';
container.appendChild( renderer.domElement );
renderer.setClearColor( scene.fog.color, 1 );
renderer.autoClear = false;
//
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFShadowMap;
// STATS
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() {
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
camera.updateProjectionMatrix();
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
controls.handleResize();
}
function createHUD() {
cameraOrtho = new THREE.OrthographicCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10, 1000 );
cameraOrtho.position.z = 10;
var shader = THREE.UnpackDepthRGBAShader;
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
hudMaterial = new THREE.ShaderMaterial( { vertexShader: shader.vertexShader, fragmentShader: shader.fragmentShader, uniforms: uniforms } );
var hudGeo = new THREE.PlaneGeometry( SHADOW_MAP_WIDTH / 2, SHADOW_MAP_HEIGHT / 2 );
var hudMesh = new THREE.Mesh( hudGeo, hudMaterial );
hudMesh.position.x = ( SCREEN_WIDTH - SHADOW_MAP_WIDTH / 2 ) * -0.5;
hudMesh.position.y = ( SCREEN_HEIGHT - SHADOW_MAP_HEIGHT / 2 ) * -0.5;
hudMesh.rotation.x = Math.PI / 2;
sceneHUD = new THREE.Scene();
sceneHUD.add( hudMesh );
cameraOrtho.lookAt( sceneHUD.position );
}
function createScene( ) {
// GROUND
var geometry = new THREE.PlaneGeometry( 100, 100 );
var planeMaterial = new THREE.MeshPhongMaterial( { color: 0xffdd99 } );
planeMaterial.ambient = planeMaterial.color;
var ground = new THREE.Mesh( geometry, planeMaterial );
ground.position.set( 0, FLOOR, 0 );
ground.rotation.x = - Math.PI / 2;
ground.scale.set( 100, 100, 100 );
ground.castShadow = false;
ground.receiveShadow = true;
scene.add( ground );
// TEXT
var textGeo = new THREE.TextGeometry( "THREE.JS", {
size: 200,
height: 50,
curveSegments: 12,
font: "helvetiker",
weight: "bold",
style: "normal",
bevelThickness: 2,
bevelSize: 5,
bevelEnabled: true
});
textGeo.computeBoundingBox();
var centerOffset = -0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff, ambient: 0xaa0000 } );
var mesh = new THREE.Mesh( textGeo, textMaterial );
mesh.position.x = centerOffset;
mesh.position.y = FLOOR + 67;
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
// CUBES
var mesh = new THREE.Mesh( new THREE.CubeGeometry( 1500, 220, 150 ), planeMaterial );
mesh.position.y = FLOOR - 50;
mesh.position.z = 20;
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
var mesh = new THREE.Mesh( new THREE.CubeGeometry( 1600, 170, 250 ), planeMaterial );
mesh.position.y = FLOOR - 50;
mesh.position.z = 20;
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
// MORPHS
function addMorph( geometry, speed, duration, x, y, z, fudgeColor ) {
var material = new THREE.MeshLambertMaterial( { color: 0xffaa55, morphTargets: true, vertexColors: THREE.FaceColors } );
if ( fudgeColor ) {
material.color.offsetHSL( 0, Math.random() * 0.5 - 0.25, Math.random() * 0.5 - 0.25 );
material.ambient = material.color;
}
var meshAnim = new THREE.MorphAnimMesh( geometry, material );
(meshAnim).speed = speed;
meshAnim.duration = duration;
meshAnim.time = 600 * Math.random();
meshAnim.position.set( x, y, z );
meshAnim.rotation.y = Math.PI/2;
meshAnim.castShadow = true;
meshAnim.receiveShadow = true;
scene.add( meshAnim );
morphs.push( meshAnim );
}
function morphColorsToFaceColors( geometry ) {
if ( geometry.morphColors && geometry.morphColors.length ) {
var colorMap = geometry.morphColors[ 0 ];
for ( var i = 0; i < colorMap.colors.length; i ++ ) {
geometry.faces[ i ].color = colorMap.colors[ i ];
}
}
}
var loader = new THREE.JSONLoader();
loader.load( "models/animated/horse.js", function( geometry ) {
morphColorsToFaceColors( geometry );
addMorph( geometry, 550, 1000, 100 - Math.random() * 1000, FLOOR, 300, true );
addMorph( geometry, 550, 1000, 100 - Math.random() * 1000, FLOOR, 450, true );
addMorph( geometry, 550, 1000, 100 - Math.random() * 1000, FLOOR, 600, true );
addMorph( geometry, 550, 1000, 100 - Math.random() * 1000, FLOOR, -300, true );
addMorph( geometry, 550, 1000, 100 - Math.random() * 1000, FLOOR, -450, true );
addMorph( geometry, 550, 1000, 100 - Math.random() * 1000, FLOOR, -600, true );
} );
/*
loader.load( "obj/morphs/fox.js", function( geometry ) {
morphColorsToFaceColors( geometry );
addMorph( geometry, 200, 1000, 100 - Math.random() * 500, FLOOR - 5, 600 );
} );
loader.load( "obj/morphs/shdw3walk.js", function( geometry ) {
morphColorsToFaceColors( geometry );
addMorph( geometry, 40, 2000, -500, FLOOR + 60, 245 );
} );
loader.load( "obj/morphs/flamingo.js", function( geometry ) {
morphColorsToFaceColors( geometry );
addMorph( geometry, 500, 1000, 500 - Math.random() * 500, FLOOR + 350, 40 );
} );
loader.load( "obj/morphs/stork.js", function( geometry ) {
morphColorsToFaceColors( geometry );
addMorph( geometry, 350, 1000, 500 - Math.random() * 500, FLOOR + 350, 340 );
} );
loader.load( "obj/morphs/mountainlion.js", function( geometry ) {
morphColorsToFaceColors( geometry );
addMorph( geometry, 400, 1000, 500 - Math.random() * 500, FLOOR - 5, 700 );
} );
loader.load( "obj/morphs/bearBrown.js", function( geometry ) {
morphColorsToFaceColors( geometry );
addMorph( geometry, 300, 2500, -500, FLOOR - 5, -750 );
} );
loader.load( "obj/morphs/parrot.js", function( geometry ) {
morphColorsToFaceColors( geometry );
addMorph( geometry, 450, 500, 500 - Math.random() * 500, FLOOR + 300, 700 );
} );
*/
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var delta = clock.getDelta();
for ( var i = 0; i < morphs.length; i ++ ) {
morph = morphs[ i ];
morph.updateAnimation( 1000 * delta );
morph.position.x += morph.speed * delta;
if ( morph.position.x > 2000 ) {
morph.position.x = -1000 - Math.random() * 500;
}
}
controls.update( delta );
renderer.clear();
renderer.render( scene, camera );
// Render debug HUD with shadow map
//hudMaterial.uniforms.tDiffuse.texture = light.shadowMap;
//renderer.render( sceneHUD, cameraOrtho );
}
};
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_shadowmap_performance.html
()=>{
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 1024;
var MARGIN = 100;
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
var FLOOR = -250;
var camera, controls, scene, renderer;
var container, stats;
var NEAR = 5, FAR = 3000;
var sceneHUD, cameraOrtho, hudMaterial;
var morph, morphs = [];
var light;
var clock = new THREE.Clock();
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
// SCENE CAMERA
camera = new THREE.PerspectiveCamera( 23, SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR );
camera.position.set( 700, 50, 1900 );
controls = new THREE.FirstPersonControls( camera );
controls.lookSpeed = 0.0125;
controls.movementSpeed = 500;
controls.noFly = false;
controls.lookVertical = true;
controls.constrainVertical = true;
controls.verticalMin = 1.5;
controls.verticalMax = 2.0;
controls.lon = -110;
// SCENE
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x59472b, 1000, FAR );
// LIGHTS
var ambient = new THREE.AmbientLight( 0x444444 );
scene.add( ambient );
light = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI, 1 );
light.position.set( 0, 1500, 1000 );
light.target.position.set( 0, 0, 0 );
light.castShadow = true;
light.shadowCameraNear = 700;
light.shadowCameraFar = camera.far;
light.shadowCameraFov = 50;
//light.shadowCameraVisible = true;
light.shadowBias = 0.0001;
light.shadowDarkness = 0.5;
light.shadowMapWidth = SHADOW_MAP_WIDTH;
light.shadowMapHeight = SHADOW_MAP_HEIGHT;
scene.add( light );
createHUD();
createScene();
// RENDERER
renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1, antialias: false } );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.domElement.style.position = "relative";
renderer.domElement.style.top = MARGIN + 'px';
container.appendChild( renderer.domElement );
renderer.setClearColor( scene.fog.color, 1 );
renderer.autoClear = false;
//
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
// STATS
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() {
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;
camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
camera.updateProjectionMatrix();
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
controls.handleResize();
}
function createHUD() {
cameraOrtho = new THREE.OrthographicCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10, 1000 );
cameraOrtho.position.z = 10;
var shader = THREE.UnpackDepthRGBAShader;
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
hudMaterial = new THREE.ShaderMaterial( { vertexShader: shader.vertexShader, fragmentShader: shader.fragmentShader, uniforms: uniforms } );
var hudGeo = new THREE.PlaneGeometry( SHADOW_MAP_WIDTH / 2, SHADOW_MAP_HEIGHT / 2 );
var hudMesh = new THREE.Mesh( hudGeo, hudMaterial );
hudMesh.position.x = ( SCREEN_WIDTH - SHADOW_MAP_WIDTH / 2 ) * -0.5;
hudMesh.position.y = ( SCREEN_HEIGHT - SHADOW_MAP_HEIGHT / 2 ) * -0.5;
hudMesh.rotation.x = Math.PI / 2;
sceneHUD = new THREE.Scene();
sceneHUD.add( hudMesh );
cameraOrtho.lookAt( sceneHUD.position );
}
function createScene( ) {
// GROUND
var geometry = new THREE.PlaneGeometry( 100, 100 );
var planeMaterial = new THREE.MeshPhongMaterial( { color: 0xffdd99 } );
planeMaterial.ambient = planeMaterial.color;
var ground = new THREE.Mesh( geometry, planeMaterial );
ground.position.set( 0, FLOOR, 0 );
ground.rotation.x = - Math.PI / 2;
ground.scale.set( 100, 100, 100 );
ground.castShadow = false;
ground.receiveShadow = true;
scene.add( ground );
// TEXT
var textGeo = new THREE.TextGeometry( "THREE.JS", {
size: 200,
height: 50,
curveSegments: 12,
font: "helvetiker",
weight: "bold",
style: "normal",
bevelThickness: 2,
bevelSize: 5,
bevelEnabled: true
});
textGeo.computeBoundingBox();
var centerOffset = -0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff, ambient: 0xaa0000 } );
var mesh = new THREE.Mesh( textGeo, textMaterial );
mesh.position.x = centerOffset;
mesh.position.y = FLOOR + 67;
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
// CUBES
var mesh = new THREE.Mesh( new THREE.CubeGeometry( 1500, 220, 150 ), planeMaterial );
mesh.position.y = FLOOR - 50;
mesh.position.z = 20;
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
var mesh = new THREE.Mesh( new THREE.CubeGeometry( 1600, 170, 250 ), planeMaterial );
mesh.position.y = FLOOR - 50;
mesh.position.z = 20;
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
// MORPHS
function addMorph( geometry, speed, duration, x, y, z, fudgeColor ) {
var material = new THREE.MeshLambertMaterial( { color: 0xffaa55, morphTargets: true, vertexColors: THREE.FaceColors } );
if ( fudgeColor ) {
material.color.offsetHSL( 0, Math.random() * 0.5 - 0.25, Math.random() * 0.5 - 0.25 );
material.ambient = material.color;
}
var meshAnim = new THREE.MorphAnimMesh( geometry, material );
(meshAnim).speed = speed;
meshAnim.duration = duration;
meshAnim.time = 600 * Math.random();
meshAnim.position.set( x, y, z );
meshAnim.rotation.y = Math.PI/2;
meshAnim.castShadow = true;
meshAnim.receiveShadow = true;
scene.add( meshAnim );
morphs.push( meshAnim );
}
function morphColorsToFaceColors( geometry ) {
if ( geometry.morphColors && geometry.morphColors.length ) {
var colorMap = geometry.morphColors[ 0 ];
for ( var i = 0; i < colorMap.colors.length; i ++ ) {
geometry.faces[ i ].color = colorMap.colors[ i ];
}
}
}
var loader = new THREE.JSONLoader();
loader.load( "models/animated/horse.js", function( geometry ) {
morphColorsToFaceColors( geometry );
var i = -600;
while (i < 601){
addMorph( geometry, 550, 1000, 100 - Math.random() * 3000, FLOOR, i, true );
i += 2;
}
} );
/*
loader.load( "obj/morphs/fox.js", function( geometry ) {
morphColorsToFaceColors( geometry );
addMorph( geometry, 200, 1000, 100 - Math.random() * 500, FLOOR - 5, 600 );
} );
loader.load( "obj/morphs/shdw3walk.js", function( geometry ) {
morphColorsToFaceColors( geometry );
addMorph( geometry, 40, 2000, -500, FLOOR + 60, 245 );
} );
loader.load( "obj/morphs/flamingo.js", function( geometry ) {
morphColorsToFaceColors( geometry );
addMorph( geometry, 500, 1000, 500 - Math.random() * 500, FLOOR + 350, 40 );
} );
loader.load( "obj/morphs/stork.js", function( geometry ) {
morphColorsToFaceColors( geometry );
addMorph( geometry, 350, 1000, 500 - Math.random() * 500, FLOOR + 350, 340 );
} );
loader.load( "obj/morphs/mountainlion.js", function( geometry ) {
morphColorsToFaceColors( geometry );
addMorph( geometry, 400, 1000, 500 - Math.random() * 500, FLOOR - 5, 700 );
} );
loader.load( "obj/morphs/bearBrown.js", function( geometry ) {
morphColorsToFaceColors( geometry );
addMorph( geometry, 300, 2500, -500, FLOOR - 5, -750 );
} );
loader.load( "obj/morphs/parrot.js", function( geometry ) {
morphColorsToFaceColors( geometry );
addMorph( geometry, 450, 500, 500 - Math.random() * 500, FLOOR + 300, 700 );
} );
*/
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var delta = clock.getDelta();
for ( var i = 0; i < morphs.length; i ++ ) {
morph = morphs[ i ];
morph.updateAnimation( 1000 * delta );
morph.position.x += morph.speed * delta;
if ( morph.position.x > 2000 ) {
morph.position.x = -1000 - Math.random() * 500;
}
}
controls.update( delta );
renderer.clear();
renderer.render( scene, camera );
// Render debug HUD with shadow map
//hudMaterial.uniforms.tDiffuse.texture = light.shadowMap;
//renderer.render( sceneHUD, cameraOrtho );
}
};
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_sprites.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_terrain_dynamic.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_test_memory.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_test_memory2.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgl_trails.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgldeferred_animation.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgldeferred_arealights.html
// https://github.com/mrdoob/three.js/tree/master/examples/webgldeferred_pointlights.html