Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
Merge pull request #1 from sunnygoyal/master
Add texture support
authored by
Different55
and committed by
GitHub
c882b3a4
dde8684b
+501
-13
demos/textures/dice.png
demos/textures/dice.png
This is a binary file and will not be displayed.
+102
demos/textures/index.html
+102
demos/textures/index.html
···
1
+
<!doctype html>
2
+
<html lang="en">
3
+
<head>
4
+
<meta charset="utf-8" />
5
+
<meta name="viewport" content="width=device-width" />
6
+
7
+
<title>Textures</title>
8
+
9
+
<style>
10
+
html { height: 100%; }
11
+
12
+
body {
13
+
min-height: 100%;
14
+
margin: 0;
15
+
}
16
+
17
+
.illo {
18
+
display: block;
19
+
margin: 20px auto;
20
+
background: #FDB;
21
+
cursor: move;
22
+
}
23
+
.container {
24
+
margin: 0 5px;
25
+
}
26
+
.row {
27
+
display: flex;
28
+
align-items: center;
29
+
justify-content: center;
30
+
font-family: sans-serif;
31
+
text-align: center;
32
+
}
33
+
</style>
34
+
35
+
</head>
36
+
<body>
37
+
38
+
<div class="row">
39
+
<h1>Canvas</h1>
40
+
</div>
41
+
<div class="row">
42
+
<div class="container">
43
+
<h3>Gradient</h3>
44
+
<canvas class="illo" id="illo_coin" width="300" height="300"></canvas>
45
+
</div>
46
+
47
+
<div class="container">
48
+
<h3>Box</h3>
49
+
<canvas class="illo" id="illo_box" width="300" height="300"></canvas>
50
+
</div>
51
+
52
+
<div class="container">
53
+
<h3>Tetrahedron</h3>
54
+
<canvas class="illo" id="illo_tetrahedron" width="300" height="300"></canvas>
55
+
</div>
56
+
</div>
57
+
58
+
<div class="row">
59
+
<h1>SVG</h1>
60
+
</div>
61
+
<div class="row">
62
+
<div class="container">
63
+
<h3>Gradient</h3>
64
+
<svg class="illo" id="illo_coin_svg" width="300" height="300"></svg>
65
+
</div>
66
+
67
+
<div class="container">
68
+
<h3>Box</h3>
69
+
<svg class="illo" id="illo_box_svg" width="300" height="300"></svg>
70
+
</div>
71
+
72
+
<div class="container">
73
+
<h3>Tetrahedron</h3>
74
+
<svg class="illo" id="illo_tetrahedron_svg" width="300" height="300"></svg>
75
+
</div>
76
+
</div>
77
+
78
+
<script src="../../js/boilerplate.js"></script>
79
+
<script src="../../js/canvas-renderer.js"></script>
80
+
<script src="../../js/svg-renderer.js"></script>
81
+
<script src="../../js/vector.js"></script>
82
+
<script src="../../js/anchor.js"></script>
83
+
<script src="../../js/path-command.js"></script>
84
+
<script src="../../js/shape.js"></script>
85
+
<script src="../../js/ellipse.js"></script>
86
+
<script src="../../js/rect.js"></script>
87
+
<script src="../../js/rounded-rect.js"></script>
88
+
<script src="../../js/polygon.js"></script>
89
+
<script src="../../js/group.js"></script>
90
+
<script src="../../js/hemisphere.js"></script>
91
+
<script src="../../js/cylinder.js"></script>
92
+
<script src="../../js/cone.js"></script>
93
+
<script src="../../js/box.js"></script>
94
+
<script src="../../js/dragger.js"></script>
95
+
<script src="../../js/illustration.js"></script>
96
+
97
+
<script src="../../js/texture.js"></script>
98
+
99
+
<script src="textures.js"></script>
100
+
101
+
</body>
102
+
</html>
demos/textures/tetrahedron.png
demos/textures/tetrahedron.png
This is a binary file and will not be displayed.
+119
demos/textures/textures.js
+119
demos/textures/textures.js
···
1
+
function loadImage(url) {
2
+
return new Promise(r => { let i = new Image(); i.onload = (() => r(i)); i.src = url; });
3
+
}
4
+
5
+
function createIllustration(selector) {
6
+
// ----- variables ----- //
7
+
var isSpinning = true;
8
+
9
+
// ----- model ----- //
10
+
var illo = new Zdog.Illustration({
11
+
element: selector,
12
+
dragRotate: true,
13
+
zoom: 1,
14
+
onDragStart: function() {
15
+
isSpinning = false;
16
+
},
17
+
});
18
+
19
+
// ----- animate ----- //
20
+
function animate() {
21
+
illo.rotate.y += isSpinning ? 0.03 : 0;
22
+
illo.updateRenderGraph();
23
+
requestAnimationFrame( animate );
24
+
}
25
+
animate();
26
+
return illo;
27
+
}
28
+
29
+
function loadForBothRenderer(val, callback) {
30
+
callback("", val);
31
+
callback("_svg", val);
32
+
}
33
+
34
+
// Coin
35
+
loadForBothRenderer(0, suffix => {
36
+
new Zdog.Cylinder({
37
+
addTo: createIllustration("#illo_coin" + suffix),
38
+
diameter: 200,
39
+
length: 10,
40
+
color: "#000",
41
+
backface: new Zdog.Texture({
42
+
linearGrad:[0, 0, 100, 0],
43
+
colorStops:[0, '#833ab4', .5, '#fd1d1d', 1, '#fcb045'],
44
+
dst: [-100, -100, 200, 200],
45
+
src:[0, 0, 100, 100]}),
46
+
frontFace: new Zdog.Texture({
47
+
radialGrad:[50, 50, 0, 50, 50, 50],
48
+
colorStops:[0, '#3f5efb', .25, '#b471a3', .5, '#adb753', .75, '#5fd0d8', 1, '#fc466b'],
49
+
dst: [-100, -100, 200, 200],
50
+
src:[0, 0, 100, 100]}),
51
+
stroke: false,
52
+
});
53
+
});
54
+
55
+
loadImage("dice.png").then(img => loadForBothRenderer(img, (suffix, img) => {
56
+
new Zdog.Box({
57
+
addTo: createIllustration("#illo_box" + suffix),
58
+
width: 120,
59
+
height: 120,
60
+
depth: 120,
61
+
stroke: false,
62
+
color: '#F00',
63
+
frontFace: new Zdog.Texture({img: img, src:[0, 0, 200, 200], dst: [-60, -60, 120, 120]}),
64
+
rearFace: new Zdog.Texture({img: img, src:[0, 200, 200, 200], dst: [-60, -60, 120, 120]}),
65
+
leftFace: new Zdog.Texture({img: img, src:[200, 0, 200, 200], dst: [-60, -60, 120, 120]}),
66
+
rightFace: new Zdog.Texture({img: img, src:[200, 200, 200, 200], dst: [-60, -60, 120, 120]}),
67
+
topFace: new Zdog.Texture({img: img, src:[400, 0, 200, 200], dst: [-60, -60, 120, 120]}),
68
+
bottomFace: new Zdog.Texture({img: img, src:[400, 200, 200, 200], dst: [-60, -60, 120, 120]}),
69
+
});
70
+
}));
71
+
72
+
73
+
// Tetrahedron
74
+
loadImage("tetrahedron.png").then(img => loadForBothRenderer(img, (suffix, img) => {
75
+
var tetrahedron = new Zdog.Anchor({
76
+
addTo: createIllustration("#illo_tetrahedron" + suffix),
77
+
translate: { x: 0, y: 0 },
78
+
});
79
+
80
+
var radius = 80;
81
+
var deg_120 = Zdog.TAU / 3;
82
+
83
+
var depthFactor = radius * Math.sqrt(6) * 3 / 2;
84
+
var r = -depthFactor / 12;
85
+
86
+
var p1 = {x: 0, y : radius, z: r};
87
+
var p2 = {x: radius * Math.sin(deg_120), y : radius * Math.cos(deg_120), z: r};
88
+
var p3 = {x: radius * Math.sin(2 * deg_120), y : radius * Math.cos(2 * deg_120), z: r}
89
+
var p4 = {x: 0, y: 0, z: depthFactor / 4};
90
+
91
+
new Zdog.Shape({
92
+
path: [p1, p2, p3, p1],
93
+
addTo: tetrahedron,
94
+
stroke: 1,
95
+
color: new Zdog.Texture({img: img, src:[{x:10, y: 210}, {x:210, y: 210}, {x:110, y: 36.8}], dst: [p1, p2, p3]}),
96
+
fill: true,
97
+
});
98
+
new Zdog.Shape({
99
+
path: [p1, p2, p4, p1],
100
+
addTo: tetrahedron,
101
+
stroke: 1,
102
+
color: new Zdog.Texture({img: img, src:[{x:210, y: 210}, {x:410, y: 210}, {x:310, y: 36.8}], dst: [p1, p2, p4]}),
103
+
fill: true,
104
+
});
105
+
new Zdog.Shape({
106
+
path: [p1, p4, p3, p1],
107
+
addTo: tetrahedron,
108
+
stroke: 1,
109
+
color: new Zdog.Texture({img: img, src:[{x:410, y: 210}, {x:610, y: 210}, {x:510, y: 36.8}], dst: [p1, p4, p3]}),
110
+
fill: true,
111
+
});
112
+
new Zdog.Shape({
113
+
path: [p4, p2, p3, p4],
114
+
addTo: tetrahedron,
115
+
stroke: 1,
116
+
color: new Zdog.Texture({img: img, src:[{x:610, y: 210}, {x:810, y: 210}, {x:710, y: 36.8}], dst: [p4, p2, p3]}),
117
+
fill: true,
118
+
});
119
+
}));
+7
js/boilerplate.js
+7
js/boilerplate.js
···
70
70
return isFirstHalf ? curve : 1 - curve;
71
71
};
72
72
73
+
Zdog.isColor = function(value) {
74
+
return (typeof value == 'string') || (value && value.isTexture);
75
+
}
76
+
Zdog.cloneColor = function(value) {
77
+
return (value && value.clone) ? value.clone() : value;
78
+
}
79
+
73
80
return Zdog;
74
81
75
82
} ) );
+5
-1
js/box.js
+5
-1
js/box.js
···
87
87
}
88
88
// update & add face
89
89
var options = this.getFaceOptions( faceName );
90
-
options.color = typeof value == 'string' ? value : this.color;
90
+
if (utils.isColor(value)) {
91
+
options.color = value;
92
+
} else {
93
+
options.color = utils.cloneColor(this.color);
94
+
}
91
95
92
96
if ( rect ) {
93
97
// update previous
+18
-4
js/canvas-renderer.js
+18
-4
js/canvas-renderer.js
···
51
51
if ( !isStroke ) {
52
52
return;
53
53
}
54
-
ctx.strokeStyle = color;
55
54
ctx.lineWidth = lineWidth;
56
-
ctx.stroke();
55
+
if (color && color.getCanvasFill) {
56
+
ctx.save();
57
+
ctx.strokeStyle = color.getCanvasFill(ctx);
58
+
ctx.stroke();
59
+
ctx.restore();
60
+
} else {
61
+
ctx.strokeStyle = color;
62
+
ctx.stroke();
63
+
}
57
64
};
58
65
59
66
CanvasRenderer.fill = function( ctx, elem, isFill, color ) {
60
67
if ( !isFill ) {
61
68
return;
62
69
}
63
-
ctx.fillStyle = color;
64
-
ctx.fill();
70
+
if (color && color.getCanvasFill) {
71
+
ctx.save();
72
+
ctx.fillStyle = color.getCanvasFill(ctx);
73
+
ctx.fill();
74
+
ctx.restore();
75
+
} else {
76
+
ctx.fillStyle = color;
77
+
ctx.fill();
78
+
}
65
79
};
66
80
67
81
CanvasRenderer.end = function() {};
+2
-2
js/cylinder.js
+2
-2
js/cylinder.js
···
120
120
color: this.color,
121
121
stroke: this.stroke,
122
122
fill: this.fill,
123
-
backface: this.frontFace || baseColor,
123
+
backface: utils.cloneColor(this.frontFace || baseColor),
124
124
visible: this.visible,
125
125
});
126
126
// back outside base
127
127
this.rearBase = this.group.rearBase = this.frontBase.copy({
128
128
translate: { z: -baseZ },
129
129
rotate: { y: 0 },
130
-
backface: baseColor,
130
+
backface: utils.cloneColor(baseColor),
131
131
});
132
132
};
133
133
+4
-2
js/index.js
+4
-2
js/index.js
···
24
24
require('./hemisphere'),
25
25
require('./cylinder'),
26
26
require('./cone'),
27
-
require('./box')
27
+
require('./box'),
28
+
require('./texture')
28
29
);
29
30
} else if ( typeof define == 'function' && define.amd ) {
30
31
/* globals define */ // AMD
···
33
34
/* eslint-disable max-params */
34
35
} )( this, function factory( Zdog, CanvasRenderer, SvgRenderer, Vector, Anchor,
35
36
Dragger, Illustration, PathCommand, Shape, Group, Rect, RoundedRect,
36
-
Ellipse, Polygon, Hemisphere, Cylinder, Cone, Box ) {
37
+
Ellipse, Polygon, Hemisphere, Cylinder, Cone, Box, Texture ) {
37
38
/* eslint-enable max-params */
38
39
39
40
Zdog.CanvasRenderer = CanvasRenderer;
···
53
54
Zdog.Cylinder = Cylinder;
54
55
Zdog.Cone = Cone;
55
56
Zdog.Box = Box;
57
+
Zdog.Texture = Texture;
56
58
57
59
return Zdog;
58
60
} );
+16
-4
js/shape.js
+16
-4
js/shape.js
···
91
91
this.pathCommands.forEach( function( command ) {
92
92
command.reset();
93
93
} );
94
+
95
+
if (this.backface && this.backface.reset) {
96
+
this.backface.reset();
97
+
}
98
+
if (this.color && this.color.reset) {
99
+
this.color.reset();
100
+
}
94
101
};
95
102
96
103
Shape.prototype.transform = function( translation, rotation, scale ) {
···
106
113
this.children.forEach( function( child ) {
107
114
child.transform( translation, rotation, scale );
108
115
} );
116
+
if (this.backface && this.backface.transform) {
117
+
this.backface.transform( translation, rotation, scale );
118
+
}
119
+
if (this.color && this.color.transform) {
120
+
this.color.transform( translation, rotation, scale );
121
+
}
109
122
};
110
123
111
124
Shape.prototype.updateSortValue = function() {
···
153
166
154
167
var TAU = utils.TAU;
155
168
// Safari does not render lines with no size, have to render circle instead
156
-
Shape.prototype.renderCanvasDot = function( ctx ) {
169
+
Shape.prototype.renderCanvasDot = function( ctx , renderer) {
157
170
var lineWidth = this.getLineWidth();
158
171
if ( !lineWidth ) {
159
172
return;
160
173
}
161
-
ctx.fillStyle = this.getRenderColor();
162
174
var point = this.pathCommands[0].endRenderPoint;
163
175
ctx.beginPath();
164
176
var radius = lineWidth/2;
165
177
ctx.arc( point.x, point.y, radius, 0, TAU );
166
-
ctx.fill();
178
+
renderer.fill(ctx, null, true, this.getRenderColor() );
167
179
};
168
180
169
181
Shape.prototype.getLineWidth = function() {
···
178
190
179
191
Shape.prototype.getRenderColor = function() {
180
192
// use backface color if applicable
181
-
var isBackfaceColor = typeof this.backface == 'string' && this.isFacingBack;
193
+
var isBackfaceColor = utils.isColor(this.backface) && this.isFacingBack;
182
194
var color = isBackfaceColor ? this.backface : this.color;
183
195
return color;
184
196
};
+6
js/svg-renderer.js
+6
js/svg-renderer.js
···
62
62
if ( !isStroke ) {
63
63
return;
64
64
}
65
+
if (color && color.getSvgFill) {
66
+
color = color.getSvgFill(svg);
67
+
}
65
68
elem.setAttribute( 'stroke', color );
66
69
elem.setAttribute( 'stroke-width', lineWidth );
67
70
};
68
71
69
72
SvgRenderer.fill = function( svg, elem, isFill, color ) {
70
73
var fillColor = isFill ? color : 'none';
74
+
if (fillColor && fillColor.getSvgFill) {
75
+
fillColor = fillColor.getSvgFill(svg);
76
+
}
71
77
elem.setAttribute( 'fill', fillColor );
72
78
};
73
79
+222
js/texture.js
+222
js/texture.js
···
1
+
/**
2
+
* Texture
3
+
*/
4
+
( function( root, factory ) {
5
+
// module definition
6
+
if ( typeof module == 'object' && module.exports ) {
7
+
// CommonJS
8
+
module.exports = factory(require('./vector'));
9
+
} else {
10
+
// browser global
11
+
var Zdog = root.Zdog;
12
+
Zdog.Texture = factory(Zdog.Vector);
13
+
}
14
+
}( this, function factory(Vector) {
15
+
16
+
/**
17
+
* Calculates the inverse of the matrix:
18
+
* | x1 x2 x3 |
19
+
* | y1 y2 y3 |
20
+
* | 1 1 1 |
21
+
*/
22
+
function inverse(x1, y1, x2, y2, x3, y3) {
23
+
let tp = [
24
+
y2 - y3, x3 - x2, x2*y3 - x3*y2,
25
+
y3 - y1, x1 - x3, x3*y1 - x1*y3,
26
+
y1 - y2, x2 - x1, x1*y2 - x2*y1];
27
+
let det = tp[2] + tp[5] + tp[8];
28
+
return tp.map(function(x) { return x / det;});
29
+
}
30
+
31
+
function parsePointMap(size, map) {
32
+
if (!Array.isArray(map) || !map.length) {
33
+
map = [0, 0, size[0], size[1]];
34
+
}
35
+
if (typeof(map[0]) == "number") {
36
+
if (map.length < 4) {
37
+
let tmp = map;
38
+
map = [0, 0, size[0], size[1]];
39
+
for (let i = 0; i < tmp.length; i++) {
40
+
map[i] = tmp[i];
41
+
}
42
+
}
43
+
return [
44
+
new Vector({x:map[0], y:map[1], z:1}),
45
+
new Vector({x:map[0] + map[2], y:map[1], z:1}),
46
+
new Vector({x:map[0], y:map[1] + map[3], z:1})
47
+
];
48
+
} else {
49
+
return [new Vector(map[0]), new Vector(map[1]), new Vector(map[2])];
50
+
}
51
+
}
52
+
53
+
var idCounter = 0;
54
+
55
+
const optionKeys = [
56
+
'img',
57
+
'linearGrad',
58
+
'radialGrad',
59
+
'colorStops',
60
+
'src',
61
+
'dst'
62
+
]
63
+
64
+
/**
65
+
* Creates a tecture map. Possible options:
66
+
* img: Image object to be used as texture
67
+
* linearGrad: [x1, y1, x2, y2] Array defining the linear gradient
68
+
* radialGrad: [x0, y0, r0, x1, y1, r1] Array defining the radial gradient
69
+
* colorStops: [offset1, color1, offset2, color2...] Array defining the color
70
+
* stops for the gradient, offset must be in range [0, 1]
71
+
*
72
+
* src: <surface definition> Represents the surface for the texture. Above
73
+
* gradient definition should be represented in this coordinate space
74
+
* dst: <surface definition> Represents the surface of the object. This allows
75
+
* keeping the texture definition independent of the surface definition
76
+
*
77
+
* <surface definition> Can be represented in one of the following ways:
78
+
* [x, y, width, height] => We use 3 points top-left, top-right, bottom-left
79
+
* [x, y] => image/gradient size is used for width and height with the above rule
80
+
* [vector, vector, vector] => provided points are used
81
+
*/
82
+
function Texture(options) {
83
+
this.id = idCounter++;
84
+
this.isTexture = true;
85
+
86
+
options = options || { }
87
+
for (var key in options ) {
88
+
if (optionKeys.indexOf( key ) != -1 ) {
89
+
this[key] = options[key];
90
+
}
91
+
}
92
+
93
+
var size;
94
+
if (options.img) {
95
+
size = [options.img.width, options.img.height];
96
+
} else if (options.linearGrad) {
97
+
size = [Math.abs(options.linearGrad[2] - options.linearGrad[0]), Math.abs(options.linearGrad[3] - options.linearGrad[1])];
98
+
} else if (options.radialGrad) {
99
+
size = [Math.abs(options.radialGrad[3] - options.radialGrad[0]), Math.abs(options.radialGrad[4] - options.radialGrad[1])];
100
+
} else {
101
+
throw "One of [img, linearGrad, radialGrad] is required";
102
+
}
103
+
if (size[0] == 0) size[0] = size[1];
104
+
if (size[1] == 0) size[1] = size[0];
105
+
106
+
this.src = parsePointMap(size, options.src);
107
+
this.dst = parsePointMap(size, options.dst);
108
+
109
+
this.srcInverse = inverse(
110
+
this.src[0].x, this.src[0].y,
111
+
this.src[1].x, this.src[1].y,
112
+
this.src[2].x, this.src[2].y);
113
+
this.p1 = new Vector();
114
+
this.p2 = new Vector();
115
+
this.p3 = new Vector();
116
+
this.matrix = [0, 0, 0, 0, 0, 0];
117
+
};
118
+
119
+
Texture.prototype.getMatrix = function() {
120
+
let m = this.matrix;
121
+
let inverse = this.srcInverse;
122
+
m[0] = this.p1.x * inverse[0] + this.p2.x * inverse[3] + this.p3.x * inverse[6];
123
+
m[1] = this.p1.y * inverse[0] + this.p2.y * inverse[3] + this.p3.y * inverse[6];
124
+
m[2] = this.p1.x * inverse[1] + this.p2.x * inverse[4] + this.p3.x * inverse[7];
125
+
m[3] = this.p1.y * inverse[1] + this.p2.y * inverse[4] + this.p3.y * inverse[7];
126
+
m[4] = this.p1.x * inverse[2] + this.p2.x * inverse[5] + this.p3.x * inverse[8];
127
+
m[5] = this.p1.y * inverse[2] + this.p2.y * inverse[5] + this.p3.y * inverse[8];
128
+
return m;
129
+
}
130
+
131
+
Texture.prototype.getCanvasFill = function(ctx) {
132
+
if (!this.pattern) {
133
+
if (this.img) {
134
+
this.pattern = ctx.createPattern(this.img, "repeat");
135
+
} else {
136
+
this.pattern = this.linearGrad
137
+
? ctx.createLinearGradient.apply(ctx, this.linearGrad)
138
+
: ctx.createRadialGradient.apply(ctx, this.radialGrad);
139
+
if (this.colorStops) {
140
+
for (var i = 0; i < this.colorStops.length; i+=2) {
141
+
this.pattern.addColorStop(this.colorStops[i], this.colorStops[i+1]);
142
+
}
143
+
}
144
+
}
145
+
}
146
+
// pattern.setTransform is not supported in IE,
147
+
// so transform the context instead
148
+
ctx.transform.apply(ctx, this.getMatrix());
149
+
return this.pattern;
150
+
};
151
+
152
+
const svgURI = 'http://www.w3.org/2000/svg';
153
+
Texture.prototype.getSvgFill = function(svg) {
154
+
if (!this.svgPattern) {
155
+
if (this.img) {
156
+
this.svgPattern = document.createElementNS( svgURI, 'pattern');
157
+
this.svgPattern.setAttribute("width", this.img.width);
158
+
this.svgPattern.setAttribute("height", this.img.height);
159
+
this.svgPattern.setAttribute("patternUnits", "userSpaceOnUse");
160
+
this.attrTransform = "patternTransform";
161
+
162
+
let img = document.createElementNS( svgURI, 'image');
163
+
img.setAttribute("href", this.img.src);
164
+
this.svgPattern.appendChild(img);
165
+
} else {
166
+
var type, vals, keys;
167
+
if (this.linearGrad) {
168
+
type = "linearGradient";
169
+
vals = this.linearGrad;
170
+
keys = ["x1", "y1", "x2", "y2"]
171
+
} else {
172
+
type = "radialGradient";
173
+
vals = this.radialGrad;
174
+
keys = ["fx", "fy", "fr", "cx", "cy", "r"]
175
+
}
176
+
this.svgPattern = document.createElementNS( svgURI, type);
177
+
for (var i = 0; i < keys.length; i++) {
178
+
this.svgPattern.setAttribute(keys[i], vals[i]);
179
+
}
180
+
181
+
if (this.colorStops) {
182
+
for (var i = 0; i < this.colorStops.length; i+=2) {
183
+
let colorStop = document.createElementNS(svgURI, 'stop' );
184
+
colorStop.setAttribute("offset", this.colorStops[i]);
185
+
colorStop.setAttribute("style", "stop-color:" + this.colorStops[i+1]);
186
+
this.svgPattern.appendChild(colorStop);
187
+
}
188
+
}
189
+
this.svgPattern.setAttribute("gradientUnits", "userSpaceOnUse");
190
+
this.attrTransform = "gradientTransform";
191
+
}
192
+
this.svgPattern.setAttribute("id", "texture_" + this.id);
193
+
this._svgUrl = 'url(#texture_' + this.id + ')';
194
+
195
+
this.defs = document.createElementNS(svgURI, 'defs' );
196
+
this.defs.appendChild(this.svgPattern);
197
+
}
198
+
199
+
this.svgPattern.setAttribute(this.attrTransform, 'matrix(' + this.getMatrix().join(' ') + ')');
200
+
svg.appendChild( this.defs );
201
+
return this._svgUrl;
202
+
}
203
+
204
+
// ----- update ----- //
205
+
Texture.prototype.reset = function() {
206
+
this.p1.set(this.dst[0]);
207
+
this.p2.set(this.dst[1]);
208
+
this.p3.set(this.dst[2]);
209
+
};
210
+
211
+
Texture.prototype.transform = function( translation, rotation, scale ) {
212
+
this.p1.transform(translation, rotation, scale);
213
+
this.p2.transform(translation, rotation, scale);
214
+
this.p3.transform(translation, rotation, scale);
215
+
};
216
+
217
+
Texture.prototype.clone = function() {
218
+
return new Texture(this);
219
+
};
220
+
221
+
return Texture;
222
+
} ) );