From 135ee5c5832c5609132a6dea4ed0e6e2d52575ee Mon Sep 17 00:00:00 2001 From: Greg Tatum Date: Fri, 26 Sep 2014 23:20:16 -0500 Subject: [PATCH] Documentation material browser --- docs/api/materials/Material.html | 9 +- docs/api/materials/MeshBasicMaterial.html | 7 +- docs/api/materials/MeshDepthMaterial.html | 2 + docs/api/materials/MeshFaceMaterial.html | 2 +- docs/api/materials/MeshLambertMaterial.html | 1 + docs/api/materials/MeshNormalMaterial.html | 3 +- docs/api/materials/MeshPhongMaterial.html | 1 + docs/page.css | 6 +- docs/scenes/js/material.js | 271 ++++++++++++++ docs/scenes/material-browser.html | 68 ++++ docs/scenes/threejs-example.html | 368 -------------------- docs/scenes/threejs-example.js | 335 ------------------ 12 files changed, 360 insertions(+), 713 deletions(-) create mode 100644 docs/scenes/js/material.js create mode 100644 docs/scenes/material-browser.html delete mode 100755 docs/scenes/threejs-example.html delete mode 100755 docs/scenes/threejs-example.js diff --git a/docs/api/materials/Material.html b/docs/api/materials/Material.html index 5386c51170..b30a5cb536 100644 --- a/docs/api/materials/Material.html +++ b/docs/api/materials/Material.html @@ -53,14 +53,15 @@
Default is *false*.
-

.[page:Blending blending]

+

.[page:Materials blending]

- Which blending to use when displaying objects with this material. Default is [page:Materials NormalBlending]. + Which blending to use when displaying objects with this material. Default is [page:Materials NormalBlending]. See the blending mode [page:Materials constants] for all possible values. +
-

.[page:Integer blendSrc]

+

.[page:Materials blendSrc]

- Blending source. It's one of the blending mode constants defined in [page:Three Three.js]. Default is [page:CustomBlendingEquation SrcAlphaFactor] + Blending source. It's one of the blending mode constants defined in Three.js. Default is [page:CustomBlendingEquation SrcAlphaFactor]. See the destination factors [page:CustomBlendingEquation constants] for all possible values.

.[page:Integer blendDst]

diff --git a/docs/api/materials/MeshBasicMaterial.html b/docs/api/materials/MeshBasicMaterial.html index 16cd97b90f..b78cf18537 100644 --- a/docs/api/materials/MeshBasicMaterial.html +++ b/docs/api/materials/MeshBasicMaterial.html @@ -14,6 +14,7 @@
A material for drawing geometries in a simple shaded (flat or wireframe) way.
The default will render as flat polygons. To draw the mesh as wireframe, simply set the 'wireframe' property to true.
+

Constructor

@@ -58,10 +59,10 @@
Define appearance of line joints. Possible values are "round", "bevel" and "miter". Default is 'round'.
This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:WebGLRenderer WebGL] renderer, but does work with the [page:CanvasRenderer Canvas] renderer.
-

.[page:String shading]

-
Define shading type. Default is THREE.SmoothShading.
+

.[page:Materials shading]

+
Define shading type. Default is THREE.SmoothShading. Possible values are THREE.NoShading, THREE.FlatShading, THREE.SmoothShading.
-

.[page:Integer vertexColors]

+

.[page:Materials vertexColors]

Define how the vertices gets colored. Possible values are THREE.NoColors, THREE.FaceColors and THREE.VertexColors. Default is THREE.NoColors.
This setting might not have any effect when used with certain renderers. For example, it is ignored with the [page:CanvasRenderer Canvas] renderer, but does work with the [page:WebGLRenderer WebGL] renderer.
diff --git a/docs/api/materials/MeshDepthMaterial.html b/docs/api/materials/MeshDepthMaterial.html index 1f5fa1ff1b..ce5d53aeef 100644 --- a/docs/api/materials/MeshDepthMaterial.html +++ b/docs/api/materials/MeshDepthMaterial.html @@ -13,6 +13,8 @@
A material for drawing geometry by depth. Depth is based off of the camera near and far plane. White is nearest, black is farthest.
+ +

Constructor

