Skip to content

Commit 5ea8a16

Browse files
mrdoobmrdoob
committed
Merge remote-tracking branch 'WestLangley/dev-sprite' into dev
2 parents b8f30ae + 4d7319a commit 5ea8a16

3 files changed

Lines changed: 27 additions & 54 deletions

File tree

‎examples/misc_ubiquity_test.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<title>three.js misc - geometry - polyfield</title>
4+
<title>three.js misc - ubiquity - test</title>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
77
<style>

‎examples/misc_ubiquity_test2.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<title>three.js misc - geometry - polyfield</title>
4+
<title>three.js misc - ubiquity - test2</title>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
77
<style>
@@ -104,7 +104,7 @@
104104
var material = new THREE.SpriteMaterial( { map: texture2, opacity: 0.7 } );
105105
var sprite = new THREE.Sprite( material );
106106

107-
//sprite.material.rotation = Math.random(); // rotation is not supported by CanvasRenderer when repeating textures
107+
sprite.material.rotation = 0.5 * Math.PI * ( Math.random() - 0.5 );
108108

109109
sprite.position.x = Math.random() * 1000 - 500;
110110
sprite.position.y = Math.random() * 1000 - 500;
@@ -210,8 +210,8 @@
210210

211211
//
212212

213-
texture2.repeat.x = Math.sin( time ) + 2.0;
214-
texture2.repeat.y = Math.sin( time ) + 2.0;
213+
texture2.repeat.x = Math.sin( time ) + 1.25;
214+
texture2.repeat.y = Math.sin( time ) + 1.25;
215215

216216
texture2.offset.x = Math.sin( time );
217217
texture2.offset.y = Math.cos( time );

‎src/renderers/CanvasRenderer.js‎

Lines changed: 22 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -488,66 +488,39 @@ THREE.CanvasRenderer = function ( parameters ) {
488488

489489
}
490490

491-
//
492-
493-
var bitmap = texture.image;
494-
495-
if ( texture.repeat.x <= 1 && texture.repeat.y <= 1 ) { // rotation supported
496-
497-
var ox = bitmap.width * texture.offset.x;
498-
var oy = bitmap.height * ( 1 - texture.offset.y - texture.repeat.y );
499-
500-
var sx = bitmap.width * texture.repeat.x;
501-
var sy = bitmap.height * texture.repeat.y;
502-
503-
_context.save();
504-
505-
_context.translate( v1.x, v1.y );
506-
507-
if ( material.rotation !== 0 ) _context.rotate( material.rotation );
508-
509-
_context.scale( scaleX, - scaleY );
510-
511-
_context.drawImage( bitmap, ox, oy, sx, sy, - 0.5, - 0.5, 1, 1 );
512-
513-
_context.restore();
514-
515-
} else { // repeat.x or repeat.y > 1 // rotation not supported
516-
517-
var ox = bitmap.width * texture.offset.x;
518-
var oy = bitmap.height * texture.offset.y;
491+
var pattern = _patterns[ texture.id ];
519492

520-
var sx = bitmap.width * texture.repeat.x;
521-
var sy = bitmap.height * texture.repeat.y;
493+
if ( pattern !== undefined ) {
522494

523-
var cx = sx / scaleX;
524-
var cy = sy / scaleY;
495+
setFillStyle( pattern );
525496

526-
var pattern = _patterns[ texture.id ];
527-
528-
if ( pattern !== undefined ) {
529-
530-
setFillStyle( pattern );
531-
532-
} else {
533-
534-
setFillStyle( 'rgba( 0, 0, 0, 1 )' );
497+
} else {
535498

536-
}
499+
setFillStyle( 'rgba( 0, 0, 0, 1 )' );
537500

538-
_context.save();
501+
}
539502

540-
_context.scale( 1 / cx, 1 / cy );
503+
//
541504

542-
_context.translate( v1.x * cx - 0.5 * sx - ox, v1.y * cy - 0.5 * sy - oy );
505+
var bitmap = texture.image;
543506

544-
// if ( material.rotation !== 0 ) _context.rotate( material.rotation ); // rotation not supported when using patterns (origin is offset)
507+
var ox = bitmap.width * texture.offset.x;
508+
var oy = bitmap.height * texture.offset.y;
545509

546-
_context.fillRect( ox, oy, sx, sy );
510+
var sx = bitmap.width * texture.repeat.x;
511+
var sy = bitmap.height * texture.repeat.y;
547512

548-
_context.restore();
513+
var cx = scaleX / sx;
514+
var cy = scaleY / sy;
549515

550-
}
516+
_context.save();
517+
_context.translate( v1.x, v1.y );
518+
if ( material.rotation !== 0 ) _context.rotate( material.rotation );
519+
_context.translate( - scaleX / 2, - scaleY / 2 );
520+
_context.scale( cx, cy );
521+
_context.translate( - ox, - oy );
522+
_context.fillRect( ox, oy, sx, sy );
523+
_context.restore();
551524

552525
} else { // no texture
553526

0 commit comments

Comments
 (0)