diff --git a/examples/misc_animation_authoring.html b/examples/misc_animation_authoring.html index 8af74899afc19f..5074b687928c23 100644 --- a/examples/misc_animation_authoring.html +++ b/examples/misc_animation_authoring.html @@ -119,7 +119,7 @@ } - }); + } ); window.addEventListener( 'keyup', function ( event ) { @@ -132,7 +132,7 @@ } - }); + } ); var trackInfo = [ diff --git a/examples/misc_controls_fly.html b/examples/misc_controls_fly.html index ce2cb0dc13b384..d35d69a9cdf450 100644 --- a/examples/misc_controls_fly.html +++ b/examples/misc_controls_fly.html @@ -74,11 +74,11 @@ var MARGIN = 0; var SCREEN_HEIGHT = window.innerHeight - MARGIN * 2; - var SCREEN_WIDTH = window.innerWidth; + var SCREEN_WIDTH = window.innerWidth; var camera, controls, scene, renderer, stats; var geometry, meshPlanet, meshClouds, meshMoon; - var dirLight, pointLight, ambientLight; + var dirLight; var composer; @@ -100,7 +100,7 @@ scene.fog = new THREE.FogExp2( 0x000000, 0.00000025 ); dirLight = new THREE.DirectionalLight( 0xffffff ); - dirLight.position.set( -1, 0, 1 ).normalize(); + dirLight.position.set( - 1, 0, 1 ).normalize(); scene.add( dirLight ); var materialNormalMap = new THREE.MeshPhongMaterial( { @@ -246,10 +246,10 @@ } - function onWindowResize( event ) { + function onWindowResize() { SCREEN_HEIGHT = window.innerHeight; - SCREEN_WIDTH = window.innerWidth; + SCREEN_WIDTH = window.innerWidth; renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); diff --git a/examples/misc_controls_map.html b/examples/misc_controls_map.html index 71283ad024861c..7466186ff54941 100644 --- a/examples/misc_controls_map.html +++ b/examples/misc_controls_map.html @@ -125,9 +125,10 @@ window.addEventListener( 'resize', onWindowResize, false ); - var gui = new dat.GUI(); + var gui = new dat.GUI(); + + gui.add( controls, 'screenSpacePanning' ); - gui.add(controls, 'screenSpacePanning'); } function onWindowResize() { diff --git a/examples/misc_controls_pointerlock.html b/examples/misc_controls_pointerlock.html index b7115ad9e12c33..be75ae4233cdfb 100644 --- a/examples/misc_controls_pointerlock.html +++ b/examples/misc_controls_pointerlock.html @@ -112,20 +112,20 @@ var blocker = document.getElementById( 'blocker' ); var instructions = document.getElementById( 'instructions' ); - instructions.addEventListener( 'click', function ( event ) { + instructions.addEventListener( 'click', function () { controls.lock(); }, false ); - controls.addEventListener( 'lock', function() { + controls.addEventListener( 'lock', function () { instructions.style.display = 'none'; blocker.style.display = 'none'; } ); - controls.addEventListener( 'unlock', function() { + controls.addEventListener( 'unlock', function () { blocker.style.display = 'block'; instructions.style.display = ''; @@ -168,7 +168,7 @@ var onKeyUp = function ( event ) { - switch( event.keyCode ) { + switch ( event.keyCode ) { case 38: // up case 87: // w diff --git a/examples/misc_controls_trackball.html b/examples/misc_controls_trackball.html index 5ec579124daa40..c6559309cebb5e 100644 --- a/examples/misc_controls_trackball.html +++ b/examples/misc_controls_trackball.html @@ -107,7 +107,7 @@ scene.add( light ); var light = new THREE.DirectionalLight( 0x002288 ); - light.position.set( -1, -1, -1 ); + light.position.set( - 1, - 1, - 1 ); scene.add( light ); var light = new THREE.AmbientLight( 0x222222 ); diff --git a/examples/misc_controls_transform.html b/examples/misc_controls_transform.html index 93b18f5701a294..a5ba2d97550b90 100644 --- a/examples/misc_controls_transform.html +++ b/examples/misc_controls_transform.html @@ -78,7 +78,7 @@ var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 ); var material = new THREE.MeshLambertMaterial( { map: texture } ); - orbit = new THREE.OrbitControls(camera, renderer.domElement); + orbit = new THREE.OrbitControls( camera, renderer.domElement ); orbit.update(); orbit.addEventListener( 'change', render ); @@ -86,7 +86,9 @@ control.addEventListener( 'change', render ); control.addEventListener( 'dragging-changed', function ( event ) { - orbit.enabled = !event.value; + + orbit.enabled = ! event.value; + } ); var mesh = new THREE.Mesh( geometry, material ); @@ -133,24 +135,24 @@ break; case 88: // X - control.showX = !control.showX; + control.showX = ! control.showX; break; case 89: // Y - control.showY = !control.showY; + control.showY = ! control.showY; break; case 90: // Z - control.showZ = !control.showZ; + control.showZ = ! control.showZ; break; case 32: // Spacebar - control.enabled = !control.enabled; + control.enabled = ! control.enabled; break; } - }); + } ); window.addEventListener( 'keyup', function ( event ) { @@ -163,7 +165,7 @@ } - }); + } ); } diff --git a/examples/misc_exporter_gltf.html b/examples/misc_exporter_gltf.html index e15b499a2a685f..63eae3072f59ea 100644 --- a/examples/misc_exporter_gltf.html +++ b/examples/misc_exporter_gltf.html @@ -51,14 +51,14 @@ var gltfExporter = new THREE.GLTFExporter(); var options = { - trs: document.getElementById('option_trs').checked, - onlyVisible: document.getElementById('option_visible').checked, - truncateDrawRange: document.getElementById('option_drawrange').checked, - binary: document.getElementById('option_binary').checked, - forceIndices: document.getElementById('option_forceindices').checked, - forcePowerOfTwoTextures: document.getElementById('option_forcepot').checked + trs: document.getElementById( 'option_trs' ).checked, + onlyVisible: document.getElementById( 'option_visible' ).checked, + truncateDrawRange: document.getElementById( 'option_drawrange' ).checked, + binary: document.getElementById( 'option_binary' ).checked, + forceIndices: document.getElementById( 'option_forceindices' ).checked, + forcePowerOfTwoTextures: document.getElementById( 'option_forcepot' ).checked }; - gltfExporter.parse( input, function( result ) { + gltfExporter.parse( input, function ( result ) { if ( result instanceof ArrayBuffer ) { @@ -166,7 +166,7 @@ // Perspective Camera // --------------------------------------------------------------------- camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 ); - camera.position.set(600, 400, 0); + camera.position.set( 600, 400, 0 ); camera.name = "PerspectiveCamera"; scene1.add( camera ); @@ -190,7 +190,7 @@ // Grid // --------------------------------------------------------------------- gridHelper = new THREE.GridHelper( 2000, 20 ); - gridHelper.position.y = -50; + gridHelper.position.y = - 50; gridHelper.name = "Grid"; scene1.add( gridHelper ); @@ -213,7 +213,7 @@ } ); object = new THREE.Mesh( new THREE.IcosahedronGeometry( 75, 0 ), material ); - object.position.set( -200, 0, 200 ); + object.position.set( - 200, 0, 200 ); object.name = 'Icosahedron'; scene1.add( object ); @@ -270,7 +270,7 @@ roughness: 1 } ); object = new THREE.Mesh( new THREE.TorusKnotGeometry( 50, 15, 40, 10 ), material ); - object.position.set( -200, 0, 0 ); + object.position.set( - 200, 0, 0 ); object.name = "Cylinder"; scene1.add( object ); @@ -282,7 +282,7 @@ material = new THREE.MeshStandardMaterial( { map: mapWood, side: THREE.DoubleSide } ); object = new THREE.Mesh( new THREE.BoxBufferGeometry( 40, 100, 100 ), material ); - object.position.set( -200, 0, 400 ); + object.position.set( - 200, 0, 400 ); object.name = "Cube"; scene1.add( object ); @@ -302,7 +302,7 @@ var group2 = new THREE.Group(); group2.name = "subGroup"; - group2.position.set( 0, 50, 0); + group2.position.set( 0, 50, 0 ); group1.add( group2 ); object2 = new THREE.Mesh( new THREE.BoxBufferGeometry( 30, 30, 30 ), material ); @@ -314,31 +314,31 @@ // Triangle Strip // --------------------------------------------------------------------- var geometry = new THREE.BufferGeometry(); - var positions = new Float32Array([ + var positions = new Float32Array( [ 0, 0, 0, 0, 80, 0, 80, 0, 0, 80, 80, 0, 80, 0, 80, 80, 80, 80, - ]); + ] ); - var colors = new Float32Array([ + var colors = new Float32Array( [ 1, 0, 0, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0, 0, 1, 0, 0, 1, - ]); + ] ); geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) ); geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) ); object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { side: THREE.DoubleSide, vertexColors: THREE.VertexColors } ) ); - object.position.set( 140, -40, -250); + object.position.set( 140, - 40, - 250 ); object.setDrawMode( THREE.TriangleStripDrawMode ); object.name = 'Custom buffered'; - object.userData = { data: 'customdata', list: [ 1,2,3,4 ] }; + object.userData = { data: 'customdata', list: [ 1, 2, 3, 4 ] }; scene1.add( object ); @@ -350,15 +350,17 @@ var numPoints = 100; var positions = new Float32Array( numPoints * 3 ); - for (var i = 0; i < numPoints; i++ ) { + for ( var i = 0; i < numPoints; i ++ ) { + positions[ i * 3 ] = i; positions[ i * 3 + 1 ] = Math.sin( i / 2 ) * 20; positions[ i * 3 + 2 ] = 0; + } geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) ); object = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffff00 } ) ); - object.position.set(-50, 0, -200); + object.position.set( - 50, 0, - 200 ); scene1.add( object ); @@ -370,16 +372,18 @@ var radius = 70; var positions = new Float32Array( numPoints * 3 ); - for (var i = 0; i < numPoints; i++ ) { + for ( var i = 0; i < numPoints; i ++ ) { + var s = i * Math.PI * 2 / numPoints; - positions[ i * 3 ] = radius * Math.sin ( s ); - positions[ i * 3 + 1 ] = radius * Math.cos ( s ); + positions[ i * 3 ] = radius * Math.sin( s ); + positions[ i * 3 + 1 ] = radius * Math.cos( s ); positions[ i * 3 + 2 ] = 0; + } geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) ); object = new THREE.LineLoop( geometry, new THREE.LineBasicMaterial( { color: 0xffff00 } ) ); - object.position.set(0, 0, -200); + object.position.set( 0, 0, - 200 ); scene1.add( object ); @@ -393,23 +397,23 @@ var positions = new Float32Array( ( numElements + outOfRange ) * 3 ); var colors = new Float32Array( ( numElements + outOfRange ) * 3 ); - positions.set([ + positions.set( [ 0, 0, 0, 0, 80, 0, 80, 0, 0, 80, 0, 0, 0, 80, 0, 80, 80, 0 - ]); + ] ); - colors.set([ + colors.set( [ 1, 0, 0, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0, 0, 1, 0, 0, 1, - ]); + ] ); geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) ); geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) ); @@ -417,7 +421,7 @@ object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { side: THREE.DoubleSide, vertexColors: THREE.VertexColors } ) ); object.name = 'Custom buffered truncated'; - object.position.set( 340, -40, -200 ); + object.position.set( 340, - 40, - 200 ); scene1.add( object ); @@ -426,10 +430,12 @@ // --------------------------------------------------------------------- var numPoints = 100; var pointsArray = new Float32Array( numPoints * 3 ); - for ( var i = 0; i < numPoints; i++ ) { - pointsArray[ 3 * i ] = -50 + Math.random() * 100; + for ( var i = 0; i < numPoints; i ++ ) { + + pointsArray[ 3 * i ] = - 50 + Math.random() * 100; pointsArray[ 3 * i + 1 ] = Math.random() * 100; - pointsArray[ 3 * i + 2 ] = -50 + Math.random() * 100; + pointsArray[ 3 * i + 2 ] = - 50 + Math.random() * 100; + } var pointsGeo = new THREE.BufferGeometry(); @@ -438,7 +444,7 @@ var pointsMaterial = new THREE.PointsMaterial( { color: 0xffff00, size: 5 } ); var points = new THREE.Points( pointsGeo, pointsMaterial ); points.name = "Points"; - points.position.set( -200, 0, -200); + points.position.set( - 200, 0, - 200 ); scene1.add( points ); // --------------------------------------------------------------------- @@ -454,15 +460,15 @@ } ); object = new THREE.Mesh( new THREE.CircleGeometry( 50, 20, 0, Math.PI * 2 ), material ); - object.position.set( 200, 0, -400 ); + object.position.set( 200, 0, - 400 ); scene1.add( object ); object = new THREE.Mesh( new THREE.RingGeometry( 10, 50, 20, 5, 0, Math.PI * 2 ), material ); - object.position.set( 0, 0, -400 ); + object.position.set( 0, 0, - 400 ); scene1.add( object ); object = new THREE.Mesh( new THREE.CylinderGeometry( 25, 75, 100, 40, 5 ), material ); - object.position.set( -200, 0, -400 ); + object.position.set( - 200, 0, - 400 ); scene1.add( object ); // @@ -498,7 +504,7 @@ waltHead = obj; waltHead.scale.multiplyScalar( 1.5 ); - waltHead.position.set(400, 0, 0); + waltHead.position.set( 400, 0, 0 ); scene1.add( waltHead ); } ); @@ -512,7 +518,7 @@ object.position.set( 0, 0, 0 ); object.name = "Cube2ndScene"; scene2.name = 'Scene2'; - scene2.add(object); + scene2.add( object ); // diff --git a/examples/misc_exporter_obj.html b/examples/misc_exporter_obj.html index a63fc142bfc187..0b89cd6b3d5fce 100644 --- a/examples/misc_exporter_obj.html +++ b/examples/misc_exporter_obj.html @@ -75,17 +75,17 @@ var exporter = new THREE.OBJExporter(); var result = exporter.parse( scene ); floatingDiv.style.display = 'block'; - floatingDiv.innerHTML = result.split( '\n' ).join ( '
' ); + floatingDiv.innerHTML = result.split( '\n' ).join( '
' ); } function addGeometry( type ) { - for( var i = 0; i < scene.children.length; i ++ ) { + for ( var i = 0; i < scene.children.length; i ++ ) { var child = scene.children[ i ]; - if( child.isMesh ) { + if ( child.isMesh ) { child.geometry.dispose(); scene.remove( child ); @@ -97,7 +97,7 @@ if ( type === 1 ) { - var material = new THREE.MeshLambertMaterial( { color : 0x00cc00 } ); + var material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } ); var geometry = generateTriangleGeometry(); scene.add( new THREE.Mesh( geometry, material ) ); @@ -105,23 +105,23 @@ } else if ( type === 2 ) { - var material = new THREE.MeshLambertMaterial( { color : 0x00cc00 } ); + var material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } ); var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 ); scene.add( new THREE.Mesh( geometry, material ) ); } else if ( type === 3 ) { - var material = new THREE.MeshLambertMaterial( { color : 0x00cc00 } ); + var material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } ); var geometry = new THREE.CylinderBufferGeometry( 50, 50, 100, 30, 1 ); scene.add( new THREE.Mesh( geometry, material ) ); } else if ( type === 4 || type === 5 ) { - var material = new THREE.MeshLambertMaterial( { color : 0x00cc00 } ); + var material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } ); var geometry = generateTriangleGeometry(); var mesh = new THREE.Mesh( geometry, material ); - mesh.position.x = -200; + mesh.position.x = - 200; scene.add( mesh ); var geometry2 = new THREE.BoxBufferGeometry( 100, 100, 100 ); @@ -167,14 +167,38 @@ document.addEventListener( 'mousemove', onDocumentMouseMove, false ); document.addEventListener( 'mouseover', onDocumentMouseMove, false ); - document.getElementById( 'triangle' ).addEventListener( 'click', function() { addGeometry( 1 ); } ); - document.getElementById( 'cube' ).addEventListener( 'click', function() { addGeometry( 2 ); } ); - document.getElementById( 'cylinder' ).addEventListener( 'click', function() { addGeometry( 3 ); } ); - document.getElementById( 'both' ).addEventListener( 'click', function() { addGeometry( 4 ); } ); - document.getElementById( 'transformed' ).addEventListener( 'click', function() { addGeometry( 5 ); } ); + document.getElementById( 'triangle' ).addEventListener( 'click', function () { + + addGeometry( 1 ); + + } ); + document.getElementById( 'cube' ).addEventListener( 'click', function () { + + addGeometry( 2 ); + + } ); + document.getElementById( 'cylinder' ).addEventListener( 'click', function () { + + addGeometry( 3 ); + + } ); + document.getElementById( 'both' ).addEventListener( 'click', function () { + + addGeometry( 4 ); + + } ); + document.getElementById( 'transformed' ).addEventListener( 'click', function () { + + addGeometry( 5 ); + + } ); exportButton = document.getElementById( 'export' ); - exportButton.addEventListener( 'click', function() { exportToObj(); }); + exportButton.addEventListener( 'click', function () { + + exportToObj(); + + } ); floatingDiv = document.createElement( 'div' ); floatingDiv.className = 'floating'; @@ -187,7 +211,7 @@ var needToClose = true; var target = event.target; - while( target !== null ) { + while ( target !== null ) { if ( target === floatingDiv || target === exportButton ) { diff --git a/examples/misc_exporter_stl.html b/examples/misc_exporter_stl.html index 438c3790dd8b90..54b211f9e6c89a 100644 --- a/examples/misc_exporter_stl.html +++ b/examples/misc_exporter_stl.html @@ -116,11 +116,15 @@ // var params = { - ASCII: function() { + ASCII: function () { + exportASCII(); + }, - Binary: function() { + Binary: function () { + exportBinary(); + } }; diff --git a/examples/misc_fps.html b/examples/misc_fps.html index f6f18cb50afbac..42ca127614a515 100644 --- a/examples/misc_fps.html +++ b/examples/misc_fps.html @@ -38,96 +38,122 @@ // player motion parameters var motion = { - airborne : false, - position : new THREE.Vector3(), velocity : new THREE.Vector3(), - rotation : new THREE.Vector2(), spinning : new THREE.Vector2() + airborne: false, + position: new THREE.Vector3(), velocity: new THREE.Vector3(), + rotation: new THREE.Vector2(), spinning: new THREE.Vector2() }; - motion.position.y = -150; + motion.position.y = - 150; // game systems code - var resetPlayer = function() { - if( motion.position.y < -123 ) { - motion.position.set( -2, 7.7, 25 ); + var resetPlayer = function () { + + if ( motion.position.y < - 123 ) { + + motion.position.set( - 2, 7.7, 25 ); motion.velocity.multiplyScalar( 0 ); + } + }; - var keyboardControls = (function() { + var keyboardControls = ( function () { - var keys = { SP : 32, W : 87, A : 65, S : 83, D : 68, UP : 38, LT : 37, DN : 40, RT : 39 }; + var keys = { SP: 32, W: 87, A: 65, S: 83, D: 68, UP: 38, LT: 37, DN: 40, RT: 39 }; var keysPressed = {}; - (function( watchedKeyCodes ) { - var handler = function( down ) { - return function( e ) { + ( function ( watchedKeyCodes ) { + + var handler = function ( down ) { + + return function ( e ) { + var index = watchedKeyCodes.indexOf( e.keyCode ); - if( index >= 0 ) { - keysPressed[watchedKeyCodes[index]] = down; e.preventDefault(); + if ( index >= 0 ) { + + keysPressed[ watchedKeyCodes[ index ] ] = down; e.preventDefault(); + } + }; + }; window.addEventListener( "keydown", handler( true ), false ); window.addEventListener( "keyup", handler( false ), false ); - })([ + + } )( [ keys.SP, keys.W, keys.A, keys.S, keys.D, keys.UP, keys.LT, keys.DN, keys.RT - ]); + ] ); var forward = new THREE.Vector3(); var sideways = new THREE.Vector3(); - return function() { - if( !motion.airborne ) { + return function () { + + if ( ! motion.airborne ) { // look around - var sx = keysPressed[keys.UP] ? 0.03 : ( keysPressed[keys.DN] ? -0.03 : 0 ); - var sy = keysPressed[keys.LT] ? 0.03 : ( keysPressed[keys.RT] ? -0.03 : 0 ); + var sx = keysPressed[ keys.UP ] ? 0.03 : ( keysPressed[ keys.DN ] ? - 0.03 : 0 ); + var sy = keysPressed[ keys.LT ] ? 0.03 : ( keysPressed[ keys.RT ] ? - 0.03 : 0 ); - if( Math.abs( sx ) >= Math.abs( motion.spinning.x ) ) motion.spinning.x = sx; - if( Math.abs( sy ) >= Math.abs( motion.spinning.y ) ) motion.spinning.y = sy; + if ( Math.abs( sx ) >= Math.abs( motion.spinning.x ) ) motion.spinning.x = sx; + if ( Math.abs( sy ) >= Math.abs( motion.spinning.y ) ) motion.spinning.y = sy; // move around forward.set( Math.sin( motion.rotation.y ), 0, Math.cos( motion.rotation.y ) ); - sideways.set( forward.z, 0, -forward.x ); + sideways.set( forward.z, 0, - forward.x ); - forward.multiplyScalar( keysPressed[keys.W] ? -0.1 : (keysPressed[keys.S] ? 0.1 : 0)); - sideways.multiplyScalar( keysPressed[keys.A] ? -0.1 : (keysPressed[keys.D] ? 0.1 : 0)); + forward.multiplyScalar( keysPressed[ keys.W ] ? - 0.1 : ( keysPressed[ keys.S ] ? 0.1 : 0 ) ); + sideways.multiplyScalar( keysPressed[ keys.A ] ? - 0.1 : ( keysPressed[ keys.D ] ? 0.1 : 0 ) ); var combined = forward.add( sideways ); - if( Math.abs( combined.x ) >= Math.abs( motion.velocity.x ) ) motion.velocity.x = combined.x; - if( Math.abs( combined.y ) >= Math.abs( motion.velocity.y ) ) motion.velocity.y = combined.y; - if( Math.abs( combined.z ) >= Math.abs( motion.velocity.z ) ) motion.velocity.z = combined.z; + if ( Math.abs( combined.x ) >= Math.abs( motion.velocity.x ) ) motion.velocity.x = combined.x; + if ( Math.abs( combined.y ) >= Math.abs( motion.velocity.y ) ) motion.velocity.y = combined.y; + if ( Math.abs( combined.z ) >= Math.abs( motion.velocity.z ) ) motion.velocity.z = combined.z; //jump - var vy = keysPressed[keys.SP] ? 0.7 : 0; + var vy = keysPressed[ keys.SP ] ? 0.7 : 0; motion.velocity.y += vy; + } + }; - })(); - var jumpPads = (function() { - var pads = [ new THREE.Vector3( -17.5, 8, -10 ), new THREE.Vector3( 17.5, 8, -10 ), new THREE.Vector3( 0, 8, 21 ) ]; + } )(); + + var jumpPads = ( function () { + + var pads = [ new THREE.Vector3( - 17.5, 8, - 10 ), new THREE.Vector3( 17.5, 8, - 10 ), new THREE.Vector3( 0, 8, 21 ) ]; var temp = new THREE.Vector3(); - return function() { - if( !motion.airborne ) { - for( var j = 0, n = pads.length; j < n; j++ ) { - if ( pads[j].distanceToSquared( motion.position ) < 2.3 ) { + return function () { + + if ( ! motion.airborne ) { + + for ( var j = 0, n = pads.length; j < n; j ++ ) { + + if ( pads[ j ].distanceToSquared( motion.position ) < 2.3 ) { // calculate velocity towards another side of platform from jump pad position - temp.copy( pads[j] ); temp.y = 0; temp.setLength( -0.8 ); temp.y = 0.7; + temp.copy( pads[ j ] ); temp.y = 0; temp.setLength( - 0.8 ); temp.y = 0.7; motion.airborne = true; motion.velocity.copy( temp ); break; + } + } + } + }; - })(); - var applyPhysics = (function() { + } )(); + + var applyPhysics = ( function () { + var timeStep = 5; var timeLeft = timeStep + 1; @@ -135,21 +161,22 @@ var kneeDeep = 0.4; var raycaster = new THREE.Raycaster(); - raycaster.ray.direction.set( 0, -1, 0 ); + raycaster.ray.direction.set( 0, - 1, 0 ); var angles = new THREE.Vector2(); var displacement = new THREE.Vector3(); - return function( dt ) { + return function ( dt ) { + var platform = scene.getObjectByName( "platform", true ); - if( platform ) { + if ( platform ) { timeLeft += dt; // run several fixed-step iterations to approximate varying-step dt = 5; - while( timeLeft >= dt ) { + while ( timeLeft >= dt ) { var time = 0.3, damping = 0.93, gravity = 0.01, tau = 2 * Math.PI; @@ -162,47 +189,57 @@ // are we above, or at most knee deep in, the platform? - if( ( hits.length > 0 ) && ( hits[0].face.normal.y > 0 ) ) { - var actualHeight = hits[0].distance - birdsEye; + if ( ( hits.length > 0 ) && ( hits[ 0 ].face.normal.y > 0 ) ) { + + var actualHeight = hits[ 0 ].distance - birdsEye; // collision: stick to the surface if landing on it - if( ( motion.velocity.y <= 0 ) && ( Math.abs( actualHeight ) < kneeDeep ) ) { + if ( ( motion.velocity.y <= 0 ) && ( Math.abs( actualHeight ) < kneeDeep ) ) { + motion.position.y -= actualHeight; motion.velocity.y = 0; motion.airborne = false; + } + } - if( motion.airborne ) motion.velocity.y -= gravity; + if ( motion.airborne ) motion.velocity.y -= gravity; angles.copy( motion.spinning ).multiplyScalar( time ); - if( !motion.airborne ) motion.spinning.multiplyScalar( damping ); + if ( ! motion.airborne ) motion.spinning.multiplyScalar( damping ); displacement.copy( motion.velocity ).multiplyScalar( time ); - if( !motion.airborne ) motion.velocity.multiplyScalar( damping ); + if ( ! motion.airborne ) motion.velocity.multiplyScalar( damping ); motion.rotation.add( angles ); motion.position.add( displacement ); // limit the tilt at ±0.4 radians - motion.rotation.x = Math.max( -0.4, Math.min ( +0.4, motion.rotation.x ) ); + motion.rotation.x = Math.max( - 0.4, Math.min( + 0.4, motion.rotation.x ) ); // wrap horizontal rotation to 0...2π motion.rotation.y += tau; motion.rotation.y %= tau; timeLeft -= dt; + } + } + }; - })(); - var updateCamera = (function() { + } )(); + + var updateCamera = ( function () { + var euler = new THREE.Euler( 0, 0, 0, 'YXZ' ); - return function() { + return function () { + euler.x = motion.rotation.x; euler.y = motion.rotation.y; camera.quaternion.setFromEuler( euler ); @@ -210,13 +247,16 @@ camera.position.copy( motion.position ); camera.position.y += 3.0; + }; - })(); + + } )(); // init 3D stuff function makePlatform( jsonUrl, textureUrl, textureQuality ) { + var placeholder = new THREE.Object3D(); var texture = new THREE.TextureLoader().load( textureUrl ); @@ -224,21 +264,23 @@ texture.anisotropy = textureQuality; var loader = new THREE.JSONLoader(); - loader.load( jsonUrl, function( geometry ) { + loader.load( jsonUrl, function ( geometry ) { geometry.computeFaceNormals(); - var platform = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial({ map : texture }) ); + var platform = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: texture } ) ); platform.name = "platform"; placeholder.add( platform ); - }); + + } ); return placeholder; + } - var renderer = new THREE.WebGLRenderer( { antialias : true } ); + var renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setPixelRatio( window.devicePixelRatio ); document.body.appendChild( renderer.domElement ); @@ -252,7 +294,7 @@ 'textures/cube/skybox/py.jpg', // top 'textures/cube/skybox/ny.jpg', // bottom 'textures/cube/skybox/pz.jpg', // back - 'textures/cube/skybox/nz.jpg' // front + 'textures/cube/skybox/nz.jpg' // front ] ); envMap.format = THREE.RGBFormat; @@ -262,24 +304,28 @@ 'models/platform/platform.json', 'models/platform/platform.jpg', renderer.capabilities.getMaxAnisotropy() - )); + ) ); // start the game - var start = function( gameLoop, gameViewportSize ) { - var resize = function() { + var start = function ( gameLoop, gameViewportSize ) { + + var resize = function () { + var viewport = gameViewportSize(); renderer.setSize( viewport.width, viewport.height ); camera.aspect = viewport.width / viewport.height; camera.updateProjectionMatrix(); + }; window.addEventListener( 'resize', resize, false ); resize(); var lastTimeStamp; - var render = function( timeStamp ) { + var render = function ( timeStamp ) { + var timeElapsed = lastTimeStamp ? timeStamp - lastTimeStamp : 0; lastTimeStamp = timeStamp; // call our game loop with the time elapsed since last rendering, in ms @@ -287,23 +333,33 @@ renderer.render( scene, camera ); requestAnimationFrame( render ); + }; requestAnimationFrame( render ); + }; - var gameLoop = function( dt ) { + var gameLoop = function ( dt ) { + resetPlayer(); keyboardControls(); jumpPads(); applyPhysics( dt ); updateCamera(); + }; - var gameViewportSize = function() { return { - width: window.innerWidth, height: window.innerHeight - }}; + var gameViewportSize = function () { + + return { + + width: window.innerWidth, height: window.innerHeight + + }; + + }; start( gameLoop, gameViewportSize ); diff --git a/examples/misc_lights_test.html b/examples/misc_lights_test.html index ee0e235e080edb..66be3a8e2eb272 100644 --- a/examples/misc_lights_test.html +++ b/examples/misc_lights_test.html @@ -13,7 +13,6 @@ font-family:georgia; text-align:center; } - h1 { } a { color:skyblue } canvas { pointer-events:none; z-index:10; } @@ -36,13 +35,12 @@ var SCREEN_WIDTH = window.innerWidth / 2; var SCREEN_HEIGHT = window.innerHeight; - var FLOOR = -250; var container, stats; var camera, scene, canvasRenderer, webglRenderer; - var mesh, zmesh, geometry, material; + var mesh, geometry, material; var directionalLight, pointLight; @@ -60,8 +58,8 @@ function init() { - container = document.createElement('div'); - document.body.appendChild(container); + container = document.createElement( 'div' ); + document.body.appendChild( container ); camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 ); camera.position.z = 500; @@ -97,7 +95,7 @@ scene.add( ambient ); directionalLight = new THREE.DirectionalLight( 0xffffff ); - directionalLight.position.set( 0, -70, 100 ).normalize(); + directionalLight.position.set( 0, - 70, 100 ).normalize(); setTimeout( function () { diff --git a/examples/misc_lookat.html b/examples/misc_lookat.html index a70c0be981ffac..88206a65fd1975 100644 --- a/examples/misc_lookat.html +++ b/examples/misc_lookat.html @@ -39,7 +39,7 @@ var camera, scene, renderer, stats; - var mesh, geometry, sphere; + var sphere; var mouseX = 0, mouseY = 0; @@ -107,7 +107,7 @@ } - function onDocumentMouseMove(event) { + function onDocumentMouseMove( event ) { mouseX = ( event.clientX - windowHalfX ) * 10; mouseY = ( event.clientY - windowHalfY ) * 10; diff --git a/examples/misc_ubiquity_test.html b/examples/misc_ubiquity_test.html index c22aebf18f86cc..1974c10f715934 100644 --- a/examples/misc_ubiquity_test.html +++ b/examples/misc_ubiquity_test.html @@ -25,8 +25,6 @@ diff --git a/examples/webvr_cubes.html b/examples/webvr_cubes.html index 741048c8157056..22f77a69211578 100644 --- a/examples/webvr_cubes.html +++ b/examples/webvr_cubes.html @@ -153,19 +153,26 @@ } function onPointerRestricted() { + var pointerLockElement = renderer.domElement; - if ( pointerLockElement && typeof(pointerLockElement.requestPointerLock) === 'function' ) { + if ( pointerLockElement && typeof ( pointerLockElement.requestPointerLock ) === 'function' ) { + pointerLockElement.requestPointerLock(); } + } function onPointerUnrestricted() { + var currentPointerLockElement = document.pointerLockElement; var expectedPointerLockElement = renderer.domElement; - if ( currentPointerLockElement && currentPointerLockElement === expectedPointerLockElement && typeof(document.exitPointerLock) === 'function' ) { + if ( currentPointerLockElement && currentPointerLockElement === expectedPointerLockElement && typeof ( document.exitPointerLock ) === 'function' ) { + document.exitPointerLock(); + } + } function onWindowResize() { diff --git a/examples/webvr_dragging.html b/examples/webvr_dragging.html index 3cd0bc7568af49..88de575064add2 100644 --- a/examples/webvr_dragging.html +++ b/examples/webvr_dragging.html @@ -77,9 +77,9 @@ light.position.set( 0, 6, 0 ); light.castShadow = true; light.shadow.camera.top = 2; - light.shadow.camera.bottom = -2; + light.shadow.camera.bottom = - 2; light.shadow.camera.right = 2; - light.shadow.camera.left = -2; + light.shadow.camera.left = - 2; light.shadow.mapSize.set( 4096, 4096 ); scene.add( light ); @@ -223,7 +223,7 @@ tempMatrix.identity().extractRotation( controller.matrixWorld ); raycaster.ray.origin.setFromMatrixPosition( controller.matrixWorld ); - raycaster.ray.direction.set( 0, 0, -1 ).applyMatrix4( tempMatrix ); + raycaster.ray.direction.set( 0, 0, - 1 ).applyMatrix4( tempMatrix ); return raycaster.intersectObjects( group.children ); diff --git a/examples/webvr_paint.html b/examples/webvr_paint.html index 14889b59d3b390..8a11a9fce476f0 100644 --- a/examples/webvr_paint.html +++ b/examples/webvr_paint.html @@ -40,16 +40,12 @@ var shapes = {}; var up = new THREE.Vector3( 0, 1, 0 ); - var vector = new THREE.Vector3(); var vector1 = new THREE.Vector3(); var vector2 = new THREE.Vector3(); var vector3 = new THREE.Vector3(); var vector4 = new THREE.Vector3(); - var point4 = new THREE.Vector3(); - var point5 = new THREE.Vector3(); - init(); initGeometry(); animate(); @@ -113,9 +109,9 @@ light.position.set( 0, 6, 0 ); light.castShadow = true; light.shadow.camera.top = 2; - light.shadow.camera.bottom = -2; + light.shadow.camera.bottom = - 2; light.shadow.camera.right = 2; - light.shadow.camera.left = -2; + light.shadow.camera.left = - 2; light.shadow.mapSize.set( 4096, 4096 ); scene.add( light ); @@ -180,8 +176,8 @@ // var pivot = new THREE.Mesh( new THREE.BoxBufferGeometry( 0.01, 0.01, 0.01 ) ); var pivot = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 0.01, 2 ) ); pivot.name = 'pivot'; - pivot.position.y = -0.016; - pivot.position.z = -0.043; + pivot.position.y = - 0.016; + pivot.position.z = - 0.043; pivot.rotation.x = Math.PI / 5.5; controller.add( pivot ); @@ -246,6 +242,7 @@ // Shapes shapes[ 'tube' ] = getTubeShapes( 1.0 ); + } function getTubeShapes( size ) { @@ -256,7 +253,7 @@ var array = []; var radius = 0.01 * size; - for( var i = 0; i < sides; i ++ ) { + for ( var i = 0; i < sides; i ++ ) { var angle = ( i / sides ) * PI2; array.push( new THREE.Vector3( Math.sin( angle ) * radius, Math.cos( angle ) * radius, 0 ) ); @@ -264,8 +261,8 @@ } return array; - } + } function stroke( controller, point1, point2, matrix1, matrix2 ) { diff --git a/examples/webvr_panorama.html b/examples/webvr_panorama.html index c9cd9362b17c20..07d3e921314559 100644 --- a/examples/webvr_panorama.html +++ b/examples/webvr_panorama.html @@ -107,7 +107,7 @@ canvas.height = tileWidth; canvas.width = tileWidth; context.drawImage( imageObj, tileWidth * i, 0, tileWidth, tileWidth, 0, 0, tileWidth, tileWidth ); - textures[ i ].image = canvas + textures[ i ].image = canvas; textures[ i ].needsUpdate = true; } diff --git a/examples/webvr_rollercoaster.html b/examples/webvr_rollercoaster.html index 7e906f01fb24da..8556a56f765eb7 100644 --- a/examples/webvr_rollercoaster.html +++ b/examples/webvr_rollercoaster.html @@ -128,7 +128,7 @@ var t1 = Math.max( 0, t - delta ); var t2 = Math.min( 1, t + delta ); - return vector2.copy( this.getPointAt ( t2 ) ) + return vector2.copy( this.getPointAt( t2 ) ) .sub( this.getPointAt( t1 ) ).normalize(); } diff --git a/examples/webvr_sandbox.html b/examples/webvr_sandbox.html index 388de0bee0f473..076890ad6b2cf6 100644 --- a/examples/webvr_sandbox.html +++ b/examples/webvr_sandbox.html @@ -93,7 +93,7 @@ var texture3 = loader.load( "textures/lensflare/lensflare3.png" ); var lensflare = new THREE.Lensflare(); - lensflare.position.set( 0, 5, -5 ); + lensflare.position.set( 0, 5, - 5 ); lensflare.addElement( new THREE.LensflareElement( texture0, 700, 0 ) ); lensflare.addElement( new THREE.LensflareElement( texture3, 60, 0.6 ) ); lensflare.addElement( new THREE.LensflareElement( texture3, 70, 0.7 ) ); @@ -110,7 +110,7 @@ } ); reflector.position.x = 1; reflector.position.y = 0.5; - reflector.position.z = -3; + reflector.position.z = - 3; reflector.rotation.y = - Math.PI / 4; scene.add( reflector ); diff --git a/examples/webvr_sculpt.html b/examples/webvr_sculpt.html index 5bb2442f9930c4..0dc80c4ebfa758 100644 --- a/examples/webvr_sculpt.html +++ b/examples/webvr_sculpt.html @@ -37,7 +37,7 @@ var camera, scene, renderer; var controller1, controller2; - var blob, vector; + var blob; var points = []; @@ -95,9 +95,9 @@ light.position.set( 0, 6, 0 ); light.castShadow = true; light.shadow.camera.top = 2; - light.shadow.camera.bottom = -2; + light.shadow.camera.bottom = - 2; light.shadow.camera.right = 2; - light.shadow.camera.left = -2; + light.shadow.camera.left = - 2; light.shadow.mapSize.set( 4096, 4096 ); scene.add( light ); @@ -160,8 +160,8 @@ // var pivot = new THREE.Mesh( new THREE.BoxBufferGeometry( 0.01, 0.01, 0.01 ) ); var pivot = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 0.002, 2 ), blob.material ); pivot.name = 'pivot'; - pivot.position.y = -0.016; - pivot.position.z = -0.043; + pivot.position.y = - 0.016; + pivot.position.z = - 0.043; pivot.rotation.x = Math.PI / 5.5; controller.add( pivot ); @@ -212,7 +212,7 @@ function initPoints() { points = [ - { position: new THREE.Vector3(), strength: 0.04, subtract: 10 }, + { position: new THREE.Vector3(), strength: 0.04, subtract: 10 }, { position: new THREE.Vector3(), strength: - 0.08, subtract: 10 } ]; diff --git a/examples/webvr_vive_paint.html b/examples/webvr_vive_paint.html index dcc552fb2968d0..afdcee4d8517bb 100644 --- a/examples/webvr_vive_paint.html +++ b/examples/webvr_vive_paint.html @@ -43,16 +43,12 @@ var shapes = {}; var up = new THREE.Vector3( 0, 1, 0 ); - var vector = new THREE.Vector3(); var vector1 = new THREE.Vector3(); var vector2 = new THREE.Vector3(); var vector3 = new THREE.Vector3(); var vector4 = new THREE.Vector3(); - var point4 = new THREE.Vector3(); - var point5 = new THREE.Vector3(); - init(); initGeometry(); animate(); @@ -116,9 +112,9 @@ light.position.set( 0, 6, 0 ); light.castShadow = true; light.shadow.camera.top = 2; - light.shadow.camera.bottom = -2; + light.shadow.camera.bottom = - 2; light.shadow.camera.right = 2; - light.shadow.camera.left = -2; + light.shadow.camera.left = - 2; light.shadow.mapSize.set( 4096, 4096 ); scene.add( light ); @@ -169,8 +165,8 @@ // var pivot = new THREE.Mesh( new THREE.BoxBufferGeometry( 0.01, 0.01, 0.01 ) ); var pivot = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 0.01, 2 ) ); pivot.name = 'pivot'; - pivot.position.y = -0.016; - pivot.position.z = -0.043; + pivot.position.y = - 0.016; + pivot.position.z = - 0.043; pivot.rotation.x = Math.PI / 5.5; controller.add( pivot ); @@ -235,6 +231,7 @@ // Shapes shapes[ 'tube' ] = getTubeShapes( 1.0 ); + } function getTubeShapes( size ) { @@ -245,7 +242,7 @@ var array = []; var radius = 0.01 * size; - for( var i = 0; i < sides; i ++ ) { + for ( var i = 0; i < sides; i ++ ) { var angle = ( i / sides ) * PI2; array.push( new THREE.Vector3( Math.sin( angle ) * radius, Math.cos( angle ) * radius, 0 ) ); @@ -253,6 +250,7 @@ } return array; + } @@ -389,7 +387,7 @@ if ( pivot ) { pivot.material.color.copy( controller.getColor() ); - pivot.scale.setScalar(controller.getSize()); + pivot.scale.setScalar( controller.getSize() ); var matrix = pivot.matrixWorld; diff --git a/examples/webvr_vive_sculpt.html b/examples/webvr_vive_sculpt.html index 74b7c4d6b81b51..f3210a398f7875 100644 --- a/examples/webvr_vive_sculpt.html +++ b/examples/webvr_vive_sculpt.html @@ -39,7 +39,7 @@ var camera, scene, renderer; var controller1, controller2; - var blob, vector; + var blob; var points = []; @@ -97,9 +97,9 @@ light.position.set( 0, 6, 0 ); light.castShadow = true; light.shadow.camera.top = 2; - light.shadow.camera.bottom = -2; + light.shadow.camera.bottom = - 2; light.shadow.camera.right = 2; - light.shadow.camera.left = -2; + light.shadow.camera.left = - 2; light.shadow.mapSize.set( 4096, 4096 ); scene.add( light ); @@ -146,8 +146,8 @@ // var pivot = new THREE.Mesh( new THREE.BoxBufferGeometry( 0.01, 0.01, 0.01 ) ); var pivot = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 0.002, 2 ), blob.material ); pivot.name = 'pivot'; - pivot.position.y = -0.016; - pivot.position.z = -0.043; + pivot.position.y = - 0.016; + pivot.position.z = - 0.043; pivot.rotation.x = Math.PI / 5.5; controller.add( pivot ); @@ -198,7 +198,7 @@ points = [ { position: new THREE.Vector3(), strength: - 0.08, subtract: 10 }, - { position: new THREE.Vector3(), strength: 0.04, subtract: 10 } + { position: new THREE.Vector3(), strength: 0.04, subtract: 10 } ]; }