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

SVGRenderer Particle support. CanvasRenderer context.setTransform(). Minor tweaks

Browse Source
This commit is contained in:
Mr.doob
2010-04-26 02:48:16 +01:00
parent 8237dad94b
commit 8d80942e27
5 changed files with 78 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+6
View File
@@ -67,6 +67,12 @@ This code creates a camera, then creates a scene object, adds a bunch of random
### Change Log ###
2010 04 26 - **r4** (16.274 kb)
* SVGRenderer Particle rendering
* CanvasRenderer uses context.setTransform to avoid extra calculations
2010 04 24 - **r3** (16.392 kb)
* Fixed incorrect rotation matrix transforms
build/three.js
+2 -2
View File
File diff suppressed because one or more lines are too long
examples/geometry/cube.html
+10 -1
View File
@@ -105,6 +105,7 @@
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
document.addEventListener('mouseout', onDocumentMouseOut, false);
mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
@@ -120,7 +121,15 @@
function onDocumentMouseUp( event )
{
document.removeEventListener('mousemove', onDocumentMouseMove, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
document.removeEventListener('mouseout', onDocumentMouseOut, false);
}
function onDocumentMouseOut( event )
{
document.removeEventListener('mousemove', onDocumentMouseMove, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
document.removeEventListener('mouseout', onDocumentMouseOut, false);
}
function onDocumentTouchStart( event )
src/renderers/CanvasRenderer.js
+11 -9
View File
@@ -18,6 +18,8 @@ var CanvasRenderer = Renderer.extend
this.viewport.width = this.width;
this.viewport.height = this.height;
this.context.setTransform(1, 0, 0, 1, this.widthHalf, this.heightHalf);
},
render: function( scene, camera )
@@ -26,7 +28,7 @@ var CanvasRenderer = Renderer.extend
var element , pi2 = Math.PI * 2;
this.context.clearRect (0, 0, this.width, this.height);
this.context.clearRect (-this.widthHalf, -this.heightHalf, this.width, this.height);
for (j = 0; j < this.renderList.length; j++)
{
@@ -44,26 +46,26 @@ var CanvasRenderer = Renderer.extend
if (element instanceof Face3)
{
this.context.beginPath();
this.context.moveTo(element.a.screen.x + this.widthHalf, element.a.screen.y + this.heightHalf);
this.context.lineTo(element.b.screen.x + this.widthHalf, element.b.screen.y + this.heightHalf);
this.context.lineTo(element.c.screen.x + this.widthHalf, element.c.screen.y + this.heightHalf);
this.context.moveTo(element.a.screen.x, element.a.screen.y);
this.context.lineTo(element.b.screen.x, element.b.screen.y);
this.context.lineTo(element.c.screen.x, element.c.screen.y);
this.context.fill();
this.context.closePath();
}
else if (element instanceof Face4)
{
this.context.beginPath();
this.context.moveTo(element.a.screen.x + this.widthHalf, element.a.screen.y + this.heightHalf);
this.context.lineTo(element.b.screen.x + this.widthHalf, element.b.screen.y + this.heightHalf);
this.context.lineTo(element.c.screen.x + this.widthHalf, element.c.screen.y + this.heightHalf);
this.context.lineTo(element.d.screen.x + this.widthHalf, element.d.screen.y + this.heightHalf);
this.context.moveTo(element.a.screen.x, element.a.screen.y);
this.context.lineTo(element.b.screen.x, element.b.screen.y);
this.context.lineTo(element.c.screen.x, element.c.screen.y);
this.context.lineTo(element.d.screen.x, element.d.screen.y);
this.context.fill();
this.context.closePath();
}
else if (element instanceof Particle)
{
this.context.beginPath();
this.context.arc(element.screen.x + this.widthHalf, element.screen.y + this.heightHalf, element.size * element.screen.z, 0, pi2, true);
this.context.arc(element.screen.x, element.screen.y, element.size * element.screen.z, 0, pi2, true);
this.context.fill();
this.context.closePath();
}
src/renderers/SVGRenderer.js
+49 -36
View File
@@ -1,10 +1,7 @@
var SVGRenderer = Renderer.extend
({
defs: null,
svgImagePool: null,
svgPatternPool: null,
svgPathPool: null,
svgCirclePool: null,
init: function()
{
@@ -14,23 +11,7 @@ var SVGRenderer = Renderer.extend
this.viewport.style.position = "absolute";
this.svgPathPool = new Array();
this.svgImagePool = new Array();
this.defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
var texture = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
texture.setAttribute('id', 'texture');
texture.setAttribute('patternUnits', 'userSpaceOnUse');
texture.setAttribute('width', 552);
texture.setAttribute('height', 552);
var bitmap = document.createElementNS('http://www.w3.org/2000/svg', 'image');
bitmap.setAttribute('width', 552);
bitmap.setAttribute('height', 552);
bitmap.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'assets/uvmap.jpg');
texture.appendChild(bitmap);
this.svgImagePool.push(texture);
this.svgCirclePool = new Array();
},
setSize: function( width, height )
@@ -49,33 +30,65 @@ var SVGRenderer = Renderer.extend
this.viewport.removeChild(this.viewport.childNodes[0]);
}
this.viewport.appendChild(this.defs);
this.defs.appendChild(this.svgImagePool[0]);
var pathCount = 0, circleCount = 0, svgNode;
for (j = 0; j < this.renderList.length; j++)
{
element = this.renderList[j];
if (this.svgPathPool[j] == null)
{
this.svgPathPool[j] = document.createElementNS('http://www.w3.org/2000/svg', 'path');
this.svgPathPool[j].setAttribute('shape-rendering', 'crispEdges'); //optimizeSpeed
}
// this.svgPathPool[j].setAttribute('style', 'fill:url(#texture)');
this.svgPathPool[j].setAttribute('style', 'fill: rgb(' + element.color[0] + ', ' + element.color[1] + ', ' + element.color[2] + ')'); //fill-opacity:' + 0.5); // + ';stroke:' + element.color + ';stroke-width:10;stroke-opacity:0.5;'); //stroke-miterlimit:40;stroke-dasharray:5');
if (element instanceof Face3)
{
this.svgPathPool[j].setAttribute('d', 'M ' + element.a.screen.x + ' ' + element.a.screen.y + ' L ' + element.b.screen.x + ' ' + element.b.screen.y + ' L ' + element.c.screen.x + ',' + element.c.screen.y + 'z');
svgNode = this.getPathNode(pathCount++);
svgNode.setAttribute('d', 'M ' + element.a.screen.x + ' ' + element.a.screen.y + ' L ' + element.b.screen.x + ' ' + element.b.screen.y + ' L ' + element.c.screen.x + ',' + element.c.screen.y + 'z');
}
else if (element instanceof Face4)
{
this.svgPathPool[j].setAttribute('d', 'M ' + element.a.screen.x + ' ' + element.a.screen.y + ' L ' + element.b.screen.x + ' ' + element.b.screen.y + ' L ' + element.c.screen.x + ',' + element.c.screen.y + ' L ' + element.d.screen.x + ',' + element.d.screen.y + 'z');
svgNode = this.getPathNode(pathCount++);
svgNode.setAttribute('d', 'M ' + element.a.screen.x + ' ' + element.a.screen.y + ' L ' + element.b.screen.x + ' ' + element.b.screen.y + ' L ' + element.c.screen.x + ',' + element.c.screen.y + ' L ' + element.d.screen.x + ',' + element.d.screen.y + 'z');
}
else if (element instanceof Particle)
{
svgNode = this.getCircleNode(circleCount++);
svgNode.setAttribute('cx', element.screen.x);
svgNode.setAttribute('cy', element.screen.y);
svgNode.setAttribute('r', element.size * element.screen.z);
}
this.viewport.appendChild(this.svgPathPool[j]);
if (element.material instanceof ColorMaterial)
{
svgNode.setAttribute('style', 'fill: rgb(' + element.material.color.r + ',' + element.material.color.g + ',' + element.material.color.b + ')');
}
else if (element.material instanceof FaceColorMaterial)
{
svgNode.setAttribute('style', 'fill: rgb(' + element.color.r + ',' + element.color.g + ',' + element.color.b + ')');
}
this.viewport.appendChild(svgNode);
}
},
getPathNode: function( id )
{
if (this.svgPathPool[id] == null)
{
this.svgPathPool[id] = document.createElementNS('http://www.w3.org/2000/svg', 'path');
// this.svgPathPool[id].setAttribute('shape-rendering', 'crispEdges'); //optimizeSpeed
return this.svgPathPool[id];
}
return this.svgPathPool[id];
},
getCircleNode: function( id )
{
if (this.svgCirclePool[id] == null)
{
this.svgCirclePool[id] = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
// this.svgCirclePool[id].setAttribute('shape-rendering', 'crispEdges'); //optimizeSpeed
this.svgCirclePool[id].setAttribute('fill', 'red');
return this.svgCirclePool[id];
}
return this.svgCirclePool[id];
}
});