diff --git a/docs/api/materials/Material.html b/docs/api/materials/Material.html
index 5386c51170ca76d4bf1956879518fb123602bc3d..b30a5cb5360fe26d19fa9fdfb38b3efa8fb54584 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 16cd97b90f2e9c5d3ea19248848cd5f968c9d8aa..b78cf18537eeea09bbcf845f39694c9eecfb4ae8 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 1f5fa1ff1b0d05a7680b63280b022bc4e4aa78e3..ce5d53aeef28b1371b5b0cf3c78374267d3d6233 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 e44af917609e5225bf16de78093a1ce88d632e0e..f14238f50ab3bf172864b9922557d049dd7f237f 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 df178f20cf2e53f973c7c2acd7335de8a63f5e2f..edc1109a7e3977903e1bfaf116602d2a499496a0 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 452ff5a339a055894d6b56fe53a12b3ad71ef9a2..7a56f2d35aff21a9274038168e44863d5fb5a632 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.
diff --git a/docs/api/materials/MeshPhongMaterial.html b/docs/api/materials/MeshPhongMaterial.html
index 86ec37561e65d118231452d8ea85794817dfe663..4c97526963451698d0d45cc3254f8c9c148236bd 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 421440bba48d543a23e8b4394abaf59967b3cfd2..4c4cacfcad4a4abdbdf0e5db71c1dd4ad2daca38 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 0000000000000000000000000000000000000000..f0d395e0ccf052297cfdba6a7cfa1809a6c20cf8
--- /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 0000000000000000000000000000000000000000..7fdfec1b897aaf9f8fb90e83784f472ff1385a8a
--- /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 a1184d196f9cd24b1fe4ee00820d5d40f4d3c229..0000000000000000000000000000000000000000
--- a/docs/scenes/threejs-example.html
+++ /dev/null
@@ -1,368 +0,0 @@
-
-
-
- Simple Example ThreeJS
-
-
- MeshBasicMaterial
- MeshLambertMaterial
- MeshPhongMaterial
- MeshNormalMaterial
- MeshDepthMaterial
-
-
-
-
\ 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 53f181c7d38ead3ab2ba919213e74198e3576c52..0000000000000000000000000000000000000000
--- 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