<body>
<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<div id="spaceship" style="display:none">
<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 100 100" xml:space="preserve" height="68.368" width="83.717" version="1.1" y="0px" x="0px" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 83.717056 68.367615"><g id="g4" transform="translate(-8.3911 -14.895)"><path id="path6" d="m90.987 75.705-3.719-4.821-0.001-3.563c0.064-1.931-0.193-3.088-0.833-3.75-0.155-0.161-0.331-0.288-0.52-0.379l-18.065-16.535c0.89-10.767-0.051-17.783-2.797-20.86-1.21-1.355-2.384-1.452-2.608-1.457-0.458-0.023-0.889 0.207-1.152 0.582l-6.186 8.842c-3.133-2.709-10.305-8.856-11.69-9.571-1.088-0.562-2.081-0.389-2.663 0.35-0.636 0.809-0.443 1.967-0.331 2.428 0.029 0.117 0.073 0.231 0.132 0.336l9.039 16.341c0.09 0.163 0.213 0.306 0.359 0.419l8.104 6.265 11.569 8.795c0.003 0.833-0.535 1.552-0.964 1.993-5.736-2.258-14.439-2.959-15.625-3.045l-8.528-2.108c-0.107-0.027-0.227-0.04-0.336-0.04-1.604 0-4.512 0.851-5.244 4.039-0.748 3.26 2.209 5.198 4.023 5.831l7.87 4.92 0.885 1.27-4.059 2.08c-2.846-1.64-14.477-8.41-20.321-12.846-7.044-5.348-17.038-6.153-17.461-6.184-0.51-0.039-0.999 0.212-1.266 0.649-0.267 0.436-0.267 0.986-0.001 1.422l6.344 10.388-5.959 2.775c-0.4 0.186-0.636 0.608-0.585 1.047 0.052 0.438 0.379 0.795 0.811 0.883 0.33 0.067 7.569 1.534 13.87 1.534 0.158 0 0.311-0.008 0.468-0.01l11.219 4.166c0.035 0.013 0.071 0.025 0.108 0.035 0.678 0.189 16.629 4.641 19.533 5.192 0.505 0.096 1.006 0.145 1.49 0.145 1.817 0 3.028-0.668 3.631-1.111 2.079-0.203 11.405-1.12 15.269-1.603 0.847-0.106 2.001-0.16 3.428-0.16 4.572 0 10.419 0.556 10.477 0.562 0.068 0.006 0.139 0.007 0.207 0.004 1.568-0.089 2.581-0.644 3.01-1.653 0.663-1.554-0.604-3.207-0.932-3.597zm-28.144-48.239c1.133 1.116 3.442 5.154 2.272 19.118l-9.491-8.698 2.133-2.977c0.093-0.129 0.147-0.274 0.173-0.421l4.913-7.022zm-21.255 33.111c0.331-1.442 1.567-1.801 2.205-1.891 0.073 0.432 0.341 2.62-1.384 3.747-0.554-0.44-1.004-1.057-0.821-1.856zm2.786 2.892c1.398-1.399 1.565-3.243 1.513-4.349l6.61 1.633c0.077 0.019 0.156 0.031 0.235 0.037 0.092 0.007 8.612 0.607 14.266 2.624l-3.731 2.522-5.712-0.344c-0.566-0.033-1.049 0.396-1.083 0.959-0.034 0.564 0.396 1.049 0.959 1.083l2.895 0.175c-0.882 3.845-4.523 3.808-5.626 3.703l-1.799-2.582c-0.106-0.151-0.241-0.279-0.396-0.377l-8.131-5.084zm17.265 4.459-0.276-0.057 0.277 0.017c0 0.013-0.002 0.026-0.001 0.04zm-35.134-3.916-6.04-1.482 1.561-1.36c1.268 0.625 2.509 1.358 3.65 2.225 0.265 0.202 0.544 0.408 0.829 0.617zm-10.49 5.242 1.076 1.762c0.079 0.13 0.179 0.244 0.295 0.34-1.703-0.177-3.297-0.399-4.591-0.602l3.22-1.5zm3.159-0.063-6.748-11.05c1.955 0.346 4.721 0.986 7.537 2.112l-2.329 2.029c-0.288 0.25-0.412 0.642-0.322 1.013s0.38 0.662 0.751 0.753l13.217 3.243c4.627 3.03 9.877 6.155 12.976 7.965l-4.029 1.322c-2.405-0.662-4.226-1.17-4.561-1.264l-16.492-6.123zm69.679 9.034c-0.86-0.081-6.22-0.564-10.627-0.564-1.54 0-2.807 0.061-3.766 0.181-4.302 0.538-15.496 1.624-15.609 1.635-0.301 0.029-0.608 0.181-0.828 0.388-0.029 0.027-0.725 0.67-2.126 0.67-0.313 0-0.644-0.033-0.981-0.097-1.321-0.251-5.677-1.404-9.918-2.555l2.191-0.719c0.132-0.043 0.248-0.11 0.356-0.186 0.234 0.011 0.471-0.035 0.686-0.145l6.109-3.129c0.082-0.042 0.158-0.093 0.228-0.15 0.233 0.021 0.476 0.036 0.737 0.036 2.394 0 5.757-1.001 6.885-4.813 0.049 0.025 0.098 0.049 0.151 0.066l17.239 5.597c0.105 0.034 0.211 0.05 0.316 0.05 0.432 0 0.833-0.274 0.973-0.708 0.175-0.538-0.12-1.115-0.658-1.289l-15.535-5.043 4.814-3.25c0.19-0.128 0.32-0.31 0.39-0.512 0.699-0.548 3.051-2.648 2.352-5.616-0.073-0.308-0.25-0.582-0.502-0.773l-12.011-9.132-7.873-6.086-7.76-14.028c2.331 1.867 6.31 5.234 10.014 8.449l-0.667 0.931c-0.301 0.42-0.241 1 0.141 1.35l11.711 10.732c0.19 0.174 0.437 0.269 0.692 0.269 0.034 0 0.068-0.002 0.102-0.005 0.281-0.028 0.535-0.173 0.707-0.396l17.501 16.019c0.049 0.045 0.101 0.085 0.155 0.122 0.055 0.231 0.131 0.741 0.098 1.752v4.073c0 0.302 0.1 0.595 0.284 0.833l4.023 5.215c0.015 0.019 0.03 0.038 0.046 0.056 0.153 0.179 0.34 0.48 0.432 0.701-0.106 0.027-0.258 0.054-0.472 0.071z"/><path id="path8" d="m17.679 48.714c4.695 3.637 8.551 4.05 11.192 3.59 2.764 3.814 7.192 4.36 7.252 4.367 0.039 0.004 0.077 0.006 0.115 0.006 0.513 0 0.954-0.385 1.013-0.907 0.065-0.56-0.338-1.067-0.898-1.133-0.181-0.021-3.196-0.414-5.374-2.949 0.102-0.043 0.2-0.087 0.293-0.13 2.752-1.272 4.679-3.839 4.795-6.388 0.075-1.645-0.801-3.133-2.342-3.981-1.644-0.903-3.612-0.855-5.014 0.127-0.926 0.647-2.394 2.28-1.83 5.95 0.181 1.177 0.49 2.208 0.889 3.113-2.167 0.173-5.162-0.436-8.837-3.282-5.215-4.041-4.911-9.172-3.811-12.663 0.095 0.159 0.191 0.31 0.287 0.455 1.688 2.528 3.985 3.576 5.438 3.705 3.032 0.267 5.847-1.436 6.835-4.149 0.92-2.526-0.018-5.149-2.448-6.848-4.332-3.029-8.186-0.466-9.775 1.482-0.411-2.953-0.123-7.09 1.687-12.853 0.17-0.539-0.13-1.113-0.67-1.282-0.54-0.173-1.113 0.131-1.282 0.67-2.427 7.724-2.244 12.849-1.218 16.194-1.681 3.858-3.52 11.309 3.703 16.906zm12.203-5.72c0.381-0.266 0.861-0.4 1.366-0.4 0.497 0 1.017 0.129 1.489 0.389 0.404 0.223 1.34 0.872 1.284 2.095-0.067 1.454-1.224 3.52-3.61 4.623-0.178 0.083-0.374 0.164-0.589 0.241-0.417-0.839-0.742-1.826-0.921-2.987-0.292-1.908 0.056-3.315 0.981-3.961zm-12.902-12.544c0.316-0.406 3.194-3.892 7.081-1.176 1.66 1.161 2.295 2.831 1.698 4.47-0.549 1.508-2.26 3.029-4.731 2.811-0.752-0.067-2.539-0.739-3.917-2.803-0.342-0.512-0.671-1.127-0.952-1.865 0.421-0.837 0.768-1.358 0.821-1.437z"/></g></svg>
</div>
<div id="batman" style="display:none">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1152px" height="1152px" xml:space="preserve">
<g>
<path id="batman-path" style="fill:rgb(0,0,0);" d="M 261.135 114.535 C 254.906 116.662 247.491 118.825 244.659 119.344 C 229.433 122.131 177.907 142.565 151.973 156.101 C 111.417 177.269 78.9808 203.399 49.2992 238.815 C 41.0479 248.66 26.5057 277.248 21.0148 294.418 C 14.873 313.624 15.3588 357.341 21.9304 376.806 C 29.244 398.469 39.6107 416.935 52.0865 430.524 C 58.2431 437.23 63.3085 443.321 63.3431 444.06 C 63.4748 446.883 102.278 479.707 120.51 492.418 C 131.003 499.734 148.168 509.93 158.654 515.075 C 169.139 520.22 179.431 525.34 181.524 526.454 C 187.725 529.754 187.304 527.547 179.472 515.713 C 164.806 493.553 158.448 464.659 164.322 446.861 C 169.457 431.303 192.013 421.501 214.324 425.132 C 234.042 428.341 252.142 439.186 270.958 459.064 C 286.677 475.67 292.133 482.967 295.31 491.634 C 297.466 497.514 298.948 495.91 304.862 481.293 C 313.673 459.519 329.808 445.735 346.35 445.851 C 367.654 446 399.679 478.239 412.801 512.745 C 414.093 516.144 416.593 522.632 418.355 527.163 C 420.118 531.695 423.604 542.319 426.103 550.773 C 430.848 566.832 432.355 566.851 434.872 550.88 C 436.395 541.215 451.403 502.522 455.655 497.298 C 457.038 495.599 460.63 489.896 463.636 484.625 C 471.696 470.498 492.318 452.688 505.387 448.568 C 514.602 445.663 517.533 445.549 525.51 447.782 C 539.676 451.749 553.43 467.773 560.706 488.788 L 563.242 496.114 L 567.096 490.012 C 577.709 473.208 593.665 453.899 602.47 447.206 C 607.884 443.09 613.378 438.825 614.679 437.729 C 615.98 436.632 622.927 433.259 630.118 430.233 C 655.159 419.693 681.195 423.407 693.273 439.241 C 697.957 445.382 698.932 448.971 699.538 462.294 C 700.174 476.284 699.51 479.864 693.686 493.854 C 690.073 502.533 684.912 512.883 682.217 516.854 C 679.523 520.825 678.172 524.074 679.215 524.074 C 681.932 524.074 718.787 504.481 732.525 495.734 C 760.018 478.228 788.909 452.599 803.9 432.418 C 807.266 427.886 810.569 423.715 811.239 423.149 C 814.498 420.395 828.253 393.099 833.17 379.627 C 838.223 365.782 838.713 361.822 838.741 334.582 C 838.776 300.425 836.431 291.124 820.154 260.873 C 810.649 243.207 807.498 239.005 788.417 218.543 C 751.511 178.968 688.147 142.549 621.582 122.654 C 581.7 110.734 580.388 110.465 580.388 114.195 C 580.388 115.328 581.302 116.255 582.418 116.255 C 584.279 116.255 587.705 122.106 603.399 152.085 C 613.977 172.29 618.077 189.427 618.264 214.21 C 618.42 234.928 617.88 238.368 612.285 252.269 C 604.327 272.04 590.066 286.889 572.829 293.352 C 558.526 298.714 549.193 297.86 535.704 289.955 C 526.777 284.723 512.304 267.644 509.816 259.404 C 509.132 257.138 507.129 251.358 505.366 246.558 C 503.602 241.759 501.646 231.564 501.018 223.902 C 500.39 216.24 498.491 198.402 496.797 184.261 C 495.104 170.121 493.307 152.047 492.803 144.097 C 492.299 136.147 491.292 125.625 490.565 120.715 L 489.242 111.787 L 483.323 118.267 C 480.067 121.832 477.404 125.618 477.404 126.681 C 477.404 127.744 476.603 128.613 475.624 128.613 C 474.645 128.613 471.275 132.321 468.135 136.852 L 462.426 145.091 L 431.038 145.091 L 399.65 145.091 L 386.811 128.494 C 379.749 119.365 373.509 112.36 372.943 112.926 C 372.377 113.491 371.57 118.875 371.15 124.888 C 370.73 130.902 368.94 147.744 367.172 162.315 C 365.405 176.887 363.523 195.424 362.99 203.509 C 360.283 244.622 352.784 266.044 335.323 282.544 C 326.456 290.923 312.488 297.497 303.508 297.518 C 294.864 297.539 278.732 290.063 269.473 281.748 C 246.952 261.521 238.846 229.614 245.481 187.314 C 247.894 171.928 266.562 131.612 275.927 121.56 C 277.987 119.348 279.673 116.786 279.673 115.867 C 279.673 114.947 279.905 113.593 280.188 112.856 C 281.28 110.017 271.977 110.837 261.136 114.536 L 261.135 114.535 "
/>
</g>
</svg>
</div>
</body>body {
margin: 0;
overflow: hidden;
background: rgba(155,250,10,1);
}
#yuri {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 100;
display: flex;
justify-content: flex-end;
align-content: center;
align-items: flex-end; \
pointer-events: none;
}
#yuri-path {
height: 50vh;
}
var transformSVGPathExposed;
function d3threeD(exports) {
const DEGS_TO_RADS = Math.PI / 180,
UNIT_SIZE = 1;
const DIGIT_0 = 48, DIGIT_9 = 57, COMMA = 44, SPACE = 32, PERIOD = 46,
MINUS = 45;
function transformSVGPath(pathStr) {
var paths = [];
var path = new THREE.Shape();
var idx = 1, len = pathStr.length, activeCmd,
x = 0, y = 0, nx = 0, ny = 0, firstX = null, firstY = null,
x1 = 0, x2 = 0, y1 = 0, y2 = 0,
rx = 0, ry = 0, xar = 0, laf = 0, sf = 0, cx, cy;
function eatNum() {
var sidx, c, isFloat = false, s;
// eat delims
while (idx < len) {
c = pathStr.charCodeAt(idx);
if (c !== COMMA && c !== SPACE)
break;
idx++;
}
if (c === MINUS)
sidx = idx++;
else
sidx = idx;
// eat number
while (idx < len) {
c = pathStr.charCodeAt(idx);
if (DIGIT_0 <= c && c <= DIGIT_9) {
idx++;
continue;
}
else if (c === PERIOD) {
idx++;
isFloat = true;
continue;
}
s = pathStr.substring(sidx, idx);
return isFloat ? parseFloat(s) : parseInt(s);
}
s = pathStr.substring(sidx);
return isFloat ? parseFloat(s) : parseInt(s);
}
function nextIsNum() {
var c;
// do permanently eat any delims...
while (idx < len) {
c = pathStr.charCodeAt(idx);
if (c !== COMMA && c !== SPACE)
break;
idx++;
}
c = pathStr.charCodeAt(idx);
return (c === MINUS || (DIGIT_0 <= c && c <= DIGIT_9));
}
var canRepeat;
var enteredSub = false;
var zSeen = false;
activeCmd = pathStr[0];
while (idx <= len) {
canRepeat = true;
switch (activeCmd) {
// moveto commands, become lineto's if repeated
case 'M':
enteredSub = false;
x = eatNum();
y = eatNum();
path.moveTo(x, y);
activeCmd = 'L';
break;
case 'm':
x += eatNum();
y += eatNum();
path.moveTo(x, y);
activeCmd = 'l';
break;
case 'Z':
case 'z':
// z is a special case. This ends a segment and starts
// a new path. Since the three.js path is continuous
// we should start a new path here. This also draws a
// line from the current location to the start location.
canRepeat = false;
if (x !== firstX || y !== firstY)
path.lineTo(firstX, firstY);
paths.push(path);
// reset the elements
firstX = null;
firstY = null;
// avoid x,y being set incorrectly
enteredSub = true;
path = new THREE.Shape();
zSeen = true;
break;
// - lines!
case 'L':
case 'H':
case 'V':
nx = (activeCmd === 'V') ? x : eatNum();
ny = (activeCmd === 'H') ? y : eatNum();
path.lineTo(nx, ny);
x = nx;
y = ny;
break;
case 'l':
case 'h':
case 'v':
nx = (activeCmd === 'v') ? x : (x + eatNum());
ny = (activeCmd === 'h') ? y : (y + eatNum());
path.lineTo(nx, ny);
x = nx;
y = ny;
break;
// - cubic bezier
case 'C':
x1 = eatNum(); y1 = eatNum();
case 'S':
if (activeCmd === 'S') {
x1 = 2 * x - x2; y1 = 2 * y - y2;
}
x2 = eatNum();
y2 = eatNum();
nx = eatNum();
ny = eatNum();
path.bezierCurveTo(x1, y1, x2, y2, nx, ny);
x = nx; y = ny;
break;
case 'c':
x1 = x + eatNum();
y1 = y + eatNum();
case 's':
if (activeCmd === 's') {
x1 = 2 * x - x2;
y1 = 2 * y - y2;
}
x2 = x + eatNum();
y2 = y + eatNum();
nx = x + eatNum();
ny = y + eatNum();
path.bezierCurveTo(x1, y1, x2, y2, nx, ny);
x = nx; y = ny;
break;
// - quadratic bezier
case 'Q':
x1 = eatNum(); y1 = eatNum();
case 'T':
if (activeCmd === 'T') {
x1 = 2 * x - x1;
y1 = 2 * y - y1;
}
nx = eatNum();
ny = eatNum();
path.quadraticCurveTo(x1, y1, nx, ny);
x = nx;
y = ny;
break;
case 'q':
x1 = x + eatNum();
y1 = y + eatNum();
case 't':
if (activeCmd === 't') {
x1 = 2 * x - x1;
y1 = 2 * y - y1;
}
nx = x + eatNum();
ny = y + eatNum();
path.quadraticCurveTo(x1, y1, nx, ny);
x = nx; y = ny;
break;
// - elliptical arc
case 'A':
rx = eatNum();
ry = eatNum();
xar = eatNum() * DEGS_TO_RADS;
laf = eatNum();
sf = eatNum();
nx = eatNum();
ny = eatNum();
if (rx !== ry) {
console.warn("Forcing elliptical arc to be a circular one :(",
rx, ry);
}
// SVG implementation notes does all the math for us! woo!
// http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
// step1, using x1 as x1'
x1 = Math.cos(xar) * (x - nx) / 2 + Math.sin(xar) * (y - ny) / 2;
y1 = -Math.sin(xar) * (x - nx) / 2 + Math.cos(xar) * (y - ny) / 2;
// step 2, using x2 as cx'
var norm = Math.sqrt(
(rx*rx * ry*ry - rx*rx * y1*y1 - ry*ry * x1*x1) /
(rx*rx * y1*y1 + ry*ry * x1*x1));
if (laf === sf)
norm = -norm;
x2 = norm * rx * y1 / ry;
y2 = norm * -ry * x1 / rx;
// step 3
cx = Math.cos(xar) * x2 - Math.sin(xar) * y2 + (x + nx) / 2;
cy = Math.sin(xar) * x2 + Math.cos(xar) * y2 + (y + ny) / 2;
var u = new THREE.Vector2(1, 0),
v = new THREE.Vector2((x1 - x2) / rx,
(y1 - y2) / ry);
var startAng = Math.acos(u.dot(v) / u.length() / v.length());
if (u.x * v.y - u.y * v.x < 0)
startAng = -startAng;
// we can reuse 'v' from start angle as our 'u' for delta angle
u.x = (-x1 - x2) / rx;
u.y = (-y1 - y2) / ry;
var deltaAng = Math.acos(v.dot(u) / v.length() / u.length());
// This normalization ends up making our curves fail to triangulate...
if (v.x * u.y - v.y * u.x < 0)
deltaAng = -deltaAng;
if (!sf && deltaAng > 0)
deltaAng -= Math.PI * 2;
if (sf && deltaAng < 0)
deltaAng += Math.PI * 2;
path.absarc(cx, cy, rx, startAng, startAng + deltaAng, sf);
x = nx;
y = ny;
break;
case ' ':
// if it's an empty space, just skip it, and see if we can find a real command
break;
default:
throw new Error("weird path command: " + activeCmd);
}
if (firstX === null && !enteredSub) {
firstX = x;
firstY = y;
}
// just reissue the command
if (canRepeat && nextIsNum())
continue;
activeCmd = pathStr[idx++];
}
if (zSeen) {
return paths;
} else {
paths.push(path);
return paths;
}
}
transformSVGPathExposed = transformSVGPath;
function applySVGTransform(obj, tstr) {
var idx = tstr.indexOf('('), len = tstr.length,
cmd = tstr.substring(0, idx++);
function eatNum() {
var sidx, c, isFloat = false, s;
// eat delims
while (idx < len) {
c = tstr.charCodeAt(idx);
if (c !== COMMA && c !== SPACE)
break;
idx++;
}
if (c === MINUS)
sidx = idx++;
else
sidx = idx;
// eat number
while (idx < len) {
c = tstr.charCodeAt(idx);
if (DIGIT_0 <= c && c <= DIGIT_9) {
idx++;
continue;
}
else if (c === PERIOD) {
idx++;
isFloat = true;
continue;
}
s = tstr.substring(sidx, idx);
return isFloat ? parseFloat(s) : parseInt(s);
}
s = tstr.substring(sidx);
return isFloat ? parseFloat(s) : parseInt(s);
}
switch (cmd) {
case 'translate':
obj.position.x = Math.floor(eatNum() * UNIT_SIZE);
obj.position.y = Math.floor(eatNum() * UNIT_SIZE);
break;
case 'scale':
obj.scale.x = Math.floor(eatNum() * UNIT_SIZE);
obj.scale.y = Math.floor(eatNum() * UNIT_SIZE);
break;
default:
console.warn("don't understand transform", tstr);
break;
}
}
applySVGTransformExposed = applySVGTransform;
function wrap_setAttribute(name, value) {
}
function wrap_setAttributeNS(namespace, name, value) {
}
var extrudeDefaults = {
amount: 20,
bevelEnabled: true,
material: 0,
extrudeMaterial: 0,
};
function commonSetAttribute(name, value) {
switch (name) {
case 'x':
this.position.x = Math.floor(value * UNIT_SIZE);
break;
case 'y':
this.position.y = Math.floor(value * UNIT_SIZE);
break;
case 'class':
this.clazz = value;
break;
case 'stroke':
case 'fill':
if (typeof(value) !== 'string')
value = value.toString();
this.material.color.setHex(parseInt(value.substring(1), 16));
break;
case 'transform':
applySVGTransform(this, value);
break;
case 'd':
var shape = transformSVGPath(value),
geom = shape.extrude(extrudeDefaults);
this.geometry = geom;
this.geometry.boundingSphere = {radius: 3 * UNIT_SIZE};
this.scale.set(UNIT_SIZE, UNIT_SIZE, UNIT_SIZE);
break;
default:
throw new Error("no setter for: " + name);
}
}
function commonSetAttributeNS(namespace, name, value) {
this.setAttribute(name, value);
}
function Group(parentThing) {
THREE.Object3D.call(this);
this.d3class = '';
parentThing.add(this);
};
Group.prototype = new THREE.Object3D();
Group.prototype.constructor = Group;
Group.prototype.d3tag = 'g';
Group.prototype.setAttribute = commonSetAttribute;
Group.prototype.setAttributeNS = commonSetAttributeNS;
function fabGroup() {
return new Group(this);
}
function Mesh(parentThing, tag, geometry, material) {
THREE.Mesh.call(this, geometry, material);
this.d3tag = tag;
this.d3class = '';
parentThing.add(this);
}
Mesh.prototype = new THREE.Mesh();
Mesh.prototype.constructor = Mesh;
Mesh.prototype.setAttribute = commonSetAttribute;
Mesh.prototype.setAttributeNS = commonSetAttributeNS;
const SPHERE_SEGS = 16, SPHERE_RINGS = 16,
DEFAULT_COLOR = 0xcc0000;
var sharedSphereGeom = null,
sharedCubeGeom = null;
function fabSphere() {
if (!sharedSphereGeom)
sharedSphereGeom = new THREE.SphereGeometry(
UNIT_SIZE / 2, SPHERE_SEGS, SPHERE_RINGS);
var material = new THREE.MeshLambertMaterial({
color: DEFAULT_COLOR,
});
return new Mesh(this, 'sphere', sharedSphereGeom, material);
}
function fabCube() {
if (!sharedCubeGeom)
sharedCubeGeom = new THREE.CubeGeometry(UNIT_SIZE, UNIT_SIZE, UNIT_SIZE);
var material = new THREE.MeshLambertMaterial({
color: DEFAULT_COLOR,
});
return new Mesh(this, 'cube', sharedCubeGeom, material);
}
function fabPath() {
// start with a cube that we will replace with the path once it gets created
if (!sharedCubeGeom)
sharedCubeGeom = new THREE.CubeGeometry(UNIT_SIZE, UNIT_SIZE, UNIT_SIZE);
var material = new THREE.MeshLambertMaterial({
color: DEFAULT_COLOR,
});
return new Mesh(this, 'path', sharedCubeGeom, material);
}
function Scene() {
THREE.Scene.call(this);
this.renderer = null;
this.camera = null;
this.controls = null;
this._d3_width = null;
this._d3_height = null;
}
Scene.prototype = new THREE.Scene();
Scene.prototype.constructor = Scene;
Scene.prototype._setBounds = function() {
this.renderer.setSize(this._d3_width, this._d3_height);
var aspect = this.camera.aspect;
this.camera.position.set(
this._d3_width * UNIT_SIZE / 2,
this._d3_height * UNIT_SIZE / 2,
Math.max(this._d3_width * UNIT_SIZE / Math.sqrt(2),
this._d3_height * UNIT_SIZE / Math.sqrt(2)));
this.controls.target.set(this.camera.position.x, this.camera.position.y, 0);
console.log("camera:", this.camera.position.x, this.camera.position.y,
this.camera.position.z);
//this.camera.position.z = 1000;
};
Scene.prototype.setAttribute = function(name, value) {
switch (name) {
case 'width':
this._d3_width = value;
if (this._d3_height)
this._setBounds();
break;
case 'height':
this._d3_height = value;
if (this._d3_width)
this._setBounds();
break;
}
};
function fabVis() {
var camera, scene, controls, renderer;
// - scene
scene = new Scene();
threeJsScene = scene;
// - camera
camera = scene.camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
1, 100000);
/*
camera = scene.camera = new THREE.OrthographicCamera(
window.innerWidth / -2, window.innerWidth / 2,
window.innerHeight / 2, window.innerHeight / -2,
1, 50000);
*/
scene.add(camera);
// - controls
// from misc_camera_trackball.html example
controls = scene.controls = new THREE.TrackballControls(camera);
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
controls.keys = [65, 83, 68];
controls.addEventListener('change', render);
// - light
/*
var pointLight = new THREE.PointLight(0xFFFFFF);
pointLight.position.set(10, 50, 130);
scene.add(pointLight);
*/
var spotlight = new THREE.SpotLight(0xffffff);
spotlight.position.set(-50000, 50000, 100000);
scene.add(spotlight);
var backlight = new THREE.SpotLight(0x888888);
backlight.position.set(50000, -50000, -100000);
scene.add(backlight);
/*
var ambientLight = new THREE.AmbientLight(0x888888);
scene.add(ambientLight);
*/
function helperPlanes(maxBound) {
var geom = new THREE.PlaneGeometry(maxBound, maxBound, 4, 4);
for (var i = 0; i < 4; i++) {
var color, cx, cy;
switch (i) {
case 0:
color = 0xff0000;
cx = maxBound / 2;
cy = maxBound / 2;
break;
case 1:
color = 0x00ff00;
cx = maxBound / 2;
cy = -maxBound / 2;
break;
case 2:
color = 0x0000ff;
cx = -maxBound / 2;
cy = -maxBound / 2;
break;
case 3:
color = 0xffff00;
cx = -maxBound / 2;
cy = maxBound / 2;
break;
}
var material = new THREE.MeshLambertMaterial({ color: color });
var mesh = new THREE.Mesh(geom, material);
mesh.position.set(cx, cy, -1);
scene.add(mesh);
}
}
//helperPlanes(UNIT_SIZE * 225);
// - renderer
renderer = scene.renderer = new THREE.WebGLRenderer({
// too slow...
//antialias: true,
});
this.appendChild( renderer.domElement );
// - stats
var stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 10;
this.appendChild( stats.domElement );
function animate() {
requestAnimationFrame(animate, renderer.domElement);
controls.update();
}
function render() {
renderer.render(scene, camera);
stats.update();
}
animate();
return scene;
};
}
var $d3g = {};
d3threeD($d3g);
$(function () {
var stats = initStats();
// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
// create a render and set the size
var webGLRenderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
webGLRenderer.setClearColor( 0x000000, 0 );
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
webGLRenderer.shadowMapEnabled = true;
var shape = createMesh(new THREE.ShapeGeometry(drawShape()));
// add the sphere to the scene
scene.add(shape);
// position and point the camera to the center of the scene
camera.position.x = 180;
camera.position.y = 180;
camera.position.z = 120;
camera.lookAt(new THREE.Vector3(60, -60, 0));
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position = new THREE.Vector3(-70, 70, 70);
spotLight.intensity = 1.7;
spotLight.target = shape;
scene.add(spotLight);
// add the output of the renderer to the html element
$("#WebGL-output").append(webGLRenderer.domElement);
// call the render function
var step = 0;
// setup the control gui
var controls = new function () {
this.amount = 0;
this.bevelThickness = 0;
this.bevelSize = 0;
this.bevelEnabled = false;
this.bevelSegments = 0;
this.bevelEnabled = true;
this.curveSegments = 12;
this.steps = 1;
this.asGeom = function () {
// remove the old plane
scene.remove(shape);
// create a new one
var options = {
amount: controls.amount,
bevelThickness: controls.bevelThickness,
bevelSize: controls.bevelSize,
bevelSegments: controls.bevelSegments,
bevelEnabled: controls.bevelEnabled,
curveSegments: controls.curveSegments,
steps: controls.steps
};
shape = createMesh(new THREE.ExtrudeGeometry(drawShape(), options));
// add it to the scene.
scene.add(shape);
};
}
var gui = new dat.GUI();
gui.add(controls, 'amount', 0, 20).onChange(controls.asGeom);
gui.add(controls, 'bevelThickness', 0, 10).onChange(controls.asGeom);
gui.add(controls, 'bevelSize', 0, 10).onChange(controls.asGeom);
gui.add(controls, 'bevelSegments', 0, 30).step(1).onChange(controls.asGeom);
gui.add(controls, 'bevelEnabled').onChange(controls.asGeom);
gui.add(controls, 'curveSegments', 1, 30).step(1).onChange(controls.asGeom);
gui.add(controls, 'steps', 1, 5).step(1).onChange(controls.asGeom);
controls.asGeom();
render();
function drawShape() {
var svgString = $("#path6").attr("d");
var shape = transformSVGPathExposed(svgString);
// return the shape
return shape;
}
function createMesh(geom) {
geom.applyMatrix(new THREE.Matrix4().makeTranslation(-500, 90, 0));
// assign two materials
// var meshMaterial = new THREE.MeshNormalMaterial({transparent:true, opacity:0.7});
var meshMaterial = new THREE.MeshPhongMaterial({specular: 0xffffff, color: 0xeeeeee, shininess: 10, metal: true});
// meshMaterial.side = THREE.DoubleSide;
// create a multimaterial
var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial]);
mesh.scale.x = 0.1;
mesh.scale.y = 0.1;
mesh.rotation.z = Math.PI;
mesh.rotation.x = -1.1;
return mesh;
}
function render() {
stats.update();
shape.rotation.y = step += 0.005;
// render using requestAnimationFrame
requestAnimationFrame(render);
webGLRenderer.render(scene, camera);
}
function initStats() {
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
$("#Stats-output").append(stats.domElement);
return stats;
}
});
External CSS
This Pen doesn't use any external CSS resources.