home/three.js
2
0
Fork 0
mirror of https://github.com/wahyd4/three.js.git synced 2026-08-09 04:56:01 +10:00
Code Issues Packages Projects Releases Wiki Activity

Changed materials format a bit.

Browse Source 
Almost done porting CanvasRenderer to the new material system (plus some performance gains on the way :D)
`Color` now handles hex with no alpha byte (probably there is a nicer way of doing it...)
This commit is contained in:
Mr.doob
2010-11-13 02:39:27 +00:00
parent 25d8237283
commit ce3d641ff2
14 changed files with 425 additions and 453 deletions
Download Patch File Download Diff File Expand all files Collapse all files
build/Three.js
+1 -1
View File
File diff suppressed because one or more lines are too long
build/ThreeDebug.js
+1 -1
View File
File diff suppressed because one or more lines are too long
examples/camera_free.html
+10 -8
View File
@@ -3,7 +3,6 @@
<head>
<title>three.js - geometry - cube</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css">
body {
font-family: Monospace;
@@ -40,13 +39,13 @@
<script type="text/javascript" src="../src/objects/Mesh.js"></script>
<script type="text/javascript" src="../src/objects/Particle.js"></script>
<script type="text/javascript" src="../src/objects/Line.js"></script>
<script type="text/javascript" src="../src/materials/LineColorMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorStrokeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/scenes/Scene.js"></script>
<script type="text/javascript" src="../src/renderers/Projector.js"></script>
<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
@@ -118,7 +117,9 @@
// Plane
plane = new THREE.Mesh( new Plane( 1000, 1000, 10, 10 ), new THREE.MeshColorStrokeMaterial( 0x000000, 0.5, 1 ) );
var material = new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.5, wireframe: true, wireframe_size: 1 } );
plane = new THREE.Mesh( new Plane( 1000, 1000, 10, 10 ), material );
plane.rotation.x = - 90 * ( Math.PI / 180 );
plane.doubleSided = true;
scene.addObject( plane );
@@ -126,10 +127,11 @@
// Spheres
geometry = new Sphere( 100, 16, 8 );
material = new THREE.MeshLambertMaterial( { color: 0xffffff, opacity: 1 } );
for (var i = 0; i < 10; i ++ ) {
cube = new THREE.Mesh(geometry, new THREE.MeshColorFillMaterial( 0xffffff ) );
cube = new THREE.Mesh( geometry, material );
cube.overdraw = true;
cube.position.x = Math.random() * 1000 - 500;
examples/camera_orthographic.html
+3 -3
View File
@@ -57,11 +57,11 @@
for ( var i = 0; i <= 20; i ++ ) {
var line = new THREE.Line( geometry, new THREE.LineColorMaterial( 0x000000, 0.2 ) );
var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
line.position.z = ( i * 50 ) - 500;
scene.addObject( line );
var line = new THREE.Line( geometry, new THREE.LineColorMaterial( 0x000000, 0.2 ) );
var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
line.position.x = ( i * 50 ) - 500;
line.rotation.y = 90 * Math.PI / 180;
scene.addObject( line );
@@ -74,7 +74,7 @@
for ( var i = 0; i < 100; i ++ ) {
var cube = new THREE.Mesh( geometry, new THREE.MeshColorFillMaterial( 0xffffff, Math.random() * 0.5 + 0.5 ) );
var cube = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xffffff, opacity: Math.random() * 0.5 + 0.5 } ) );
cube.overdraw = true;
cube.scale.y = Math.floor( Math.random() * 2 + 1 );
examples/geometry_cube.html
+4 -4
View File
@@ -65,18 +65,18 @@
geometry = new Cube( 200, 200, 200 );
for (var i = 0; i < geometry.faces.length; i++) {
for ( var i = 0; i < geometry.faces.length; i++ ) {
geometry.faces[i].material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, 1 ) ];
geometry.faces[ i ].material = [ new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 1 } ) ];
}
cube = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial() );
cube = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
cube.position.y = 150;
scene.addObject( cube );
// Plane
plane = new THREE.Mesh( new Plane( 200, 200 ), new THREE.MeshColorFillMaterial( 0xe0e0e0 ) );
plane = new THREE.Mesh( new Plane( 200, 200 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } ) );
plane.rotation.x = -90 * ( Math.PI / 180 );
scene.addObject( plane );
examples/interactive_cubes.html
+1 -1
View File
@@ -50,7 +50,7 @@
for ( var i = 0; i < 10; i ++ ) {
var object = new THREE.Mesh( geometry, [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, 0.5 ), new THREE.MeshColorStrokeMaterial( 0xffffff, 0.5 ) ] );
var object = new THREE.Mesh( geometry, [ new THREE.MeshBasicMaterial( { diffuse_color: Math.random() * 0xffffff, opacity: 0.5 } ), new THREE.MeshBasicMaterial( { diffuse_color: 0xffffff, opacity: 0.5, wireframe: true } ) ] );
object.position.x = Math.random() * 800 - 400;
object.position.y = Math.random() * 800 - 400;
object.position.z = Math.random() * 800 - 400;
examples/lights_pointlights.html
+4 -4
View File
@@ -60,19 +60,19 @@
scene = new THREE.Scene();
object = new THREE.Mesh( new WaltHead(), new THREE.MeshColorFillMaterial( 0xffffff ) );
object = new THREE.Mesh( new WaltHead(), new THREE.MeshLambertMaterial( { color: 0xffffff } ) );
object.overdraw = true;
scene.addObject( object );
particle1 = new THREE.Particle( new THREE.ParticleCircleMaterial( 0xff0040 ) );
particle1 = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: 0xff0040 } ) );
particle1.scale.x = particle1.scale.y = particle1.scale.z = 0.5;
scene.addObject( particle1 );
particle2 = new THREE.Particle( new THREE.ParticleCircleMaterial( 0x0040ff ) );
particle2 = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: 0x0040ff } ) );
particle2.scale.x = particle2.scale.y = particle2.scale.z = 0.5;
scene.addObject( particle2 );
particle3 = new THREE.Particle( new THREE.ParticleCircleMaterial( 0x80ff80 ) );
particle3 = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: 0x80ff80 } ) );
particle3.scale.x = particle3.scale.y = particle3.scale.z = 0.5;
scene.addObject( particle3 );
src/core/Color.js
+1 -1
View File
@@ -29,7 +29,7 @@ THREE.Color.prototype = {
setHex: function ( hex ) {
this.hex = hex;
this.hex = Math.floor( hex ).toString(16).length < 8 ? 0xff << 24 ^ hex : hex;
if ( this.autoUpdate ) {
src/materials/LineBasicMaterial.js
+21 -11
View File
@@ -1,24 +1,34 @@
/**
* @author mr.doob / http://mrdoob.com/
*
* params = {
* diffuse_color: new THREE.Color(),
* line_width: Number
* parameters = {
* color: <hex>,
* opacity: <float>,
* blending: THREE.NormalBlending,
* linewidth: <float>
* }
*/
THREE.LineBasicMaterial = function ( params ) {
THREE.LineBasicMaterial = function ( parameters ) {
this.params = params;
this.color = new THREE.Color( 0xeeeeee );
this.opacity = 1;
this.blending = THREE.NormalBlending;
this.linewidth = 1;
};
if ( parameters ) {
THREE.LineBasicMaterial.prototype = {
toString: function () {
return 'THREE.LineBasicMaterial ( params: ' + this.params + ' )';
if ( parameters.color !== undefined ) this.color.setHex( parameters.color );
if ( parameters.opacity !== undefined ) this.opacity = parameters.opacity;
if ( parameters.blending !== undefined ) this.blending = parameters.blending;
if ( parameters.linewidth !== undefined ) this.linewidth = parameters.linewidth;
}
this.toString = function () {
return 'THREE.LineBasicMaterial ( params: ' + this.params + ' )';
};
};
src/materials/MeshBasicMaterial.js
+39 -43
View File
@@ -1,57 +1,53 @@
/**
* @author mr.doob / http://mrdoob.com/
* @author alteredq / http://alteredqualia.com/
* params = {
* color: hex,
* bitmap: new THREE.UVMap( <Image> ),
* alpha: float,
* blending: THREE.AdditiveBlending,
* wireframe: false
*
* parameters = {
* color: <hex>,
* map: new THREE.UVMap( <Image> ),
* opacity: <float>,
* blending: THREE.NormalBlending,
* wireframe: <boolean>,
* wireframe_linewidth: <float>
* }
*/
THREE.MeshBasicMaterial = function ( params ) {
THREE.MeshBasicMaterial = function ( parameters ) {
this.id = THREE.MeshBasicMaterialCounter.value ++;
this.params = this.setDefaultParams( params );
this.id = THREE.MeshBasicMaterialCounter.value ++;
this.color = new THREE.Color( 0xeeeeee );
this.map = null;
this.opacity = 1;
this.blending = THREE.NormalBlending;
this.wireframe = false;
this.wireframe_linewidth = 1;
if ( parameters ) {
if ( parameters.color !== undefined ) this.color.setHex( parameters.color );
if ( parameters.map !== undefined ) this.map = parameters.map;
if ( parameters.opacity !== undefined ) this.opacity = parameters.opacity;
if ( parameters.blending !== undefined ) this.blending = parameters.blending;
if ( parameters.wireframe !== undefined ) this.wireframe = parameters.wireframe;
if ( parameters.wireframe_linewidth !== undefined ) this.wireframe_linewidth = parameters.wireframe_linewidth;
}
this.toString = function () {
return 'THREE.MeshBasicMaterial ( color: ' + this.params.color
+ ', alpha: ' + this.params.alpha
+ ', blending: ' + this.params.blending
+ ', wireframe: ' + this.params.wireframe
+ ', id: ' + this.id + ' )';
return 'THREE.MeshBasicMaterial (<br/>' +
'id: ' + this.id + '<br/>' +
'color: ' + this.color + '<br/>' +
'map: ' + this.map + '<br/>' +
'opacity: ' + this.opacity + '<br/>' +
'blending: ' + this.blending + '<br/>' +
'wireframe: ' + this.wireframe + '<br/>' +
'wireframe_linewidth: ' + this.wireframe_linewidth +'<br/>' +
')';
};
};
}
THREE.MeshBasicMaterial.prototype.setDefaultParams = function ( override ) {
var params = {
color: new THREE.Color( 0xeeeeee ),
bitmap: null,
alpha: 1.0,
blending: THREE.AdditiveBlending,
wireframe: false
};
if ( override != undefined ) {
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;
}
return params;
};
THREE.MeshBasicMaterialCounter = { value: 0 };
THREE.MeshBasicMaterialCounter = { value: 0 };
src/materials/MeshLambertMaterial.js
+41 -45
View File
@@ -1,61 +1,57 @@
/**
* @author mr.doob / http://mrdoob.com/
* @author alteredq / http://alteredqualia.com/
* params = {
* diffuse: hex,
* diffuse_map: new THREE.UVMap( <Image> ),
* alpha: float,
* shading: THREE.Gourad,
* blending: THREE.AdditiveBlending,
* wireframe: false
*
* parameters = {
* color: <hex>,
* map: new THREE.UVMap( <Image> ),
* opacity: <float>,
* shading: THREE.GouraudShading,
* blending: THREE.NormalBlending,
* wireframe: <boolean>,
* wireframe_linewidth: <float>
* }
*/
THREE.MeshLambertMaterial = function ( params ) {
THREE.MeshLambertMaterial = function ( parameters ) {
this.id = THREE.MeshLambertMaterialCounter.value ++;
this.params = this.setDefaultParams( params );
this.color = new THREE.Color( 0xff0000 );
this.map = null;
this.opacity = 1;
this.shading = THREE.GouraudShading;
this.blending = THREE.NormalBlending;
this.wireframe = false;
this.wireframe_linewidth = 1;
if ( parameters ) {
if ( parameters.color !== undefined ) this.color.setHex( parameters.color );
if ( parameters.map !== undefined ) this.map = parameters.map;
if ( parameters.opacity !== undefined ) this.opacity = parameters.opacity;
if ( parameters.shading !== undefined ) this.shading = parameters.shading;
if ( parameters.blending !== undefined ) this.blending = parameters.blending;
if ( parameters.wireframe !== undefined ) this.wireframe = parameters.wireframe;
if ( parameters.wireframe_linewidth !== undefined ) this.wireframe_linewidth = parameters.wireframe_linewidth;
}
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 +' )';
return 'THREE.MeshLambertMaterial (<br/>' +
'id: ' + this.id + '<br/>' +
'color: ' + this.color + '<br/>' +
'map: ' + this.map + '<br/>' +
'opacity: ' + this.opacity + '<br/>' +
'shading: ' + this.shading + '<br/>' +
'blending: ' + this.blending + '<br/>' +
'wireframe: ' + this.wireframe + '<br/>' +
'wireframe_size: ' + this.wireframe_linewidth + '<br/>' +
' )';
};
};
THREE.MeshLambertMaterial.prototype.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 = 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.MeshLambertMaterialCounter = { value: 0 };
src/materials/MeshPhongMaterial.js
+54 -60
View File
@@ -1,78 +1,72 @@
/**
* @author mr.doob / http://mrdoob.com/
* @author alteredq / http://alteredqualia.com/
* params = {
* ambient: hex,
* diffuse: hex,
* specular: hex,
* diffuse_map: new THREE.UVMap( <Image> ),
*
* parameters = {
* ambient: <hex>,
* color: <hex>,
* specular: <hex>,
* map: new THREE.UVMap( <Image> ),
* specular_map: new THREE.UVMap( <Image> ),
* shininess: float,
* alpha: float,
* shading: THREE.Phong,
* shininess: <float>,
* opacity: <float>,
* shading: THREE.PhongShading,
* blending: THREE.AdditiveBlending,
* wireframe: false
* wireframe: <boolean>,
* wireframe_linewidth: <float>
* }
*/
THREE.MeshPhongMaterial = function ( ambient, diffuse, specular, shininess, opacity ) {
THREE.MeshPhongMaterial = function ( parameters ) {
this.id = THREE.MeshPhongMaterialCounter.value ++;
this.params = this.setDefaultParams( params );
this.color = new THREE.Color( 0xeeeeee );
this.map = null;
this.ambient = new THREE.Color( 0x050505 );
this.specular = new THREE.Color( 0x111111 );
this.specular_map = null;
this.shininess = 30;
this.opacity = 1;
this.shading = THREE.GouraudShading;
this.blending = THREE.NormalBlending;
this.wireframe = false;
this.wireframe_linewidth = 1;
if ( parameters ) {
if ( parameters.color !== undefined ) this.color = new THREE.Color( parameters.color );
if ( parameters.map !== undefined ) this.map = parameters.map;
if ( parameters.ambient !== undefined ) this.ambient = new THREE.Color( parameters.ambient );
if ( parameters.specular !== undefined ) this.specular_color = new THREE.Color( parameters.specular );
if ( parameters.specular_map !== undefined ) this.specular_map = parameters.specular_map;
if ( parameters.shininess !== undefined ) this.shininess = parameters.shininess;
if ( parameters.opacity !== undefined ) this.opacity = parameters.opacity;
if ( parameters.shading !== undefined ) this.shading = parameters.shading;
if ( parameters.blending !== undefined ) this.blending = parameters.blending;
if ( parameters.wireframe !== undefined ) this.wireframe = parameters.wireframe;
if ( parameters.wireframe_linewidth !== undefined ) this.wireframe_linewidth = parameters.wireframe_linewidth;
}
this.toString = function () {
return 'THREE.MeshPhongMaterial ( <br/>ambient: ' + this.params.ambient_color
+ ', <br/>diffuse: ' + this.params.diffuse
+ ', <br/>specular: ' + this.params.specular
+ ', <br/>shininess: ' + this.params.shininess
+ ', <br/>alpha: ' + this.params.alpha
+ ', <br/>shading: ' + this.params.shading
+ ', <br/>wireframe: ' + this.params.wireframe
+ ', <br/>id: ' + this.id
+ ')';
return 'THREE.MeshPhongMaterial (<br/>' +
'id: ' + this.id + '<br/>' +
'color: ' + this.color + '<br/>' +
'map: ' + this.map + '<br/>' +
'ambient: ' + this.ambient + '<br/>' +
'specular: ' + this.specular + '<br/>' +
'specular_map: ' + this.specular_map + '<br/>' +
'shininess: ' + this.shininess + '<br/>' +
'alpha: ' + this.opacity + '<br/>' +
'shading: ' + this.shading + '<br/>' +
'wireframe: ' + this.wireframe + '<br/>' +
'wireframe_linewidth: ' + this.wireframe_linewidth + '<br/>' +
+ ')';
};
};
THREE.MeshPhongMaterial.prototype.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 = 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.MeshPhongMaterialCounter = { value: 0 };
src/renderers/CanvasRenderer.js
+227 -247
View File
@@ -10,6 +10,12 @@ THREE.CanvasRenderer = function () {
_canvas = document.createElement( 'canvas' ),
_canvasWidth, _canvasHeight, _canvasWidthHalf, _canvasHeightHalf,
_context = _canvas.getContext( '2d' ),
_contextGlobalAlpha = 1,
_contextStrokeStyle = '#000000',
_contextFillStyle = '#000000',
_contextLineWidth = 1,
_clipRect = new THREE.Rectangle(),
_clearRect = new THREE.Rectangle(),
_bboxRect = new THREE.Rectangle(),
@@ -17,7 +23,7 @@ THREE.CanvasRenderer = function () {
_enableLighting = false,
_color = new THREE.Color( 0xffffffff ),
_light = new THREE.Color( 0xffffffff ),
_ambientLight = new THREE.Color( 0xffffffff ),
_ambientLight = new THREE.Color( 0xff000000 ),
_pi2 = Math.PI * 2,
_vector2 = new THREE.Vector2(), // Needed for expand
@@ -30,12 +36,17 @@ THREE.CanvasRenderer = function () {
this.setSize = function ( width, height ) {
_canvasWidth = width; _canvasHeight = height;
_canvasWidthHalf = _canvasWidth / 2; _canvasHeightHalf = _canvasHeight / 2;
_canvasWidth = width;
_canvasHeight = height;
_canvasWidthHalf = _canvasWidth / 2;
_canvasHeightHalf = _canvasHeight / 2;
_canvas.width = _canvasWidth;
_canvas.height = _canvasHeight;
_context.lineJoin = 'round';
_context.lineCap = 'round';
_clipRect.set( - _canvasWidthHalf, - _canvasHeightHalf, _canvasWidthHalf, _canvasHeightHalf );
};
@@ -115,14 +126,11 @@ THREE.CanvasRenderer = function () {
}
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.closePath();
m = 0; ml = element.material.length;
for ( m = 0, ml = element.material.length; m < ml; m++ ) {
while ( m < ml ) {
material = element.material[ m ];
material = element.material[ m ++ ];
renderLine( v1x, v1y, v2x, v2y, element, material, scene );
@@ -276,19 +284,21 @@ THREE.CanvasRenderer = function () {
function calculateAmbientLight( scene, color ) {
var l, ll, light;
var l, ll, light, lightColor,
lights = scene.lights;
color.setRGBA( 0, 0, 0, 1 );
for ( l = 0, ll = scene.lights.length; l < ll; l++ ) {
for ( l = 0, ll = lights.length; l < ll; l++ ) {
light = scene.lights[ l ];
light = lights[ l ];
lightColor = light.color;
if ( light instanceof THREE.AmbientLight ) {
color.r += light.color.r;
color.g += light.color.g;
color.b += light.color.b;
color.r += lightColor.r;
color.g += lightColor.g;
color.b += lightColor.b;
}
@@ -298,23 +308,25 @@ THREE.CanvasRenderer = function () {
function calculateLight( scene, element, color ) {
var l, ll, light;
var l, ll, light, lightColor,
lights = scene.lights;
for ( l = 0, ll = scene.lights.length; l < ll; l++ ) {
for ( l = 0, ll = lights.length; l < ll; l++ ) {
light = scene.lights[ l ];
light = lights[ l ];
lightColor = light.color;
if ( light instanceof THREE.DirectionalLight ) {
color.r += light.color.r;
color.g += light.color.g;
color.b += light.color.b;
color.r += lightColor.r;
color.g += lightColor.g;
color.b += lightColor.b;
} else if ( light instanceof THREE.PointLight ) {
color.r += light.color.r;
color.g += light.color.g;
color.b += light.color.b;
color.r += lightColor.r;
color.g += lightColor.g;
color.b += lightColor.b;
}
@@ -324,11 +336,13 @@ THREE.CanvasRenderer = function () {
function calculateFaceLight( scene, element, color ) {
var l, ll, light, amount;
var l, ll, light, lightColor, amount
lights = scene.lights;
for ( l = 0, ll = scene.lights.length; l < ll; l++ ) {
for ( l = 0, ll = lights.length; l < ll; l++ ) {
light = scene.lights[ l ];
light = lights[ l ];
lightColor = light.color;
if ( light instanceof THREE.DirectionalLight ) {
@@ -336,9 +350,9 @@ THREE.CanvasRenderer = function () {
if ( amount > 0 ) {
color.r += light.color.r * amount;
color.g += light.color.g * amount;
color.b += light.color.b * amount;
color.r += lightColor.r * amount;
color.g += lightColor.g * amount;
color.b += lightColor.b * amount;
}
@@ -351,9 +365,9 @@ THREE.CanvasRenderer = function () {
if ( amount > 0 ) {
color.r += light.color.r * amount;
color.g += light.color.g * amount;
color.b += light.color.b * amount;
color.r += lightColor.r * amount;
color.g += lightColor.g * amount;
color.b += lightColor.b * amount;
}
@@ -364,53 +378,11 @@ THREE.CanvasRenderer = function () {
}
function renderParticle ( v1x, v1y, element, material, scene ) {
var width, height, scaleX, scaleY, offsetX, offsetY,
bitmap, bitmapWidth, bitmapHeight;
if ( material instanceof THREE.ParticleCircleMaterial ) {
if ( _enableLighting ) {
_light.copyRGB( _ambientLight );
calculateLight( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
} else {
_color = material.color;
}
width = element.scale.x * _canvasWidthHalf;
height = element.scale.y * _canvasHeightHalf;
_bboxRect.set( v1x - width, v1y - height, v1x + width, v1y + height );
if ( !_clipRect.instersects( _bboxRect ) ) {
return;
}
_context.save();
_context.translate( v1x, v1y );
_context.rotate( - element.rotation );
_context.scale( width, height );
_context.beginPath();
_context.arc( 0, 0, 1, 0, _pi2, true );
_context.closePath();
_context.fillStyle = _color.__styleString;
_context.fill();
_context.restore();
} else if ( material instanceof THREE.ParticleBitmapMaterial ) {
if ( material instanceof THREE.ParticleBasicMaterial ) {
bitmap = material.bitmap;
bitmapWidth = bitmap.width / 2;
@@ -456,13 +428,7 @@ THREE.CanvasRenderer = function () {
_context.stroke();
*/
}
}
function renderLine( v1x, v1y, v2x, v2y, element, material, scene ) {
if ( material instanceof THREE.LineColorMaterial ) {
} else if ( material instanceof THREE.ParticleCircleMaterial ) {
if ( _enableLighting ) {
@@ -479,14 +445,67 @@ THREE.CanvasRenderer = function () {
}
_context.lineWidth = material.lineWidth;
_context.lineJoin = "round";
_context.lineCap = "round";
width = element.scale.x * _canvasWidthHalf;
height = element.scale.y * _canvasHeightHalf;
_bboxRect.set( v1x - width, v1y - height, v1x + width, v1y + height );
if ( !_clipRect.instersects( _bboxRect ) ) {
return;
}
_context.save();
_context.translate( v1x, v1y );
_context.rotate( - element.rotation );
_context.scale( width, height );
_context.beginPath();
_context.arc( 0, 0, 1, 0, _pi2, true );
_context.closePath();
_context.fillStyle = _color.__styleString;
_context.fill();
_context.restore();
}
}
function renderLine( v1x, v1y, v2x, v2y, element, material, scene ) {
if ( _contextGlobalAlpha != material.opacity ) {
_context.globalAlpha = _contextGlobalAlpha = material.opacity;
}
if ( material instanceof THREE.LineBasicMaterial ) {
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.closePath();
_color.__styleString = material.color.__styleString;
if ( _contextLineWidth != material.linewidth ) {
_context.lineWidth = _contextLineWidth = material.linewidth;
}
if ( _contextStrokeStyle != _color.__styleString ) {
_context.strokeStyle = _contextStrokeStyle = _color.__styleString;
}
_context.strokeStyle = _color.__styleString;
_context.stroke();
_bboxRect.inflate( _context.lineWidth );
_bboxRect.inflate( material.linewidth * 2 );
}
@@ -496,90 +515,18 @@ THREE.CanvasRenderer = function () {
var bitmap, bitmapWidth, bitmapHeight;
if ( material instanceof THREE.MeshColorFillMaterial ) {
if ( _contextGlobalAlpha != material.opacity ) {
if ( _enableLighting ) {
_context.globalAlpha = _contextGlobalAlpha = material.opacity;
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
}
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
if ( material.map ) {
} else {
_color = material.color;
}
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v1x, v1y );
_context.closePath();
_context.fillStyle = _color.__styleString;
_context.fill();
} else if ( material instanceof THREE.MeshColorStrokeMaterial ) {
if ( _enableLighting ) {
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
} else {
_color = material.color;
}
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v1x, v1y );
_context.closePath();
_context.lineWidth = material.lineWidth;
_context.lineJoin = "round";
_context.lineCap = "round";
_context.strokeStyle = _color.__styleString;
_context.stroke();
_bboxRect.inflate( _context.lineWidth );
} else if ( material instanceof THREE.MeshBitmapMaterial ) {
bitmap = material.bitmap;
bitmap = material.map;
bitmapWidth = bitmap.width - 1;
bitmapHeight = bitmap.height - 1;
/* DEBUG
if ( !element.uvs[ 0 ] || !element.uvs[ 1 ] || !element.uvs[ 2 ]) {
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v1x, v1y );
_context.closePath();
_context.fillStyle = 'rgb(0, 255, 0)';
_context.fill();
return;
}
*/
_uv1.copy( element.uvs[ 0 ] );
_uv2.copy( element.uvs[ 1 ] );
_uv3.copy( element.uvs[ 2 ] );
@@ -590,6 +537,60 @@ THREE.CanvasRenderer = function () {
drawTexturedTriangle( bitmap, v1x, v1y, v2x, v2y, v3x, v3y, _uv1.u, _uv1.v, _uv2.u, _uv2.v, _uv3.u, _uv3.v );
return;
}
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v1x, v1y );
_context.closePath();
if ( material instanceof THREE.MeshBasicMaterial ) {
_color.__styleString = material.color.__styleString;
} else if ( material instanceof THREE.MeshLambertMaterial ) {
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
}
if ( material.wireframe ) {
if ( _contextLineWidth != material.wireframe_linewidth ) {
_context.lineWidth = _contextLineWidth = material.wireframe_linewidth;
}
if ( _contextStrokeStyle != _color.__styleString ) {
_context.strokeStyle = _contextStrokeStyle = _color.__styleString;
}
_context.stroke();
_bboxRect.inflate( material.wireframe_linewidth * 2 );
} else {
if ( _contextFillStyle != _color.__styleString ) {
_context.fillStyle = _contextFillStyle = _color.__styleString;
}
_context.fill();
}
}
@@ -598,94 +599,18 @@ THREE.CanvasRenderer = function () {
var bitmap, bitmapWidth, bitmapHeight;
if ( material instanceof THREE.MeshColorFillMaterial ) {
if ( _contextGlobalAlpha != material.opacity ) {
if ( _enableLighting ) {
_context.globalAlpha = _contextGlobalAlpha = material.opacity;
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
}
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
if ( material.map ) {
} else {
_color = material.color;
}
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v4x, v4y );
_context.lineTo( v1x, v1y );
_context.closePath();
_context.fillStyle = _color.__styleString;
_context.fill();
} else if ( material instanceof THREE.MeshColorStrokeMaterial ) {
if ( _enableLighting ) {
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
} else {
_color = material.color;
}
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v4x, v4y );
_context.lineTo( v1x, v1y );
_context.closePath();
_context.lineWidth = material.lineWidth;
_context.lineJoin = "round";
_context.lineCap = "round";
_context.strokeStyle = _color.__styleString;
_context.stroke();
_bboxRect.inflate( _context.lineWidth );
} else if ( material instanceof THREE.MeshBitmapMaterial ) {
bitmap = material.bitmap;
bitmap = material.map;
bitmapWidth = bitmap.width - 1;
bitmapHeight = bitmap.height - 1;
/* DEBUG
if ( !element.uvs[ 0 ] || !element.uvs[ 1 ] || !element.uvs[ 2 ] || !element.uvs[ 3 ] || !element.uvs[ 4 ] ) {
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v4x, v4y );
_context.lineTo( v1x, v1y );
_context.closePath();
_context.fillStyle = 'rgb(255, 0, 255)';
_context.fill();
return;
}
*/
_uv1.copy( element.uvs[ 0 ] );
_uv2.copy( element.uvs[ 1 ] );
_uv3.copy( element.uvs[ 2 ] );
@@ -699,6 +624,61 @@ THREE.CanvasRenderer = function () {
drawTexturedTriangle( bitmap, v1x, v1y, v2x, v2y, v4x, v4y, _uv1.u, _uv1.v, _uv2.u, _uv2.v, _uv4.u, _uv4.v );
drawTexturedTriangle( bitmap, v5x, v5y, v3x, v3y, v6x, v6y, _uv2.u, _uv2.v, _uv3.u, _uv3.v, _uv4.u, _uv4.v );
return;
}
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v4x, v4y );
_context.lineTo( v1x, v1y );
_context.closePath();
if ( material instanceof THREE.MeshBasicMaterial ) {
_color.__styleString = material.color.__styleString;
} else if ( material instanceof THREE.MeshLambertMaterial ) {
_light.copyRGB( _ambientLight );
calculateFaceLight( scene, element, _light );
_color.copyRGBA( material.color );
_color.multiplySelfRGB( _light );
_color.updateStyleString();
}
if ( material.wireframe ) {
if ( _contextLineWidth != material.wireframe_linewidth ) {
_context.lineWidth = _contextLineWidth = material.wireframe_linewidth;
}
if ( _contextStrokeStyle != _color.__styleString ) {
_context.strokeStyle = _contextStrokeStyle = _color.__styleString;
}
_context.stroke();
_bboxRect.inflate( material.wireframe_linewidth * 2 );
} else {
if ( _contextFillStyle != _color.__styleString ) {
_context.fillStyle = _contextFillStyle = _color.__styleString;
}
_context.fill();
}
}
utils/build.py
+18 -24
View File
@@ -108,13 +108,12 @@ def buildFull(debug):
'objects/Particle.js',
'objects/Line.js',
'objects/Mesh.js',
'materials/LineColorMaterial.js',
'materials/LineBasicMaterial.js',
'materials/MeshBasicMaterial.js',
'materials/MeshLambertMaterial.js',
'materials/MeshPhongMaterial.js',
'materials/MeshBitmapMaterial.js',
'materials/MeshColorFillMaterial.js',
'materials/MeshColorStrokeMaterial.js',
'materials/MeshFaceMaterial.js',
'materials/ParticleBitmapMaterial.js',
'materials/ParticleBasicMaterial.js',
'materials/ParticleCircleMaterial.js',
'materials/ParticleDOMMaterial.js',
'scenes/Scene.js',
@@ -159,13 +158,12 @@ def buildCanvas(debug):
'objects/Particle.js',
'objects/Line.js',
'objects/Mesh.js',
'materials/LineColorMaterial.js',
'materials/LineBasicMaterial.js',
'materials/MeshBasicMaterial.js',
'materials/MeshLambertMaterial.js',
'materials/MeshPhongMaterial.js',
'materials/MeshBitmapMaterial.js',
'materials/MeshColorFillMaterial.js',
'materials/MeshColorStrokeMaterial.js',
'materials/MeshFaceMaterial.js',
'materials/ParticleBitmapMaterial.js',
'materials/ParticleBasicMaterial.js',
'materials/ParticleCircleMaterial.js',
'scenes/Scene.js',
'renderers/Projector.js',
@@ -206,13 +204,12 @@ def buildWebGL(debug):
'objects/Particle.js',
'objects/Line.js',
'objects/Mesh.js',
'materials/LineColorMaterial.js',
'materials/LineBasicMaterial.js',
'materials/MeshBasicMaterial.js',
'materials/MeshLambertMaterial.js',
'materials/MeshPhongMaterial.js',
'materials/MeshBitmapMaterial.js',
'materials/MeshColorFillMaterial.js',
'materials/MeshColorStrokeMaterial.js',
'materials/MeshFaceMaterial.js',
'materials/ParticleBitmapMaterial.js',
'materials/ParticleBasicMaterial.js',
'materials/ParticleCircleMaterial.js',
'scenes/Scene.js',
'renderers/WebGLRenderer.js',
@@ -222,7 +219,7 @@ def buildWebGL(debug):
def buildSVG(debug):
files = [
'Three.js',
'core/Color.js',
@@ -248,12 +245,12 @@ def buildSVG(debug):
'objects/Particle.js',
'objects/Line.js',
'objects/Mesh.js',
'materials/LineColorMaterial.js',
'materials/MeshBitmapMaterial.js',
'materials/MeshColorFillMaterial.js',
'materials/MeshColorStrokeMaterial.js',
'materials/LineBasicMaterial.js',
'materials/MeshBasicMaterial.js',
'materials/MeshLambertMaterial.js',
'materials/MeshPhongMaterial.js',
'materials/MeshFaceMaterial.js',
'materials/ParticleBitmapMaterial.js',
'materials/ParticleBasicMaterial.js',
'materials/ParticleCircleMaterial.js',
'scenes/Scene.js',
'renderers/Projector.js',
@@ -291,9 +288,6 @@ def buildDOM(debug):
'scenes/Scene.js',
'renderers/Projector.js',
'renderers/DOMRenderer.js',
'renderers/CanvasRenderer.js',
'renderers/SVGRenderer.js',
'renderers/WebGLRenderer.js',
'renderers/renderables/RenderableParticle.js',
]