diff --git a/docs/api/materials/MeshFaceMaterial.html b/docs/api/materials/MeshFaceMaterial.html index e44af91760..f14238f50a 100644 --- a/docs/api/materials/MeshFaceMaterial.html +++ b/docs/api/materials/MeshFaceMaterial.html @@ -13,7 +13,7 @@
A Material to define multiple materials for the same geometry. - The geometry decides which material is used for which faces by the [page:Face3 faces materialindex]. + The geometry decides which material is used for which faces by the [page:Face3 faces] materialindex. The materialindex corresponds with the index of the material in the materials array.
diff --git a/docs/api/materials/MeshLambertMaterial.html b/docs/api/materials/MeshLambertMaterial.html index df178f20cf..edc1109a7e 100644 --- a/docs/api/materials/MeshLambertMaterial.html +++ b/docs/api/materials/MeshLambertMaterial.html @@ -13,6 +13,7 @@
A material for non-shiny (Lambertian) surfaces, evaluated per vertex.
+

Constructor

diff --git a/docs/api/materials/MeshNormalMaterial.html b/docs/api/materials/MeshNormalMaterial.html index 452ff5a339..7a56f2d35a 100644 --- a/docs/api/materials/MeshNormalMaterial.html +++ b/docs/api/materials/MeshNormalMaterial.html @@ -13,6 +13,7 @@
A material that maps the normal vectors to RGB colors.
+

Constructor

@@ -39,7 +40,7 @@

.[page:number shading]

How the triangles of a curved surface are rendered: as a smooth surface, as flat separate facets, or no shading at all.

- Options are [page:Materials THREE.SmoothShading] (default), [page:Materials THREE.FlatShading] + Options are [page:Materials THREE.SmoothShading], [page:Materials THREE.FlatShading] (default)
diff --git a/docs/api/materials/MeshPhongMaterial.html b/docs/api/materials/MeshPhongMaterial.html index 86ec37561e..4c97526963 100644 --- a/docs/api/materials/MeshPhongMaterial.html +++ b/docs/api/materials/MeshPhongMaterial.html @@ -13,6 +13,7 @@
A material for shiny surfaces, evaluated per pixel.
+

Constructor

