From f658b6f2a30baba6c7bbe60b5d3eccdcaf12f31c Mon Sep 17 00:00:00 2001 From: Mugen87 Date: Mon, 15 Jan 2018 18:27:01 +0100 Subject: [PATCH] Docs: Clean up geometry.js and material.js --- docs/scenes/js/geometry.js | 498 ++++++++++++++++--------------------- docs/scenes/js/material.js | 347 +++++++++++++------------- 2 files changed, 391 insertions(+), 454 deletions(-) diff --git a/docs/scenes/js/geometry.js b/docs/scenes/js/geometry.js index decb05cb78..dae04bfec9 100644 --- a/docs/scenes/js/geometry.js +++ b/docs/scenes/js/geometry.js @@ -4,74 +4,6 @@ var twoPi = Math.PI * 2; -var constants = { - - combine: { - - "THREE.MultiplyOperation" : THREE.MultiplyOperation, - "THREE.MixOperation" : THREE.MixOperation, - "THREE.AddOperation" : THREE.AddOperation - - }, - - side : { - - "THREE.FrontSide" : THREE.FrontSide, - "THREE.BackSide" : THREE.BackSide, - "THREE.DoubleSide" : THREE.DoubleSide - - }, - - colors : { - - "THREE.NoColors" : THREE.NoColors, - "THREE.FaceColors" : THREE.FaceColors, - "THREE.VertexColors" : THREE.VertexColors - - }, - - blendingMode : { - - "THREE.NoBlending" : THREE.NoBlending, - "THREE.NormalBlending" : THREE.NormalBlending, - "THREE.AdditiveBlending" : THREE.AdditiveBlending, - "THREE.SubtractiveBlending" : THREE.SubtractiveBlending, - "THREE.MultiplyBlending" : THREE.MultiplyBlending, - "THREE.CustomBlending" : THREE.CustomBlending - - }, - - equations : { - - "THREE.AddEquation" : THREE.AddEquation, - "THREE.SubtractEquation" : THREE.SubtractEquation, - "THREE.ReverseSubtractEquation" : THREE.ReverseSubtractEquation - - }, - - destinationFactors : { - - "THREE.ZeroFactor" : THREE.ZeroFactor, - "THREE.OneFactor" : THREE.OneFactor, - "THREE.SrcColorFactor" : THREE.SrcColorFactor, - "THREE.OneMinusSrcColorFactor" : THREE.OneMinusSrcColorFactor, - "THREE.SrcAlphaFactor" : THREE.SrcAlphaFactor, - "THREE.OneMinusSrcAlphaFactor" : THREE.OneMinusSrcAlphaFactor, - "THREE.DstAlphaFactor" : THREE.DstAlphaFactor, - "THREE.OneMinusDstAlphaFactor" : THREE.OneMinusDstAlphaFactor - - }, - - sourceFactors : { - - "THREE.DstColorFactor" : THREE.DstColorFactor, - "THREE.OneMinusDstColorFactor" : THREE.OneMinusDstColorFactor, - "THREE.SrcAlphaSaturateFactor" : THREE.SrcAlphaSaturateFactor - - } - -}; - function updateGroupGeometry( mesh, geometry ) { mesh.children[ 0 ].geometry.dispose(); @@ -113,7 +45,7 @@ var heartShape = new THREE.Shape(); heartShape.moveTo( x + 5, y + 5 ); heartShape.bezierCurveTo( x + 5, y + 5, x + 4, y, x, y ); -heartShape.bezierCurveTo( x - 6, y, x - 6, y + 7,x - 6, y + 7 ); +heartShape.bezierCurveTo( x - 6, y, x - 6, y + 7, x - 6, y + 7 ); heartShape.bezierCurveTo( x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19 ); heartShape.bezierCurveTo( x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7 ); heartShape.bezierCurveTo( x + 16, y + 7, x + 16, y, x + 10, y ); @@ -121,15 +53,15 @@ heartShape.bezierCurveTo( x + 7, y, x + 5, y + 5, x + 5, y + 5 ); var guis = { - BoxBufferGeometry : function( mesh ) { + BoxBufferGeometry: function ( mesh ) { var data = { - width : 15, - height : 15, - depth : 15, - widthSegments : 1, - heightSegments : 1, - depthSegments : 1 + width: 15, + height: 15, + depth: 15, + widthSegments: 1, + heightSegments: 1, + depthSegments: 1 }; function generateGeometry() { @@ -155,15 +87,15 @@ var guis = { }, - BoxGeometry : function( mesh ) { + BoxGeometry: function ( mesh ) { var data = { - width : 15, - height : 15, - depth : 15, - widthSegments : 1, - heightSegments : 1, - depthSegments : 1 + width: 15, + height: 15, + depth: 15, + widthSegments: 1, + heightSegments: 1, + depthSegments: 1 }; function generateGeometry() { @@ -189,17 +121,17 @@ var guis = { }, - CylinderBufferGeometry : function( mesh ) { + CylinderBufferGeometry: function ( mesh ) { var data = { - radiusTop : 5, - radiusBottom : 5, - height : 10, - radiusSegments : 8, - heightSegments : 1, - openEnded : false, - thetaStart : 0, - thetaLength : twoPi + radiusTop: 5, + radiusBottom: 5, + height: 10, + radiusSegments: 8, + heightSegments: 1, + openEnded: false, + thetaStart: 0, + thetaLength: twoPi }; function generateGeometry() { @@ -235,17 +167,17 @@ var guis = { }, - CylinderGeometry : function( mesh ) { + CylinderGeometry: function ( mesh ) { var data = { - radiusTop : 5, - radiusBottom : 5, - height : 10, - radiusSegments : 8, - heightSegments : 1, - openEnded : false, - thetaStart : 0, - thetaLength : twoPi + radiusTop: 5, + radiusBottom: 5, + height: 10, + radiusSegments: 8, + heightSegments: 1, + openEnded: false, + thetaStart: 0, + thetaLength: twoPi }; function generateGeometry() { @@ -281,16 +213,16 @@ var guis = { }, - ConeBufferGeometry : function( mesh ) { + ConeBufferGeometry: function ( mesh ) { var data = { - radius : 5, - height : 10, - radiusSegments : 8, - heightSegments : 1, - openEnded : false, - thetaStart : 0, - thetaLength : twoPi + radius: 5, + height: 10, + radiusSegments: 8, + heightSegments: 1, + openEnded: false, + thetaStart: 0, + thetaLength: twoPi }; function generateGeometry() { @@ -324,16 +256,16 @@ var guis = { }, - ConeGeometry : function( mesh ) { + ConeGeometry: function ( mesh ) { var data = { - radius : 5, - height : 10, - radiusSegments : 8, - heightSegments : 1, - openEnded : false, - thetaStart : 0, - thetaLength : twoPi + radius: 5, + height: 10, + radiusSegments: 8, + heightSegments: 1, + openEnded: false, + thetaStart: 0, + thetaLength: twoPi }; function generateGeometry() { @@ -368,13 +300,13 @@ var guis = { }, - CircleBufferGeometry : function( mesh ) { + CircleBufferGeometry: function ( mesh ) { var data = { - radius : 10, - segments : 32, - thetaStart : 0, - thetaLength : twoPi + radius: 10, + segments: 32, + thetaStart: 0, + thetaLength: twoPi }; function generateGeometry() { @@ -398,13 +330,13 @@ var guis = { }, - CircleGeometry : function( mesh ) { + CircleGeometry: function ( mesh ) { var data = { - radius : 10, - segments : 32, - thetaStart : 0, - thetaLength : twoPi + radius: 10, + segments: 32, + thetaStart: 0, + thetaLength: twoPi }; function generateGeometry() { @@ -428,11 +360,11 @@ var guis = { }, - DodecahedronGeometry : function() { + DodecahedronGeometry: function ( mesh ) { var data = { - radius : 10, - detail : 0 + radius: 10, + detail: 0 }; function generateGeometry() { @@ -454,11 +386,11 @@ var guis = { }, - DodecahedronBufferGeometry : function() { + DodecahedronBufferGeometry: function ( mesh ) { var data = { - radius : 10, - detail : 0 + radius: 10, + detail: 0 }; function generateGeometry() { @@ -480,11 +412,11 @@ var guis = { }, - IcosahedronGeometry : function() { + IcosahedronGeometry: function ( mesh ) { var data = { - radius : 10, - detail : 0 + radius: 10, + detail: 0 }; function generateGeometry() { @@ -506,11 +438,11 @@ var guis = { }, - IcosahedronBufferGeometry : function() { + IcosahedronBufferGeometry: function ( mesh ) { var data = { - radius : 10, - detail : 0 + radius: 10, + detail: 0 }; function generateGeometry() { @@ -532,7 +464,7 @@ var guis = { }, - LatheBufferGeometry : function() { + LatheBufferGeometry: function ( mesh ) { var points = []; @@ -543,9 +475,9 @@ var guis = { } var data = { - segments : 12, - phiStart : 0, - phiLength : twoPi + segments: 12, + phiStart: 0, + phiLength: twoPi }; function generateGeometry() { @@ -568,7 +500,7 @@ var guis = { }, - LatheGeometry : function() { + LatheGeometry: function ( mesh ) { var points = []; @@ -579,9 +511,9 @@ var guis = { } var data = { - segments : 12, - phiStart : 0, - phiLength : twoPi + segments: 12, + phiStart: 0, + phiLength: twoPi }; function generateGeometry() { @@ -604,11 +536,11 @@ var guis = { }, - OctahedronGeometry : function() { + OctahedronGeometry: function ( mesh ) { var data = { - radius : 10, - detail : 0 + radius: 10, + detail: 0 }; function generateGeometry() { @@ -630,11 +562,11 @@ var guis = { }, - OctahedronBufferGeometry : function() { + OctahedronBufferGeometry: function ( mesh ) { var data = { - radius : 10, - detail : 0 + radius: 10, + detail: 0 }; function generateGeometry() { @@ -656,13 +588,13 @@ var guis = { }, - PlaneBufferGeometry : function( mesh ) { + PlaneBufferGeometry: function ( mesh ) { var data = { - width : 10, - height : 10, - widthSegments : 1, - heightSegments : 1 + width: 10, + height: 10, + widthSegments: 1, + heightSegments: 1 }; function generateGeometry() { @@ -686,13 +618,13 @@ var guis = { }, - PlaneGeometry : function( mesh ) { + PlaneGeometry: function ( mesh ) { var data = { - width : 10, - height : 10, - widthSegments : 1, - heightSegments : 1 + width: 10, + height: 10, + widthSegments: 1, + heightSegments: 1 }; function generateGeometry() { @@ -716,15 +648,15 @@ var guis = { }, - RingBufferGeometry : function( mesh ) { + RingBufferGeometry: function ( mesh ) { var data = { - innerRadius : 5, - outerRadius : 10, - thetaSegments : 8, - phiSegments : 8, - thetaStart : 0, - thetaLength : twoPi + innerRadius: 5, + outerRadius: 10, + thetaSegments: 8, + phiSegments: 8, + thetaStart: 0, + thetaLength: twoPi }; function generateGeometry() { @@ -750,15 +682,15 @@ var guis = { }, - RingGeometry : function( mesh ) { + RingGeometry: function ( mesh ) { var data = { - innerRadius : 5, - outerRadius : 10, - thetaSegments : 8, - phiSegments : 8, - thetaStart : 0, - thetaLength : twoPi + innerRadius: 5, + outerRadius: 10, + thetaSegments: 8, + phiSegments: 8, + thetaStart: 0, + thetaLength: twoPi }; function generateGeometry() { @@ -784,16 +716,16 @@ var guis = { }, - SphereBufferGeometry : function( mesh ) { + SphereBufferGeometry: function ( mesh ) { var data = { - radius : 15, - widthSegments : 8, - heightSegments : 6, - phiStart : 0, - phiLength : twoPi, - thetaStart : 0, - thetaLength : Math.PI + radius: 15, + widthSegments: 8, + heightSegments: 6, + phiStart: 0, + phiLength: twoPi, + thetaStart: 0, + thetaLength: Math.PI }; function generateGeometry() { @@ -820,16 +752,16 @@ var guis = { }, - SphereGeometry : function( mesh ) { + SphereGeometry: function ( mesh ) { var data = { - radius : 15, - widthSegments : 8, - heightSegments : 6, - phiStart : 0, - phiLength : twoPi, - thetaStart : 0, - thetaLength : Math.PI + radius: 15, + widthSegments: 8, + heightSegments: 6, + phiStart: 0, + phiLength: twoPi, + thetaStart: 0, + thetaLength: Math.PI }; function generateGeometry() { @@ -856,11 +788,11 @@ var guis = { }, - TetrahedronGeometry : function() { + TetrahedronGeometry: function ( mesh ) { var data = { - radius : 10, - detail : 0 + radius: 10, + detail: 0 }; function generateGeometry() { @@ -882,11 +814,11 @@ var guis = { }, - TetrahedronBufferGeometry : function() { + TetrahedronBufferGeometry: function ( mesh ) { var data = { - radius : 10, - detail : 0 + radius: 10, + detail: 0 }; function generateGeometry() { @@ -908,19 +840,19 @@ var guis = { }, - TextGeometry : function( mesh ) { + TextGeometry: function ( mesh ) { var data = { - text : "TextGeometry", - size : 5, - height : 2, - curveSegments : 12, - font : "helvetiker", - weight : "regular", - bevelEnabled : false, - bevelThickness : 1, - bevelSize : 0.5, - bevelSegments : 3 + text: "TextGeometry", + size: 5, + height: 2, + curveSegments: 12, + font: "helvetiker", + weight: "regular", + bevelEnabled: false, + bevelThickness: 1, + bevelSize: 0.5, + bevelSegments: 3 }; var fonts = [ @@ -977,19 +909,19 @@ var guis = { }, - TextBufferGeometry : function( mesh ) { + TextBufferGeometry: function ( mesh ) { var data = { - text : "TextBufferGeometry", - size : 5, - height : 2, - curveSegments : 12, - font : "helvetiker", - weight : "regular", - bevelEnabled : false, - bevelThickness : 1, - bevelSize : 0.5, - bevelSegments : 3 + text: "TextBufferGeometry", + size: 5, + height: 2, + curveSegments: 12, + font: "helvetiker", + weight: "regular", + bevelEnabled: false, + bevelThickness: 1, + bevelSize: 0.5, + bevelSegments: 3 }; var fonts = [ @@ -1046,14 +978,14 @@ var guis = { }, - TorusBufferGeometry : function( mesh ) { + TorusBufferGeometry: function ( mesh ) { var data = { - radius : 10, - tube : 3, - radialSegments : 16, - tubularSegments : 100, - arc : twoPi + radius: 10, + tube: 3, + radialSegments: 16, + tubularSegments: 100, + arc: twoPi }; function generateGeometry() { @@ -1078,14 +1010,14 @@ var guis = { }, - TorusGeometry : function( mesh ) { + TorusGeometry: function ( mesh ) { var data = { - radius : 10, - tube : 3, - radialSegments : 16, - tubularSegments : 100, - arc : twoPi + radius: 10, + tube: 3, + radialSegments: 16, + tubularSegments: 100, + arc: twoPi }; function generateGeometry() { @@ -1110,15 +1042,15 @@ var guis = { }, - TorusKnotBufferGeometry : function( mesh ) { + TorusKnotBufferGeometry: function ( mesh ) { var data = { - radius : 10, - tube : 3, - tubularSegments : 64, - radialSegments : 8, - p : 2, - q : 3 + radius: 10, + tube: 3, + tubularSegments: 64, + radialSegments: 8, + p: 2, + q: 3 }; function generateGeometry() { @@ -1145,15 +1077,15 @@ var guis = { }, - TorusKnotGeometry : function( mesh ) { + TorusKnotGeometry: function ( mesh ) { var data = { - radius : 10, - tube : 3, - tubularSegments : 64, - radialSegments : 8, - p : 2, - q : 3 + radius: 10, + tube: 3, + tubularSegments: 64, + radialSegments: 8, + p: 2, + q: 3 }; function generateGeometry() { @@ -1180,11 +1112,11 @@ var guis = { }, - ParametricBufferGeometry : function( mesh ) { + ParametricBufferGeometry: function ( mesh ) { var data = { - slices : 25, - stacks : 25 + slices: 25, + stacks: 25 }; function generateGeometry() { @@ -1204,11 +1136,11 @@ var guis = { }, - ParametricGeometry : function( mesh ) { + ParametricGeometry: function ( mesh ) { var data = { - slices : 25, - stacks : 25 + slices: 25, + stacks: 25 }; function generateGeometry() { @@ -1228,11 +1160,11 @@ var guis = { }, - TubeGeometry : function( mesh ) { + TubeGeometry: function ( mesh ) { var data = { - segments : 20, - radius : 2, + segments: 20, + radius: 2, radiusSegments: 8 }; @@ -1256,11 +1188,11 @@ var guis = { }, - TubeBufferGeometry : function( mesh ) { + TubeBufferGeometry: function ( mesh ) { var data = { - segments : 20, - radius : 2, + segments: 20, + radius: 2, radiusSegments: 8 }; @@ -1284,17 +1216,18 @@ var guis = { }, - ShapeGeometry: function( mesh ) { + ShapeGeometry: function ( mesh ) { var data = { - segments : 12 + segments: 12 }; function generateGeometry() { - updateGroupGeometry( mesh, - new THREE.ShapeGeometry( heartShape, data.segments ) - ); + var geometry = new THREE.ShapeGeometry( heartShape, data.segments ); + geometry.center(); + + updateGroupGeometry( mesh, geometry ); } @@ -1305,17 +1238,18 @@ var guis = { }, - ShapeBufferGeometry: function( mesh ) { + ShapeBufferGeometry: function ( mesh ) { var data = { - segments : 12 + segments: 12 }; function generateGeometry() { - updateGroupGeometry( mesh, - new THREE.ShapeBufferGeometry( heartShape, data.segments ) - ); + var geometry = new THREE.ShapeBufferGeometry( heartShape, data.segments ); + geometry.center(); + + updateGroupGeometry( mesh, geometry ); } @@ -1326,7 +1260,7 @@ var guis = { }, - ExtrudeGeometry: function( mesh ) { + ExtrudeGeometry: function ( mesh ) { var data = { steps: 2, @@ -1340,7 +1274,7 @@ var guis = { var length = 12, width = 8; var shape = new THREE.Shape(); - shape.moveTo( 0,0 ); + shape.moveTo( 0, 0 ); shape.lineTo( 0, width ); shape.lineTo( length, width ); shape.lineTo( length, 0 ); @@ -1348,9 +1282,10 @@ var guis = { function generateGeometry() { - updateGroupGeometry( mesh, - new THREE.ExtrudeGeometry( shape, data ) - ); + var geometry = new THREE.ExtrudeGeometry( shape, data ); + geometry.center(); + + updateGroupGeometry( mesh, geometry ); } @@ -1366,7 +1301,7 @@ var guis = { }, - ExtrudeBufferGeometry: function( mesh ) { + ExtrudeBufferGeometry: function ( mesh ) { var data = { steps: 2, @@ -1380,7 +1315,7 @@ var guis = { var length = 12, width = 8; var shape = new THREE.Shape(); - shape.moveTo( 0,0 ); + shape.moveTo( 0, 0 ); shape.lineTo( 0, width ); shape.lineTo( length, width ); shape.lineTo( length, 0 ); @@ -1388,9 +1323,10 @@ var guis = { function generateGeometry() { - updateGroupGeometry( mesh, - new THREE.ExtrudeBufferGeometry( shape, data ) - ); + var geometry = new THREE.ExtrudeBufferGeometry( shape, data ); + geometry.center(); + + updateGroupGeometry( mesh, geometry ); } @@ -1408,7 +1344,7 @@ var guis = { }; -function chooseFromHash ( mesh ) { +function chooseFromHash( mesh ) { var selectedGeometry = window.location.hash.substring( 1 ) || "TorusGeometry"; @@ -1420,7 +1356,7 @@ function chooseFromHash ( mesh ) { if ( selectedGeometry === 'TextGeometry' || selectedGeometry === 'TextBufferGeometry' ) { - return { fixed : true }; + return { fixed: true }; } diff --git a/docs/scenes/js/material.js b/docs/scenes/js/material.js index 4f2d2a0927..ce2e8e2a70 100644 --- a/docs/scenes/js/material.js +++ b/docs/scenes/js/material.js @@ -6,65 +6,65 @@ var constants = { combine: { - "THREE.MultiplyOperation" : THREE.MultiplyOperation, - "THREE.MixOperation" : THREE.MixOperation, - "THREE.AddOperation" : THREE.AddOperation + 'THREE.MultiplyOperation': THREE.MultiplyOperation, + 'THREE.MixOperation': THREE.MixOperation, + 'THREE.AddOperation': THREE.AddOperation }, - side : { + side: { - "THREE.FrontSide" : THREE.FrontSide, - "THREE.BackSide" : THREE.BackSide, - "THREE.DoubleSide" : THREE.DoubleSide + 'THREE.FrontSide': THREE.FrontSide, + 'THREE.BackSide': THREE.BackSide, + 'THREE.DoubleSide': THREE.DoubleSide }, - colors : { + colors: { - "THREE.NoColors" : THREE.NoColors, - "THREE.FaceColors" : THREE.FaceColors, - "THREE.VertexColors" : THREE.VertexColors + 'THREE.NoColors': THREE.NoColors, + 'THREE.FaceColors': THREE.FaceColors, + 'THREE.VertexColors': THREE.VertexColors }, - blendingMode : { + blendingMode: { - "THREE.NoBlending" : THREE.NoBlending, - "THREE.NormalBlending" : THREE.NormalBlending, - "THREE.AdditiveBlending" : THREE.AdditiveBlending, - "THREE.SubtractiveBlending" : THREE.SubtractiveBlending, - "THREE.MultiplyBlending" : THREE.MultiplyBlending, - "THREE.CustomBlending" : THREE.CustomBlending + 'THREE.NoBlending': THREE.NoBlending, + 'THREE.NormalBlending': THREE.NormalBlending, + 'THREE.AdditiveBlending': THREE.AdditiveBlending, + 'THREE.SubtractiveBlending': THREE.SubtractiveBlending, + 'THREE.MultiplyBlending': THREE.MultiplyBlending, + 'THREE.CustomBlending': THREE.CustomBlending }, - equations : { + equations: { - "THREE.AddEquation" : THREE.AddEquation, - "THREE.SubtractEquation" : THREE.SubtractEquation, - "THREE.ReverseSubtractEquation" : THREE.ReverseSubtractEquation + 'THREE.AddEquation': THREE.AddEquation, + 'THREE.SubtractEquation': THREE.SubtractEquation, + 'THREE.ReverseSubtractEquation': THREE.ReverseSubtractEquation }, - destinationFactors : { + destinationFactors: { - "THREE.ZeroFactor" : THREE.ZeroFactor, - "THREE.OneFactor" : THREE.OneFactor, - "THREE.SrcColorFactor" : THREE.SrcColorFactor, - "THREE.OneMinusSrcColorFactor" : THREE.OneMinusSrcColorFactor, - "THREE.SrcAlphaFactor" : THREE.SrcAlphaFactor, - "THREE.OneMinusSrcAlphaFactor" : THREE.OneMinusSrcAlphaFactor, - "THREE.DstAlphaFactor" : THREE.DstAlphaFactor, - "THREE.OneMinusDstAlphaFactor" : THREE.OneMinusDstAlphaFactor + 'THREE.ZeroFactor': THREE.ZeroFactor, + 'THREE.OneFactor': THREE.OneFactor, + 'THREE.SrcColorFactor': THREE.SrcColorFactor, + 'THREE.OneMinusSrcColorFactor': THREE.OneMinusSrcColorFactor, + 'THREE.SrcAlphaFactor': THREE.SrcAlphaFactor, + 'THREE.OneMinusSrcAlphaFactor': THREE.OneMinusSrcAlphaFactor, + 'THREE.DstAlphaFactor': THREE.DstAlphaFactor, + 'THREE.OneMinusDstAlphaFactor': THREE.OneMinusDstAlphaFactor }, - sourceFactors : { + sourceFactors: { - "THREE.DstColorFactor" : THREE.DstColorFactor, - "THREE.OneMinusDstColorFactor" : THREE.OneMinusDstColorFactor, - "THREE.SrcAlphaSaturateFactor" : THREE.SrcAlphaSaturateFactor + 'THREE.DstColorFactor': THREE.DstColorFactor, + 'THREE.OneMinusDstColorFactor': THREE.OneMinusDstColorFactor, + 'THREE.SrcAlphaSaturateFactor': THREE.SrcAlphaSaturateFactor } @@ -85,11 +85,12 @@ function getObjectsKeys( obj ) { } return keys; + } -var envMaps = (function () { +var envMaps = ( function () { - var path = "../../examples/textures/cube/SwedishRoyalCastle/"; + var path = '../../examples/textures/cube/SwedishRoyalCastle/'; var format = '.jpg'; var urls = [ path + 'px' + format, path + 'nx' + format, @@ -105,47 +106,47 @@ var envMaps = (function () { refractionCube.format = THREE.RGBFormat; return { - none : null, - reflection : reflectionCube, - refraction : refractionCube + none: null, + reflection: reflectionCube, + refraction: refractionCube }; -})(); +} )(); var envMapKeys = getObjectsKeys( envMaps ); -var textureMaps = (function () { +var textureMaps = ( function () { return { - none : null, - grass : new THREE.TextureLoader().load( "../../examples/textures/terrain/grasslight-thin.jpg" ) + none: null, + grass: new THREE.TextureLoader().load( '../../examples/textures/terrain/grasslight-thin.jpg' ) }; -})(); +} )(); var textureMapKeys = getObjectsKeys( textureMaps ); -function generateVertexColors ( geometry ) { +function generateVertexColors( geometry ) { - for ( var i=0, il = geometry.faces.length; i < il; i++ ) { + for ( var i = 0, il = geometry.faces.length; i < il; i ++ ) { - geometry.faces[i].vertexColors.push( new THREE.Color().setHSL( + geometry.faces[ i ].vertexColors.push( new THREE.Color().setHSL( i / il * Math.random(), 0.5, 0.5 ) ); - geometry.faces[i].vertexColors.push( new THREE.Color().setHSL( + geometry.faces[ i ].vertexColors.push( new THREE.Color().setHSL( i / il * Math.random(), 0.5, 0.5 ) ); - geometry.faces[i].vertexColors.push( new THREE.Color().setHSL( + geometry.faces[ i ].vertexColors.push( new THREE.Color().setHSL( i / il * Math.random(), 0.5, 0.5 ) ); - geometry.faces[i].color = new THREE.Color().setHSL( + geometry.faces[ i ].color = new THREE.Color().setHSL( i / il * Math.random(), 0.5, 0.5 @@ -155,11 +156,11 @@ function generateVertexColors ( geometry ) { } -function generateMorphTargets ( mesh, geometry ) { +function generateMorphTargets( mesh, geometry ) { var vertices = [], scale; - for ( var i = 0; i < geometry.vertices.length; i++ ) { + for ( var i = 0; i < geometry.vertices.length; i ++ ) { vertices.push( geometry.vertices[ i ].clone() ); @@ -171,32 +172,32 @@ function generateMorphTargets ( mesh, geometry ) { } - geometry.morphTargets.push( { name: "target1", vertices: vertices } ); + geometry.morphTargets.push( { name: 'target1', vertices: vertices } ); } -function handleColorChange ( color ) { +function handleColorChange( color ) { - return function ( value ){ + return function ( value ) { - if (typeof value === "string") { + if ( typeof value === 'string' ) { - value = value.replace('#', '0x'); + value = value.replace( '#', '0x' ); } color.setHex( value ); - }; + }; } -function needsUpdate ( material, geometry ) { +function needsUpdate( material, geometry ) { return function () { - material.vertexColors = +material.vertexColors; //Ensure number - material.side = +material.side; //Ensure number + material.vertexColors = + material.vertexColors; //Ensure number + material.side = + material.side; //Ensure number material.needsUpdate = true; geometry.verticesNeedUpdate = true; geometry.normalsNeedUpdate = true; @@ -206,7 +207,7 @@ function needsUpdate ( material, geometry ) { } -function updateMorphs ( torus, material ) { +function updateMorphs( torus, material ) { return function () { @@ -217,30 +218,30 @@ function updateMorphs ( torus, material ) { } -function updateTexture ( material, materialKey, textures ) { +function updateTexture( material, materialKey, textures ) { return function ( key ) { - material[materialKey] = textures[key]; + material[ materialKey ] = textures[ key ]; material.needsUpdate = true; }; } -function guiScene ( gui, scene ) { +function guiScene( gui, scene ) { - var folder = gui.addFolder('Scene'); + var folder = gui.addFolder( 'Scene' ); var data = { - background : "#000000", - "ambient light" : ambientLight.color.getHex() + background: '#000000', + 'ambient light': ambientLight.color.getHex() }; var color = new THREE.Color(); var colorConvert = handleColorChange( color ); - folder.addColor( data, "background" ).onChange( function ( value ) { + folder.addColor( data, 'background' ).onChange( function ( value ) { colorConvert( value ); @@ -248,22 +249,22 @@ function guiScene ( gui, scene ) { } ); - folder.addColor( data, "ambient light" ).onChange( handleColorChange( ambientLight.color ) ); + folder.addColor( data, 'ambient light' ).onChange( handleColorChange( ambientLight.color ) ); guiSceneFog( folder, scene ); } -function guiSceneFog ( folder, scene ) { +function guiSceneFog( folder, scene ) { - var fogFolder = folder.addFolder('scene.fog'); + var fogFolder = folder.addFolder( 'scene.fog' ); var fog = new THREE.Fog( 0x3f7b9d, 0, 60 ); var data = { - fog : { - "THREE.Fog()" : false, - "scene.fog.color" : fog.color.getHex() + fog: { + 'THREE.Fog()': false, + 'scene.fog.color': fog.color.getHex() } }; @@ -281,13 +282,13 @@ function guiSceneFog ( folder, scene ) { } ); - fogFolder.addColor( data.fog, 'scene.fog.color').onChange( handleColorChange( fog.color ) ); + fogFolder.addColor( data.fog, 'scene.fog.color' ).onChange( handleColorChange( fog.color ) ); } -function guiMaterial ( gui, mesh, material, geometry ) { +function guiMaterial( gui, mesh, material, geometry ) { - var folder = gui.addFolder('THREE.Material'); + var folder = gui.addFolder( 'THREE.Material' ); folder.add( material, 'transparent' ); folder.add( material, 'opacity', 0, 1 ); @@ -307,22 +308,22 @@ function guiMaterial ( gui, mesh, material, geometry ) { } -function guiMeshBasicMaterial ( gui, mesh, material, geometry ) { +function guiMeshBasicMaterial( gui, mesh, material, geometry ) { var data = { - color : material.color.getHex(), - envMaps : envMapKeys, - map : textureMapKeys, - specularMap : textureMapKeys, - alphaMap : textureMapKeys + color: material.color.getHex(), + envMaps: envMapKeys, + map: textureMapKeys, + specularMap: textureMapKeys, + alphaMap: textureMapKeys }; - var folder = gui.addFolder('THREE.MeshBasicMaterial'); + var folder = gui.addFolder( 'THREE.MeshBasicMaterial' ); folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) ); folder.add( material, 'wireframe' ); folder.add( material, 'wireframeLinewidth', 0, 10 ); - folder.add( material, 'vertexColors', constants.colors).onChange( needsUpdate( material, geometry ) ); + folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) ); folder.add( material, 'fog' ); folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) ); @@ -333,13 +334,12 @@ function guiMeshBasicMaterial ( gui, mesh, material, geometry ) { folder.add( material, 'combine', constants.combine ).onChange( updateMorphs( mesh, material ) ); folder.add( material, 'reflectivity', 0, 1 ); folder.add( material, 'refractionRatio', 0, 1 ); - //folder.add( material, 'skinning' ); } -function guiMeshDepthMaterial ( gui, mesh, material, geometry ) { +function guiMeshDepthMaterial( gui, mesh, material, geometry ) { - var folder = gui.addFolder('THREE.MeshDepthMaterial'); + var folder = gui.addFolder( 'THREE.MeshDepthMaterial' ); folder.add( material, 'wireframe' ); folder.add( material, 'wireframeLinewidth', 0, 10 ); @@ -347,9 +347,9 @@ function guiMeshDepthMaterial ( gui, mesh, material, geometry ) { } -function guiMeshNormalMaterial ( gui, mesh, material, geometry ) { +function guiMeshNormalMaterial( gui, mesh, material, geometry ) { - var folder = gui.addFolder('THREE.MeshNormalMaterial'); + var folder = gui.addFolder( 'THREE.MeshNormalMaterial' ); folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) ); folder.add( material, 'wireframe' ); @@ -358,37 +358,37 @@ function guiMeshNormalMaterial ( gui, mesh, material, geometry ) { } -function guiLineBasicMaterial ( gui, mesh, material, geometry ) { +function guiLineBasicMaterial( gui, mesh, material, geometry ) { var data = { - color : material.color.getHex() + color: material.color.getHex() }; - var folder = gui.addFolder('THREE.LineBasicMaterial'); + var folder = gui.addFolder( 'THREE.LineBasicMaterial' ); folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) ); folder.add( material, 'linewidth', 0, 10 ); - folder.add( material, 'linecap', ["butt", "round", "square"] ); - folder.add( material, 'linejoin', ["round", "bevel", "miter"] ); - folder.add( material, 'vertexColors', constants.colors).onChange( needsUpdate( material, geometry ) ); + folder.add( material, 'linecap', [ 'butt', 'round', 'square' ] ); + folder.add( material, 'linejoin', [ 'round', 'bevel', 'miter' ] ); + folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) ); folder.add( material, 'fog' ); } -function guiMeshLambertMaterial ( gui, mesh, material, geometry ) { +function guiMeshLambertMaterial( gui, mesh, material, geometry ) { var data = { - color : material.color.getHex(), - emissive : material.emissive.getHex(), - envMaps : envMapKeys, - map : textureMapKeys, - specularMap : textureMapKeys, - alphaMap : textureMapKeys + color: material.color.getHex(), + emissive: material.emissive.getHex(), + envMaps: envMapKeys, + map: textureMapKeys, + specularMap: textureMapKeys, + alphaMap: textureMapKeys }; var envObj = {}; - var folder = gui.addFolder('THREE.MeshLambertMaterial'); + var folder = gui.addFolder( 'THREE.MeshLambertMaterial' ); folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) ); folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) ); @@ -410,30 +410,30 @@ function guiMeshLambertMaterial ( gui, mesh, material, geometry ) { } -function guiMeshPhongMaterial ( gui, mesh, material, geometry ) { +function guiMeshPhongMaterial( gui, mesh, material, geometry ) { var data = { - color : material.color.getHex(), - emissive : material.emissive.getHex(), - specular : material.specular.getHex(), - envMaps : envMapKeys, - map : textureMapKeys, - lightMap : textureMapKeys, - specularMap : textureMapKeys, - alphaMap : textureMapKeys + color: material.color.getHex(), + emissive: material.emissive.getHex(), + specular: material.specular.getHex(), + envMaps: envMapKeys, + map: textureMapKeys, + lightMap: textureMapKeys, + specularMap: textureMapKeys, + alphaMap: textureMapKeys }; - var folder = gui.addFolder('THREE.MeshPhongMaterial'); + var folder = gui.addFolder( 'THREE.MeshPhongMaterial' ); folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) ); folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) ); folder.addColor( data, 'specular' ).onChange( handleColorChange( material.specular ) ); - folder.add( material, 'shininess', 0, 100); + folder.add( material, 'shininess', 0, 100 ); folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) ); folder.add( material, 'wireframe' ); folder.add( material, 'wireframeLinewidth', 0, 10 ); - folder.add( material, 'vertexColors', constants.colors); + folder.add( material, 'vertexColors', constants.colors ); folder.add( material, 'fog' ); folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) ); folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) ); @@ -443,19 +443,19 @@ function guiMeshPhongMaterial ( gui, mesh, material, geometry ) { } -function guiMeshStandardMaterial ( gui, mesh, material, geometry ) { +function guiMeshStandardMaterial( gui, mesh, material, geometry ) { var data = { - color : material.color.getHex(), - emissive : material.emissive.getHex(), - envMaps : envMapKeys, - map : textureMapKeys, - lightMap : textureMapKeys, - specularMap : textureMapKeys, - alphaMap : textureMapKeys + color: material.color.getHex(), + emissive: material.emissive.getHex(), + envMaps: envMapKeys, + map: textureMapKeys, + lightMap: textureMapKeys, + specularMap: textureMapKeys, + alphaMap: textureMapKeys }; - var folder = gui.addFolder('THREE.MeshStandardMaterial'); + var folder = gui.addFolder( 'THREE.MeshStandardMaterial' ); folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) ); folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) ); @@ -465,7 +465,7 @@ function guiMeshStandardMaterial ( gui, mesh, material, geometry ) { folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) ); folder.add( material, 'wireframe' ); folder.add( material, 'wireframeLinewidth', 0, 10 ); - folder.add( material, 'vertexColors', constants.colors); + folder.add( material, 'vertexColors', constants.colors ); folder.add( material, 'fog' ); folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) ); folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) ); @@ -476,82 +476,83 @@ function guiMeshStandardMaterial ( gui, mesh, material, geometry ) { } -function chooseFromHash ( gui, mesh, geometry ) { +function chooseFromHash( gui, mesh, geometry ) { - var selectedMaterial = window.location.hash.substring(1) || "MeshBasicMaterial"; + var selectedMaterial = window.location.hash.substring( 1 ) || 'MeshBasicMaterial'; var material; - switch (selectedMaterial) { + switch ( selectedMaterial ) { + + case 'MeshBasicMaterial' : - case "MeshBasicMaterial" : + material = new THREE.MeshBasicMaterial( { color: 0x2194CE } ); + guiMaterial( gui, mesh, material, geometry ); + guiMeshBasicMaterial( gui, mesh, material, geometry ); - material = new THREE.MeshBasicMaterial({color: 0x2194CE}); - guiMaterial( gui, mesh, material, geometry ); - guiMeshBasicMaterial( gui, mesh, material, geometry ); + return material; - return material; + break; - break; + case 'MeshLambertMaterial' : - case "MeshLambertMaterial" : + material = new THREE.MeshLambertMaterial( { color: 0x2194CE } ); + guiMaterial( gui, mesh, material, geometry ); + guiMeshLambertMaterial( gui, mesh, material, geometry ); - material = new THREE.MeshLambertMaterial({color: 0x2194CE}); - guiMaterial( gui, mesh, material, geometry ); - guiMeshLambertMaterial( gui, mesh, material, geometry ); + return material; - return material; + break; - break; + case 'MeshPhongMaterial' : - case "MeshPhongMaterial" : + material = new THREE.MeshPhongMaterial( { color: 0x2194CE } ); + guiMaterial( gui, mesh, material, geometry ); + guiMeshPhongMaterial( gui, mesh, material, geometry ); - material = new THREE.MeshPhongMaterial({color: 0x2194CE}); - guiMaterial( gui, mesh, material, geometry ); - guiMeshPhongMaterial( gui, mesh, material, geometry ); + return material; - return material; + break; - break; + case 'MeshStandardMaterial' : - case "MeshStandardMaterial" : + material = new THREE.MeshStandardMaterial( { color: 0x2194CE } ); + guiMaterial( gui, mesh, material, geometry ); + guiMeshStandardMaterial( gui, mesh, material, geometry ); - material = new THREE.MeshStandardMaterial({color: 0x2194CE}); - guiMaterial( gui, mesh, material, geometry ); - guiMeshStandardMaterial( gui, mesh, material, geometry ); + return material; - return material; + break; - break; + case 'MeshDepthMaterial' : - case "MeshDepthMaterial" : + material = new THREE.MeshDepthMaterial(); + guiMaterial( gui, mesh, material, geometry ); + guiMeshDepthMaterial( gui, mesh, material, geometry ); - material = new THREE.MeshDepthMaterial(); - guiMaterial( gui, mesh, material, geometry ); - guiMeshDepthMaterial( gui, mesh, material, geometry ); + return material; - return material; + break; - break; + case 'MeshNormalMaterial' : - case "MeshNormalMaterial" : + material = new THREE.MeshNormalMaterial(); + guiMaterial( gui, mesh, material, geometry ); + guiMeshNormalMaterial( gui, mesh, material, geometry ); - material = new THREE.MeshNormalMaterial(); - guiMaterial( gui, mesh, material, geometry ); - guiMeshNormalMaterial( gui, mesh, material, geometry ); + return material; - return material; + break; - break; + case 'LineBasicMaterial' : - case "LineBasicMaterial" : + material = new THREE.LineBasicMaterial( { color: 0x2194CE } ); + guiMaterial( gui, mesh, material, geometry ); + guiLineBasicMaterial( gui, mesh, material, geometry ); - material = new THREE.LineBasicMaterial({color: 0x2194CE}); - guiMaterial( gui, mesh, material, geometry ); - guiLineBasicMaterial( gui, mesh, material, geometry ); + return material; - return material; + break; - break; } } -- GitLab