From 7ce3b0f7d205be1609651f9e13e17118cedfc25b Mon Sep 17 00:00:00 2001 From: alteredq Date: Fri, 12 Nov 2010 18:10:28 +0100 Subject: [PATCH] Experimenting with different syntax for materials (just hex instead of THREE.Color in API), checking how it feels with shaders example. --- examples/materials_shaders.html | 35 +++++----- src/materials/MeshBasicMaterial.js | 5 +- src/materials/MeshLambertMaterial.js | 67 ++++++++++---------- src/materials/MeshPhongMaterial.js | 95 ++++++++++++++-------------- 4 files changed, 103 insertions(+), 99 deletions(-) diff --git a/examples/materials_shaders.html b/examples/materials_shaders.html index 342114828f..04f8df28aa 100644 --- a/examples/materials_shaders.html +++ b/examples/materials_shaders.html @@ -70,10 +70,9 @@ + + - - - @@ -180,7 +179,7 @@ // light representation sphere = new Sphere( 100, 16, 8, 1 ); - lightMesh = new THREE.Mesh( sphere, new THREE.MeshColorFillMaterial( 0xffaa00 ) ); + lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ); lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05; lightMesh.position = pointLight.position; lightMesh.overdraw = true; @@ -192,26 +191,26 @@ var y1 = 0, y2 = -200; - addMesh( sphere, 1, -600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x050505, 0x000000, 0x555555, 30, 1.0 ) ); - addMesh( sphere, 1, -600, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x050505 ) ); + addMesh( sphere, 1, -600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x050505, diffuse: 0x000000, specular: 0x555555, shininess: 30 } ); + addMesh( sphere, 1, -600, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { diffuse: 0x050505 } ); - addMesh( sphere, 1, -400, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0xffffff, 0x555555, 30, 1.0 ) ); - addMesh( sphere, 1, -400, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0xffffff ) ); + addMesh( sphere, 1, -400, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, diffuse: 0xffffff, specular: 0x555555, shininess: 30 } ); + addMesh( sphere, 1, -400, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { diffuse: 0xffffff } ); - addMesh( sphere, 1, -200, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0xff5500, 0x555555, 10, 1.0 ) ); - addMesh( sphere, 1, -200, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0xff5500 ) ); + addMesh( sphere, 1, -200, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, diffuse: 0xff5500, specular: 0x555555, shininess: 10 } ); + addMesh( sphere, 1, -200, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { diffuse: 0xff5500 } ); - addMesh( sphere, 1, 0, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0xffaa00, 0x555555, 30, 1.0 ) ); - addMesh( sphere, 1, 0, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0xffaa00 ) ); + addMesh( sphere, 1, 0, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, diffuse: 0xffaa00, specular: 0x555555, shininess: 30 } ); + addMesh( sphere, 1, 0, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { diffuse: 0xffaa00 } ); - addMesh( sphere, 1, 200, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x55ff00, 0x555555, 30, 1.0 ) ); - addMesh( sphere, 1, 200, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x55ff00 ) ); + addMesh( sphere, 1, 200, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, diffuse: 0x55ff00, specular: 0x555555, shininess: 30 } ); + addMesh( sphere, 1, 200, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { diffuse: 0x55ff00 } ); - addMesh( sphere, 1, 400, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x0055ff, 0x555555, 30, 1.0 ) ); - addMesh( sphere, 1, 400, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x0055ff ) ); + addMesh( sphere, 1, 400, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, diffuse: 0x0055ff, specular: 0x555555, shininess: 30 } ); + addMesh( sphere, 1, 400, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { diffuse: 0x0055ff } ); - addMesh( sphere, 1, 600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( 0x000000, 0x5500ff, 0x555555, 30, 1.0 ) ); - addMesh( sphere, 1, 600, y2, 0, 0,0,0, new THREE.MeshColorFillMaterial( 0x5500ff ) ); + addMesh( sphere, 1, 600, y1, 0, 0,0,0, new THREE.MeshPhongMaterial( { ambient: 0x000000, diffuse: 0x5500ff, specular: 0x555555, shininess: 30 } ); + addMesh( sphere, 1, 600, y2, 0, 0,0,0, new THREE.MeshLambertMaterial( { diffuse: 0x5500ff } ); if ( render_gl ) { try { diff --git a/src/materials/MeshBasicMaterial.js b/src/materials/MeshBasicMaterial.js index 14dc49deef..cfd9fbe475 100644 --- a/src/materials/MeshBasicMaterial.js +++ b/src/materials/MeshBasicMaterial.js @@ -3,7 +3,7 @@ * @author alteredq / http://alteredqualia.com/ * params = { - * color: new THREE.Color(), + * color: hex, * bitmap: new THREE.UVMap( ), * alpha: float, * blending: THREE.AdditiveBlending, @@ -41,8 +41,9 @@ THREE.MeshBasicMaterial.setDefaultParams = function ( override ) { if ( override != undefined ) { - if( override.color != undefined ) params.color = override.color; + if( override.color != undefined ) params.color = new THREE.Color( override.color ); if( override.bitmap != undefined ) params.bitmap = override.bitmap; + if( override.alpha != undefined ) params.alpha = override.alpha; if( override.blending != undefined ) params.blending = override.blending; if( override.wireframe != undefined ) params.wireframe = override.wireframe; diff --git a/src/materials/MeshLambertMaterial.js b/src/materials/MeshLambertMaterial.js index 27ff91c541..adf1c224f9 100644 --- a/src/materials/MeshLambertMaterial.js +++ b/src/materials/MeshLambertMaterial.js @@ -3,7 +3,7 @@ * @author alteredq / http://alteredqualia.com/ * params = { - * diffuse: new THREE.Color(), + * diffuse: hex, * diffuse_map: new THREE.UVMap( ), * alpha: float, * shading: THREE.Gourad, @@ -14,47 +14,48 @@ THREE.MeshLambertMaterial = function ( params ) { - this.id = THREE.MeshLambertMaterial.value ++; - - this.params = this.setDefaultParams( params ); - + this.id = THREE.MeshLambertMaterial.value ++; + + this.params = this.setDefaultParams( params ); + this.toString = function () { return 'THREE.MeshLambertMaterial ( diffuse: ' + this.params.diffuse - + ', alpha: ' + this.params.alpha - + ', shading: ' + this.params.shading - + ', blending: ' + this.params.blending - + ', wireframe: ' + this.params.wireframe - + ', id: ' + this.id +' )'; + + ', alpha: ' + this.params.alpha + + ', shading: ' + this.params.shading + + ', blending: ' + this.params.blending + + ', wireframe: ' + this.params.wireframe + + ', id: ' + this.id +' )'; }; }; THREE.MeshLambertMaterial.setDefaultParams = function ( override ) { - - var params = { - diffuse: new THREE.Color( 0xeeeeee ), - diffuse_map: null, - alpha: 1.0, - shading: THREE.Gourad, - blending: THREE.AdditiveBlending, - wireframe: false - }; - - if ( override != undefined ) { - - if( override.diffuse != undefined ) params.diffuse = override.diffuse; - if( override.diffuse_map != undefined ) params.diffuse_map = override.diffuse_map; - if( override.alpha != undefined ) params.alpha = override.alpha; - if( override.shading != undefined ) params.shading = override.shading; - if( override.blending != undefined ) params.blending = override.blending; - if( override.wireframe != undefined ) params.wireframe = override.wireframe; - - } - - return params; - + + var params = { + diffuse: new THREE.Color( 0xeeeeee ), + diffuse_map: null, + alpha: 1.0, + shading: THREE.Gourad, + blending: THREE.AdditiveBlending, + wireframe: false + }; + + if ( override != undefined ) { + + if( override.diffuse != undefined ) params.diffuse = new THREE.Color( override.diffuse ); + if( override.diffuse_map != undefined ) params.diffuse_map = override.diffuse_map; + + if( override.alpha != undefined ) params.alpha = override.alpha; + if( override.shading != undefined ) params.shading = override.shading; + if( override.blending != undefined ) params.blending = override.blending; + if( override.wireframe != undefined ) params.wireframe = override.wireframe; + + } + + return params; + }; THREE.MeshLambertMaterial = { value: 0 }; diff --git a/src/materials/MeshPhongMaterial.js b/src/materials/MeshPhongMaterial.js index 5db6e41abb..74af10b1bd 100644 --- a/src/materials/MeshPhongMaterial.js +++ b/src/materials/MeshPhongMaterial.js @@ -3,9 +3,9 @@ * @author alteredq / http://alteredqualia.com/ * params = { - * ambient: new THREE.Color(), - * diffuse: new THREE.Color(), - * specular: new THREE.Color(), + * ambient: hex, + * diffuse: hex, + * specular: hex, * diffuse_map: new THREE.UVMap( ), * specular_map: new THREE.UVMap( ), * shininess: float, @@ -18,58 +18,61 @@ THREE.MeshPhongMaterial = function ( ambient, diffuse, specular, shininess, opacity ) { - this.id = THREE.MeshPhongMaterial.value ++; - - this.params = this.setDefaultParams( params ); - + this.id = THREE.MeshPhongMaterial.value ++; + + this.params = this.setDefaultParams( params ); + this.toString = function () { return 'THREE.MeshPhongMaterial (
ambient: ' + this.params.ambient_color - + ',
diffuse: ' + this.params.diffuse - + ',
specular: ' + this.params.specular - + ',
shininess: ' + this.params.shininess - + ',
alpha: ' + this.params.alpha - + ',
shading: ' + this.params.shading - + ',
wireframe: ' + this.params.wireframe - + ',
id: ' + this.params.id - + ')'; + + ',
diffuse: ' + this.params.diffuse + + ',
specular: ' + this.params.specular + + ',
shininess: ' + this.params.shininess + + ',
alpha: ' + this.params.alpha + + ',
shading: ' + this.params.shading + + ',
wireframe: ' + this.params.wireframe + + ',
id: ' + this.params.id + + ')'; }; }; THREE.MeshPhongMaterial.setDefaultParams = function ( override ) { - - var params = { - ambient: new THREE.Color( 0x050505 ), - diffuse: new THREE.Color( 0xeeeeee ), - specular: new THREE.Color( 0x111111 ), - diffuse_map: null, - specular_map: null, - shininess: 30, - alpha: 1.0, - shading: THREE.Gourad, - blending: THREE.AdditiveBlending, - wireframe: false - }; - - if ( override != undefined ) { - - if( override.ambient != undefined ) params.ambient = override.ambient; - if( override.diffuse != undefined ) params.diffuse = override.diffuse; - if( override.specular != undefined ) params.specular = override.specular; - if( override.diffuse_map != undefined ) params.diffuse_map = override.diffuse_map; - if( override.specular_map != undefined ) params.specular_map = override.specular_map; - if( override.shininess != undefined ) params.shininess = override.shininess; - if( override.alpha != undefined ) params.alpha = override.alpha; - if( override.shading != undefined ) params.shading = override.shading; - if( override.blending != undefined ) params.blending = override.blending; - if( override.wireframe != undefined ) params.wireframe = override.wireframe; - - } - - return params; - + + var params = { + ambient: new THREE.Color( 0x050505 ), + diffuse: new THREE.Color( 0xeeeeee ), + specular: new THREE.Color( 0x111111 ), + diffuse_map: null, + specular_map: null, + shininess: 30, + alpha: 1.0, + shading: THREE.Gourad, + blending: THREE.AdditiveBlending, + wireframe: false + }; + + if ( override != undefined ) { + + if( override.ambient != undefined ) params.ambient = new THREE.Color( override.ambient ); + if( override.diffuse != undefined ) params.diffuse = new THREE.Color( override.diffuse ); + if( override.specular != undefined ) params.specular = new THREE.Color( override.specular ); + + if( override.diffuse_map != undefined ) params.diffuse_map = override.diffuse_map; + if( override.specular_map != undefined ) params.specular_map = override.specular_map; + + if( override.shininess != undefined ) params.shininess = override.shininess; + + if( override.alpha != undefined ) params.alpha = override.alpha; + if( override.shading != undefined ) params.shading = override.shading; + if( override.blending != undefined ) params.blending = override.blending; + if( override.wireframe != undefined ) params.wireframe = override.wireframe; + + } + + return params; + }; THREE.MeshPhongMaterial = { value: 0 }; -- GitLab