diff --git a/docs/page.css b/docs/page.css index 421440bba4..4c4cacfcad 100644 --- a/docs/page.css +++ b/docs/page.css @@ -65,7 +65,11 @@ code { background-color: #f9f9f9; overflow: auto; } - +iframe { + width: 100%; + height: 420px; + border:0; +} strong { color: #000; font-weight: normal; diff --git a/docs/scenes/js/material.js b/docs/scenes/js/material.js new file mode 100644 index 0000000000..f0d395e0cc --- /dev/null +++ b/docs/scenes/js/material.js @@ -0,0 +1,271 @@ +var constants = { + + side: { + "THREE.FrontSide": THREE.FrontSide, + "THREE.BackSide": THREE.BackSide, + "THREE.DoubleSide": THREE.DoubleSide + }, + + shading: { + "THREE.NoShading": THREE.NoShading, + "THREE.FlatShading": THREE.FlatShading, + "THREE.SmoothShading": THREE.SmoothShading + }, + + 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 handleColorChange( color ) { + + return function( value ){ + if(typeof value === "string") { + value = value.replace('#', '0x'); + } + color.setHex( value ); + }; + +} + +function guiMaterial( gui, material ) { + var folder = gui.addFolder('THREE.Material'); + + folder.add( material, 'transparent' ); + folder.add( material, 'opacity', 0, 1 ); + folder.add( material, 'blending', constants.blendingMode ); + folder.add( material, 'blendSrc', constants.destinationFactors ); + folder.add( material, 'blendDst', constants.destinationFactors ); + folder.add( material, 'blendEquation', constants.equations ); + folder.add( material, 'depthTest' ); + folder.add( material, 'depthWrite' ); + folder.add( material, 'polygonOffset' ); + folder.add( material, 'polygonOffsetFactor' ); + folder.add( material, 'polygonOffsetUnits' ); + folder.add( material, 'alphaTest' ); + folder.add( material, 'overdraw' ); + folder.add( material, 'visible' ); + folder.add( material, 'side', constants.side ); +} + +function guiMeshBasicMaterial( gui, material ) { + + var data = { + color : material.color.getHex() + }; + + 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, 'wireframeLinecap', ["butt", "round", "square"] ); + folder.add( material, 'wireframeLinejoin', ["round", "bevel", "miter"] ); + folder.add( material, 'shading', constants.shading); + folder.add( material, 'vertexColors', constants.colors); + folder.add( material, 'fog' ); + + //folder.add( material, 'lightMap' ); + //folder.add( material, 'specularMap' ); + //folder.add( material, 'alphaMap' ); + //folder.add( material, 'envMap' ); + //folder.add( material, 'skinning' ); + //folder.add( material, 'morphTargets' ); + //folder.add( material, 'map' ); + //folder.add( material, 'combine' ); + //folder.add( material, 'relectivity' ); + //folder.add( material, 'refractionRatio' ); +} + +function guiMeshDepthMaterial( gui, material ) { + + var folder = gui.addFolder('THREE.MeshDepthMaterial'); + + folder.add( material, 'wireframe' ); + folder.add( material, 'wireframeLinewidth', 0, 10 ); +} + +function guiMeshNormalMaterial( gui, material ) { + + var folder = gui.addFolder('THREE.MeshNormalMaterial'); + + folder.add( material, 'morphTargets'); + folder.add( material, 'shading', constants.shading); + folder.add( material, 'wireframe' ); + folder.add( material, 'wireframeLinewidth', 0, 10 ); +} + +function guiLineBasicMaterial( gui, material ) { + + var data = { + color : material.color.getHex() + }; + + 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); + folder.add( material, 'fog' ); + +} + +function guiMeshLambertMaterial( gui, material ) { + + var data = { + color : material.color.getHex(), + ambient : material.ambient.getHex(), + emissive : material.emissive.getHex() + }; + + var folder = gui.addFolder('THREE.MeshLambertMaterial'); + + folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) ); + folder.addColor( data, 'ambient' ).onChange( handleColorChange( material.ambient ) ); + folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) ); + + folder.add( material, 'shading', constants.shading); + folder.add( material, 'wireframe' ); + folder.add( material, 'wireframeLinewidth', 0, 10 ); + folder.add( material, 'wireframeLinecap', ["butt", "round", "square"] ); + folder.add( material, 'wireframeLinejoin', ["round", "bevel", "miter"] ); + folder.add( material, 'vertexColors', constants.colors); + folder.add( material, 'fog' ); + +} + +function guiMeshPhongMaterial( gui, material ) { + + var data = { + color : material.color.getHex(), + ambient : material.ambient.getHex(), + emissive : material.emissive.getHex(), + specular : material.specular.getHex() + }; + + var folder = gui.addFolder('THREE.MeshPhongMaterial'); + + folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) ); + folder.addColor( data, 'ambient' ).onChange( handleColorChange( material.ambient ) ); + 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, 'shading', constants.shading); + folder.add( material, 'wireframe' ); + folder.add( material, 'wireframeLinewidth', 0, 10 ); + folder.add( material, 'wireframeLinecap', ["butt", "round", "square"] ); + folder.add( material, 'wireframeLinejoin', ["round", "bevel", "miter"] ); + folder.add( material, 'vertexColors', constants.colors); + folder.add( material, 'fog' ); + +} + + +function chooseFromHash() { + + var selectedMaterial = window.location.hash.substring(1) || "MeshBasicMaterial"; + var material; + + var gui = new dat.GUI(); + switch (selectedMaterial) { + + case "MeshBasicMaterial": + + material = new THREE.MeshBasicMaterial({color: 0x00ff00}); + guiMaterial( gui, material ); + guiMeshBasicMaterial( gui, material ); + + return material; + + break; + + case "MeshLambertMaterial": + + material = new THREE.MeshLambertMaterial({color: 0x00ff00}); + guiMaterial( gui, material ); + guiMeshLambertMaterial( gui, material ); + + return material; + + break; + + case "MeshPhongMaterial": + + material = new THREE.MeshPhongMaterial({color: 0x00ff00}); + guiMaterial( gui, material ); + guiMeshPhongMaterial( gui, material ); + + return material; + + break; + + case "MeshDepthMaterial": + + material = new THREE.MeshDepthMaterial({color: 0x00ff00}); + guiMaterial( gui, material ); + guiMeshDepthMaterial( gui, material ); + + return material; + + break; + + case "MeshNormalMaterial": + + material = new THREE.MeshNormalMaterial(); + guiMaterial( gui, material ); + guiMeshNormalMaterial( gui, material ); + + return material; + + break; + + case "LineBasicMaterial": + + material = new THREE.LineBasicMaterial({color: 0x00ff00}); + guiMaterial( gui, material ); + guiLineBasicMaterial( gui, material ); + + return material; + + break; + } + + +} \ No newline at end of file diff --git a/docs/scenes/material-browser.html b/docs/scenes/material-browser.html new file mode 100644 index 0000000000..7fdfec1b89 --- /dev/null +++ b/docs/scenes/material-browser.html @@ -0,0 +1,68 @@ + + + MeshBasicMaterial + + + + + + + + + + + \ No newline at end of file diff --git a/docs/scenes/threejs-example.html b/docs/scenes/threejs-example.html deleted file mode 100755 index a1184d196f..0000000000 --- a/docs/scenes/threejs-example.html +++ /dev/null @@ -1,368 +0,0 @@ - - - - Simple Example ThreeJS - - - - - - - - -
- - - \ No newline at end of file diff --git a/docs/scenes/threejs-example.js b/docs/scenes/threejs-example.js deleted file mode 100755 index 53f181c7d3..0000000000 --- a/docs/scenes/threejs-example.js +++ /dev/null @@ -1,335 +0,0 @@ -var ExampleScene = function() { - - //The current selected material saved to the hash - var selectedMaterial = window.location.hash.substring(1) || "MeshPhongMaterial"; - - this.renderer = undefined; - this.controls = undefined; - this.div = document.getElementById( 'clean' ); - this.scene = new THREE.Scene(); - this.camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000); //(fov, aspect ratio, near, far frustrum) - this.camera.position.z = 50; - - this.addRenderer(); - this.addControls(); - this.addLights(); - //this.addSpheresBasic(); - this.addSpheresWithMaterial( selectedMaterial ); - //this.addGeometry(); - this.addGrid(); - this.addEventListeners(); - - this.loop(); -}; - -ExampleScene.prototype = { - - addLights : function() { - this.lights = []; - this.lights[0] = new THREE.AmbientLight( 0xffffff ); - this.lights[1] = new THREE.PointLight( 0xffffff, 1, 0 ); - this.lights[2] = new THREE.PointLight( 0xffffff, 1, 0 ); - this.lights[3] = new THREE.PointLight( 0xffffff, 1, 0 ); - - this.lights[1].position.set(0, 200, 0); - this.lights[2].position.set(100, 200, 100); - this.lights[3].position.set(-100, -200, -100); - - //this.scene.add( this.lights[0] ); - this.scene.add( this.lights[1] ); - this.scene.add( this.lights[2] ); - this.scene.add( this.lights[3] ); - }, - - addGeometry : function() { - - //------------------------------------------------------------------------------- - // Various types of geometry to play with, only un-comment 1 geometry at a time - - //var geometry = new THREE.CircleGeometry(10, 20, 0, 2 * Math.PI); - //var geometry = new THREE.CubeGeometry(15, 10, 10, 1, 1, 1); //(width, height, depth, widthSegments, heightSegments, depthSegments) - var geometry = new THREE.CylinderGeometry(10, 12, 20, 32, 2, false); //(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded) - //var geometry = new THREE.CircleGeometry(); - - /* - // Extruded Geometry - - var extrudeSettings = { - bevelEnabled: true, - bevelSegments: 2, - steps: 100, - extrudePath : new THREE.SplineCurve3([ - new THREE.Vector3( 0, -8, 0), - new THREE.Vector3( 3, -1.66, 0), - new THREE.Vector3( -3, 1.66, 0), - new THREE.Vector3( 0, 8, 0) - ]) - }; - var extrudeBend = new THREE.Shape([ //Closed - - new THREE.Vector3( 0.05, 0.00, 0.00), - new THREE.Vector3( 0.85, 0.00, 0.00), - new THREE.Vector3( 1.00, 0.05, 0.00), - new THREE.Vector3( 1.00, 0.85, 0.00), - new THREE.Vector3( 0.85, 1.00, 0.00), - new THREE.Vector3( 0.05, 1.00, 0.00), - new THREE.Vector3( 0.00, 0.85, 0.00), - new THREE.Vector3( 0.00, 0.05, 0.00) - - ]); - var geometry = new THREE.ExtrudeGeometry(extrudeBend, extrudeSettings); - */ - - - var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [ - new THREE.MeshNormalMaterial( {} ), - new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 2, opacity: 0.1, transparent: true } ) ] - ); - - this.scene.add(mesh); - }, - - addRenderer : function() { - this.renderer = new THREE.WebGLRenderer(); - this.renderer.setSize( window.innerWidth, window.innerHeight ); - this.div.appendChild( this.renderer.domElement ); - }, - - addControls : function() { - this.controls = new THREE.OrbitControls( this.camera, this.renderer.domElement ); - }, - - addSpheresBasic : function() { - - var sphere = new THREE.SphereGeometry( 5, 16, 8 ); // (radius, widthSegments, heightSegments) - - this.spheres = []; - - this.spheres[0] = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0040 } ) ); - this.spheres[1] = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x0040ff } ) ); - this.spheres[2] = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x80ff80 } ) ); - this.spheres[3] = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) ); - - this.spheres[0].position.set(10, 0, 0); - this.spheres[1].position.set( 0, 10, 0); - this.spheres[2].position.set( 0, 0, 10); - this.spheres[3].position.set(10, 10, 0); - - this.scene.add(this.spheres[0]); - this.scene.add(this.spheres[1]); - this.scene.add(this.spheres[2]); - this.scene.add(this.spheres[3]); - - }, - - addSpheresWithMaterial : function(material) { - - var sphere = new THREE.SphereGeometry( 5, 64 / 2, 32 / 2 ); // (radius, widthSegments, heightSegments) - - this.spheres = []; - - var colors = [ - 0x9f0040, - 0x00409f, - 0x809f80, - 0x9faa00 - ]; - - for(var i=0; i < 4; ++i) { - - - //Non-shiny material - if(material === "MeshLambertMaterial") { - - this.spheres.push( - new THREE.Mesh( sphere, new THREE.MeshLambertMaterial( { - color: colors[i], - emissive : new THREE.Color( 0x000510 ), - wireframe : false, - wireframeLinewidth : 3 - })) - ); - - } else if(material === "MeshPhongMaterial") { - - this.spheres.push( - new THREE.Mesh( sphere, new THREE.MeshPhongMaterial( { - color: colors[i], - specular : new THREE.Color( 0xffffff ), - shininess : Math.pow(10, i), - emissive : new THREE.Color( 0x000510 ), - shading : THREE.NoShading, - wireframe : false, - wireframeLinewidth : 3 - })) - ); - - } else if(material === "MeshNormalMaterial") { - - this.spheres.push( - new THREE.Mesh( sphere, new THREE.MeshNormalMaterial( { - - })) - ); - - } else if(material === "MeshDepthMaterial") { - - this.spheres.push( - new THREE.Mesh( sphere, new THREE.MeshDepthMaterial( { - shading: THREE.FlatShading, - wireframe: true - })) - ); - - this.camera.near = 20; - this.camera.far = 100; - - } else if(material === "MeshFaceMaterial") { - - /* Can't get to work - var materials = [], - colorIterator; - - //Create 6 materials - for (var j=0; j<6; j++) { - - var img = new Image(); - img.src = "textures/cube/clean/" + i + '.jpg'; - var tex = new THREE.Texture(img); - img.tex = tex; - - img.onload = function() { - this.tex.needsUpdate = true; - }; - colorIterator = Math.floor(Math.random() * colors.length); - - materials[j] = new THREE.MeshBasicMaterial({ - color: 0xffffff, - transparent: true, - blending: THREE.AdditiveBlending, - map: tex - }); - - } - - - console.log(materials); - - this.spheres.push( - new THREE.Mesh( sphere, new THREE.MeshFaceMaterial( materials )) - ); - */ - - } else { - if(material !== "MeshBasicMaterial") { - console.log(material + " material not implemented by this script. Using MeshBasicMaterial"); - } - this.spheres.push( - new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color : colors[i] } ) ) - ); - } - - } - - //Set the position - - this.spheres[0].position.set( 0, 0, 0); - this.spheres[1].position.set( 10, 0, 0); - this.spheres[2].position.set(-10, 0, 0); - this.spheres[3].position.set( 0, 10, 0); - - this.scene.add(this.spheres[0]); - this.scene.add(this.spheres[1]); - this.scene.add(this.spheres[2]); - this.scene.add(this.spheres[3]); - - }, - - addGrid : function() { - - var lineMaterial = 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 ) ); - - } - - this.grid = new THREE.Line( geometry, lineMaterial, THREE.LinePieces ); - this.scene.add( this.grid ); - - }, - - addEventListeners : function() { - $(window).on('resize', this.resizeHandler.bind(this)); - }, - - resizeHandler : function() { - - this.camera.aspect = window.innerWidth / window.innerHeight; - this.camera.updateProjectionMatrix(); - - this.renderer.setSize( window.innerWidth, window.innerHeight ); - - }, - - loop : function() { - - requestAnimationFrame( this.loop.bind(this) ); - this.render(); - - }, - - render : function() { - this.controls.update(); - this.renderer.render( this.scene, this.camera ); - } - -}; - -var MaterialSelector = function() { - - this.setSelectedChoiceFromHash(); - this.addEventListeners(); - -} - -MaterialSelector.prototype = { - - addEventListeners : function() { - $('#material').change(this.loadNewMaterial.bind(this)); - }, - - loadNewMaterial : function() { - - window.location.hash = $('#material').val(); - window.location.reload() - - }, - - setSelectedChoiceFromHash : function() { - $('#material > option').each(function() { - - var $this = $(this), - hash = window.location.hash.substring(1); - - if( $this.text() == hash ) { - $this.attr('selected', 'selected'); - } - }) - }, -} - - -var exampleScene, materialSelector; - -$(function() { - materialSelector = new MaterialSelector(); - exampleScene = new ExampleScene(); -}); \ No newline at end of file -- GitLab