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.JITCompile = false;
+ 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, geometry, 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
+
+ },
+
+ "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
+
+ },
+
+ "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
+
+ },
+
+ "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
+
+ }
+
+ };
+
+
+ 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 );
+
+ }
+
+ var tmpRot = new THREE.Matrix4();
+ tmpRot.makeRotationAxis( new THREE.Vector3( 1, 0, 0 ), Math.PI/2 );
+
+ var xgrid = 34;
+ var ygrid = 15;
+ var nribbons = xgrid * ygrid;
+
+ var c = 0;
+ for (var i = 0; i < xgrid; i ++ )
+ for (var j = 0; j < ygrid; j ++ ) {
+
+ var material = new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: THREE.VertexColors, side: THREE.DoubleSide } );
+
+ ribbon = new THREE.Ribbon( i % 2 ? geometry : geometry2, material );
+ ribbon.rotation.x = 0;
+ ribbon.rotation.y = Math.PI / 2;
+ ribbon.rotation.z = Math.PI;
+
+ x = 40 * ( i - xgrid/2 );
+ y = 40 * ( j - ygrid/2 );
+ z = 0;
+
+ ribbon.position.set( x, y, z );
+
+ ribbon.matrixAutoUpdate = false;
+
+ // manually create local matrix
+
+ ribbon.matrix.setPosition( ribbon.position );
+ ribbon.matrixRotationWorld.setRotationFromEuler( ribbon.rotation );
+
+ ribbon.matrix.elements[ 0 ] = ribbon.matrixRotationWorld.elements[ 0 ];
+ ribbon.matrix.elements[ 4 ] = ribbon.matrixRotationWorld.elements[ 4 ];
+ ribbon.matrix.elements[ 8 ] = ribbon.matrixRotationWorld.elements[ 8 ];
+
+ ribbon.matrix.elements[ 1 ] = ribbon.matrixRotationWorld.elements[ 1 ];
+ ribbon.matrix.elements[ 5 ] = ribbon.matrixRotationWorld.elements[ 5 ];
+ ribbon.matrix.elements[ 9 ] = ribbon.matrixRotationWorld.elements[ 9 ];
+
+ ribbon.matrix.elements[ 2 ] = ribbon.matrixRotationWorld.elements[ 2 ];
+ ribbon.matrix.elements[ 6 ] = ribbon.matrixRotationWorld.elements[ 6 ];
+ ribbon.matrix.elements[ 10 ] = ribbon.matrixRotationWorld.elements[ 10 ];
+
+ ribbon.matrix.multiply( tmpRot );
+
+ ribbon.matrix.scale( ribbon.scale );
+
+ ribbons.push( ribbon );
+ scene.add( ribbon );
+
+ c ++;
+
+ }
+
+ scene.matrixAutoUpdate = false;
+
+ //
+
+ 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
\ No newline at end of file
diff --git a/threejs/three.d.ts b/threejs/three.d.ts
index e3868af58d..0ae2bc67ec 100644
--- a/threejs/three.d.ts
+++ b/threejs/three.d.ts
@@ -89,11 +89,14 @@ module THREE {
// Mapping modes
export enum Mapping { }
- export var UVMapping: Mapping;
- export var CubeReflectionMapping: Mapping;
- export var CubeRefractionMapping: Mapping;
- export var SphericalReflectionMapping: Mapping;
- export var SphericalRefractionMapping: Mapping;
+ export interface MappingConstructor {
+ new(): Mapping;
+ }
+ export var UVMapping: MappingConstructor;
+ export var CubeReflectionMapping: MappingConstructor;
+ export var CubeRefractionMapping: MappingConstructor;
+ export var SphericalReflectionMapping: MappingConstructor;
+ export var SphericalRefractionMapping: MappingConstructor;
// Wrapping modes
export enum Wrapping { }
@@ -183,6 +186,24 @@ module THREE {
// Core ///////////////////////////////////////////////////////////////////////////////////////////////
+ interface BufferGeometryAttributeArray extends ArrayBufferView{
+ length: number;
+ }
+
+ interface BufferGeometryAttribute{
+ itemSize: number;
+ array: BufferGeometryAttributeArray;
+ numItems: number;
+ }
+
+ interface BufferGeometryAttributes{
+ [name: string]: BufferGeometryAttribute;
+ index?: BufferGeometryAttribute;
+ position?: BufferGeometryAttribute;
+ normal?: BufferGeometryAttribute;
+ color?: BufferGeometryAttribute;
+ }
+
/**
* This is a superefficent class for geometries because it saves all data in buffers.
* It reduces memory costs and cpu cycles. But it is not as easy to work with because of all the nessecary buffer calculations.
@@ -204,7 +225,7 @@ module THREE {
/**
* This hashmap has as id the name of the attribute to be set and as value the buffer to set it to.
*/
- attributes: { [name: string]: any; };
+ attributes: BufferGeometryAttributes;
/**
* When set, it holds certain buffers in memory to have faster updates for this object. When unset, it deletes those buffers and saves memory.
@@ -224,6 +245,8 @@ module THREE {
hasTangents: bool;
morphTargets: any[];
+ offsets: { start: number; count: number; index: number; }[];
+
/**
* Bakes matrix transform directly into vertex coordinates.
*/
@@ -1250,6 +1273,10 @@ module THREE {
* Returns -1 if x is less than 0, 1 if x is greater than 0, and 0 if x is zero.
*/
sign(x: number): number;
+
+ degToRad(degrees: number): number;
+
+ radToDeg(radians: number): number;
};
/**
@@ -1402,7 +1429,7 @@ module THREE {
*
* @param v Rotation vector. order — The order of rotations. Eg. "XYZ".
*/
- setRotationFromEuler(v: Vector3, order: string): Matrix4;
+ setRotationFromEuler(v: Vector3, order?: string): Matrix4;
/**
* Sets the rotation submatrix of this matrix to the rotation specified by q.
@@ -3373,6 +3400,27 @@ module THREE {
add(loader: Loader): void;
}
+ interface SceneLoaderResult{
+ scene: Scene;
+ geometries: {[id:string]:Geometry;};
+ face_materials: {[id:string]:Material;};
+ materials: {[id:string]:Material;};
+ textures: {[id:string]:Texture;};
+ objects: {[id:string]:Object3D;};
+ cameras: {[id:string]:Camera;};
+ lights: {[id:string]:Light;};
+ fogs: {[id:string]:IFog;};
+ empties: {[id:string]:any;};
+ groups: {[id:string]:any;};
+ }
+
+ interface SceneLoaderProgress{
+ totalModels: number;
+ totalTextures: number;
+ loadedModels: number;
+ loadedTextures: number;
+ }
+
/**
* A loader for loading a complete scene out of a JSON file.
*/
@@ -3401,19 +3449,29 @@ module THREE {
* Will be called when load completes.
* The default is a function with empty body.
*/
- callbackSync: () => void;
+ callbackSync: (result: SceneLoaderResult) => void;
/**
* Will be called as load progresses.
* The default is a function with empty body.
*/
- callbackProgress: () => void;
+ callbackProgress: (progress: SceneLoaderProgress, result: SceneLoaderResult) => void;
+
+ geometryHandlerMap: any;
+ hierarchyHandlerMap: any;
+
/**
* @param url
* @param callbackFinished This function will be called with the loaded model as an instance of scene when the load is completed.
*/
load(url: string, callbackFinished: (scene: Scene) => void ): void;
+
+ addGeometryHandler(typeID: string, loaderClass: Object): void;
+
+ addHierarchyHandler(typeID: string, loaderClass: Object): void;
+
+ static parse(json: any, callbackFinished:(result: SceneLoaderResult)=>void, url: string): void;
}
/**
@@ -3549,7 +3607,7 @@ module THREE {
linewidth?: number;
linecap?: string;
linejoin?: string;
- vertexColors?: bool;
+ vertexColors?: Colors;
fog?: bool;
}
@@ -3868,8 +3926,9 @@ module THREE {
export interface Uniforms {
- [name: string]: { type: string; value: Object; };
+ [name: string]: { type: string; value: any; };
//[name:string]:{type:UniformType;value:Object;};
+ color?: { type: string; value: THREE.Color; };
}
export interface ShaderMaterialParameters {
@@ -3922,12 +3981,19 @@ module THREE {
constructor(geometry?: Geometry, material?: LineDashedMaterial, type?: number);
constructor(geometry?: Geometry, material?: LineBasicMaterial, type?: number);
constructor(geometry?: Geometry, material?: ShaderMaterial, type?: number);
+ constructor(geometry?: BufferGeometry, material?: LineDashedMaterial, type?: number);
+ constructor(geometry?: BufferGeometry, material?: LineBasicMaterial, type?: number);
+ constructor(geometry?: BufferGeometry, material?: ShaderMaterial, type?: number);
geometry: Geometry;
material: Material;
- type: number;
+ type: LineType;
clone(object?: Line): Line;
}
+ enum LineType{}
+ var LineStrip: LineType;
+ var LinePieces: LineType;
+
export class LOD extends Object3D {
constructor();
LODs: Object3D[];
@@ -3944,6 +4010,15 @@ module THREE {
constructor(geometry?: Geometry, material?: MeshNormalMaterial);
constructor(geometry?: Geometry, material?: MeshPhongMaterial);
constructor(geometry?: Geometry, material?: ShaderMaterial);
+
+ constructor(geometry?: BufferGeometry , material?: MeshBasicMaterial);
+ constructor(geometry?: BufferGeometry , material?: MeshDepthMaterial);
+ constructor(geometry?: BufferGeometry , material?: MeshFaceMaterial);
+ constructor(geometry?: BufferGeometry , material?: MeshLambertMaterial);
+ constructor(geometry?: BufferGeometry , material?: MeshNormalMaterial);
+ constructor(geometry?: BufferGeometry , material?: MeshPhongMaterial);
+ constructor(geometry?: BufferGeometry , material?: ShaderMaterial);
+
geometry: Geometry;
material: Material;
morphTargetBase: number;
@@ -4000,6 +4075,10 @@ module THREE {
constructor(geometry: Geometry, material?: ParticleCanvasMaterial);
constructor(geometry: Geometry, material?: ParticleDOMMaterial);
constructor(geometry: Geometry, material?: ShaderMaterial);
+ constructor(geometry: BufferGeometry, material?: ParticleBasicMaterial);
+ constructor(geometry: BufferGeometry, material?: ParticleCanvasMaterial);
+ constructor(geometry: BufferGeometry, material?: ParticleDOMMaterial);
+ constructor(geometry: BufferGeometry, material?: ShaderMaterial);
/**
* An instance of Geometry, where each vertex designates the position of a particle in the system.
@@ -4027,13 +4106,13 @@ module THREE {
}
export class SkinnedMesh extends Mesh {
- constructor(geometry?: Geometry, material?: MeshBasicMaterial);
- constructor(geometry?: Geometry, material?: MeshDepthMaterial);
- constructor(geometry?: Geometry, material?: MeshFaceMaterial);
- constructor(geometry?: Geometry, material?: MeshLambertMaterial);
- constructor(geometry?: Geometry, material?: MeshNormalMaterial);
- constructor(geometry?: Geometry, material?: MeshPhongMaterial);
- constructor(geometry?: Geometry, material?: ShaderMaterial);
+ constructor(geometry?: Geometry, material?: MeshBasicMaterial, useVertexTexture?: bool);
+ constructor(geometry?: Geometry, material?: MeshDepthMaterial, useVertexTexture?: bool);
+ constructor(geometry?: Geometry, material?: MeshFaceMaterial, useVertexTexture?: bool);
+ constructor(geometry?: Geometry, material?: MeshLambertMaterial, useVertexTexture?: bool);
+ constructor(geometry?: Geometry, material?: MeshNormalMaterial, useVertexTexture?: bool);
+ constructor(geometry?: Geometry, material?: MeshPhongMaterial, useVertexTexture?: bool);
+ constructor(geometry?: Geometry, material?: ShaderMaterial, useVertexTexture?: bool);
useVertexTexture: bool;
identityMatrix: Matrix4;
bones: Bone[];
@@ -4779,6 +4858,17 @@ module THREE {
type?: TextureDataType,
anisotropy?: number
);
+ constructor(
+ image: HTMLCanvasElement,
+ mapping?: Mapping,
+ wrapS?: Wrapping,
+ wrapT?: Wrapping,
+ magFilter?: TextureFilter,
+ minFilter?: TextureFilter,
+ format?: PixelFormat,
+ type?: TextureDataType,
+ anisotropy?: number
+ );
id: number;
name: string;
image: Object; // HTMLImageElement or ImageData ;
@@ -4918,6 +5008,8 @@ module THREE {
getNextKeyWith(type: string, h: number, key: number): KeyFrame; // ????
getPrevKeyWith(type: string, h: number, key: number): KeyFrame;
+
+ JITCompile: bool; // https://github.com/mrdoob/three.js/blob/master/examples/webgl_animation_skinning_morph.html#L251
}
export class AnimationInterpolation { }
@@ -5378,8 +5470,8 @@ module THREE {
* Defines a 2d shape plane using paths.
*/
export class Shape extends Path {
- constructor();
- holes: Vector2[][];
+ constructor(points?: Vector2[]);
+ holes: Path[];
extrude(options?: any): ExtrudeGeometry;
makeGeometry(options?: any): ShapeGeometry;
getPointsHoles(divisions: number): Vector2[][];
@@ -5428,7 +5520,7 @@ module THREE {
}
export class ConvexGeometry extends Geometry {
- constructor(vertices: Vector3);
+ constructor(vertices: Vector3[]);
}
/**
@@ -5502,8 +5594,8 @@ module THREE {
}
export class ShapeGeometry extends Geometry {
- constructor(shape: Shape, options: any);
- constructor(shapes: Shape[], options: any);
+ constructor(shape: Shape, options?: any);
+ constructor(shapes: Shape[], options?: any);
shapebb: BoundingBox;
addShapeList(shapes: Shape[], options: any): ShapeGeometry;
addShape(shape: Shape, options?: any): void;
@@ -5576,7 +5668,12 @@ module THREE {
}
export class TubeGeometry extends Geometry {
- constructor(path: Path, segments?: number, radius?: number, radiusSegments?: number, closed?: bool, debug?: ArrowHelper[]);
+ constructor(path: Path, segments?: number, radius?: number, radiusSegments?: number, closed?: bool, debug?: Object3D);
+
+ // https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_extrude_shapes.html#L208
+ // Hmmm?
+ constructor(path: SplineCurve3, segments?: number, radius?: number, radiusSegments?: number, closed?: bool, debug?: bool);
+
path: Path;
segments: number;
radius: number;
@@ -5678,11 +5775,11 @@ module THREE {
}
export class LensFlare extends Object3D {
- constructor(texture?: Texture, size?: number, distance?: number, blending?: Blending, color?: number);
+ constructor(texture?: Texture, size?: number, distance?: number, blending?: Blending, color?: Color);
lensFlares: LensFlareProperty[];
positionScreen: Vector3;
- customUpdateCallback: () => void;
- add(texture?: Texture, size?: number, distance?: number, blending?: Blending, color?: number, opacity?: number): void;
+ customUpdateCallback: (object:LensFlare) => void;
+ add(texture?: Texture, size?: number, distance?: number, blending?: Blending, color?: Color, opacity?: number): void;
updateLensFlares(): void;
}
@@ -5766,7 +5863,7 @@ module THREE {
export var UniformsUtils: {
merge(uniforms: Object[]): Uniforms;
merge(uniforms: Uniforms[]): Uniforms;
- clone(uniforms_src: Object[][]): Object[][];
+ clone(uniforms_src: Uniforms): Uniforms;
};
export var UniformsLib: {