Skip to content

Instantly share code, notes, and snippets.

@fernandojsg

fernandojsg/index.html

Created April 4, 2021 12:19
Show Gist options
  • Save fernandojsg/202406690b1e3478d46af2ac1bef9fd5 to your computer and use it in GitHub Desktop.
Save fernandojsg/202406690b1e3478d46af2ac1bef9fd5 to your computer and use it in GitHub Desktop.
Download ZIP
Spikeball three.js r5
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>WebGL NFT</title>
<meta
name="viewport"
content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
/>
<meta property="og:image" content="spikes.gif" />
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
touch-action: none;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas2d"></canvas>
</body>
<!-- Probably good to insert a license for your NFT if you wish to. e.g. a CC license. -->
<script>
var delta;
// three.js r5 - https://github.com/mrdoob/three.js
var THREE = THREE || {};
THREE.Color = function(c) {
var g, e, a, b, d;
this.styleString;
this.setHex = function(h) {
d = h;
this.updateRGBA();
this.updateStyleString()
}
;
this.setRGBA = function(l, k, h, j) {
g = l;
e = k;
a = h;
b = j;
this.updateHex();
this.updateStyleString()
}
;
this.updateHex = function() {
d = b << 24 | g << 16 | e << 8 | a
}
;
this.updateRGBA = function() {
g = d >> 16 & 255;
e = d >> 8 & 255;
a = d & 255;
b = d >> 24 & 255
}
;
this.updateStyleString = function() {
this.styleString = "rgba(" + g + "," + e + "," + a + "," + (b / 255) + ")"
}
;
this.toString = function() {
return "THREE.Color ( r: " + g + ", g: " + e + ", b: " + a + ", a: " + b + ", hex: " + d + ", style: " + this.styleString + " )"
}
;
this.setHex(c)
}
;
THREE.Vector2 = function(a, b) {
this.x = a || 0;
this.y = b || 0;
this.copy = function(c) {
this.x = c.x;
this.y = c.y
}
;
this.addSelf = function(c) {
this.x += c.x;
this.y += c.y
}
;
this.add = function(d, c) {
this.x = d.x + c.x;
this.y = d.y + c.y
}
;
this.subSelf = function(c) {
this.x -= c.x;
this.y -= c.y
}
;
this.sub = function(d, c) {
this.x = d.x - c.x;
this.y = d.y - c.y
}
;
this.multiply = function(c) {
this.x *= c;
this.y *= c
}
;
this.unit = function() {
this.multiply(1 / this.length())
}
;
this.expand = function(d, c) {
this.unit(this.sub(c, d));
c.addSelf(this)
}
;
this.length = function() {
return Math.sqrt(this.x * this.x + this.y * this.y)
}
;
this.lengthSq = function() {
return this.x * this.x + this.y * this.y
}
;
this.negate = function() {
this.x = -this.x;
this.y = -this.y
}
;
this.clone = function() {
return new THREE.Vector2(this.x,this.y)
}
;
this.toString = function() {
return "THREE.Vector2 (" + this.x + ", " + this.y + ")"
}
}
;
THREE.Vector3 = function(a, c, b) {
this.x = a || 0;
this.y = c || 0;
this.z = b || 0;
this.set = function(d, g, e) {
this.x = d;
this.y = g;
this.z = e
}
;
this.isZero = function() {
var d = 0.0001;
return ((Math.abs(this.x) < d) && (Math.abs(this.y) < d) && (Math.abs(this.z) < d))
}
;
this.mulComponents = function(d) {
this.x = this.x * d.x;
this.y = this.y * d.y;
this.z = this.z * d.z
}
;
this.addScalar = function(d) {
this.x += d;
this.y += d;
this.z += d
}
;
this.copy = function(d) {
this.x = d.x;
this.y = d.y;
this.z = d.z
}
;
this.add = function(e, d) {
this.x = e.x + d.x;
this.y = e.y + d.y;
this.z = e.z + d.z
}
;
this.addSelf = function(d) {
this.x += d.x;
this.y += d.y;
this.z += d.z
}
;
this.sub = function(e, d) {
this.x = e.x - d.x;
this.y = e.y - d.y;
this.z = e.z - d.z
}
;
this.subSelf = function(d) {
this.x -= d.x;
this.y -= d.y;
this.z -= d.z
}
;
this.cross = function(g) {
var e = this.x
, d = this.y
, h = this.z;
this.x = d * g.z - h * g.y;
this.y = h * g.x - e * g.z;
this.z = e * g.y - d * g.x
}
;
this.multiply = function(d) {
this.x *= d;
this.y *= d;
this.z *= d
}
;
this.distanceTo = function(h) {
var g = this.x - h.x
, e = this.y - h.y
, d = this.z - h.z;
return Math.sqrt(g * g + e * e + d * d)
}
;
this.distanceToSquared = function(h) {
var g = this.x - h.x
, e = this.y - h.y
, d = this.z - h.z;
return g * g + e * e + d * d
}
;
this.length = function() {
return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z)
}
;
this.lengthSq = function() {
return this.x * this.x + this.y * this.y + this.z * this.z
}
;
this.negate = function() {
this.x = -this.x;
this.y = -this.y;
this.z = -this.z
}
;
this.normalize = function() {
if (this.length() > 0) {
this.multiply(1 / this.length())
} else {
this.multiply(0)
}
}
;
this.dot = function(d) {
return this.x * d.x + this.y * d.y + this.z * d.z
}
;
this.clone = function() {
return new THREE.Vector3(this.x,this.y,this.z)
}
;
this.toString = function() {
return "THREE.Vector3 (" + this.x + ", " + this.y + ", " + this.z + ")"
}
}
;
THREE.Vector4 = function(a, d, c, b) {
this.x = a || 0;
this.y = d || 0;
this.z = c || 0;
this.w = b || 1;
this.copy = function(e) {
this.x = e.x;
this.y = e.y;
this.z = e.z;
this.w = e.w
}
;
this.add = function(g, e) {
this.x = g.x + e.x;
this.y = g.y + e.y;
this.z = g.z + e.z;
this.w = g.w + e.w
}
;
this.addSelf = function(e) {
this.x += e.x;
this.y += e.y;
this.z += e.z;
this.w += e.w
}
;
this.sub = function(g, e) {
this.x = g.x - e.x;
this.y = g.y - e.y;
this.z = g.z - e.z;
this.w = g.w - e.w
}
;
this.subSelf = function(e) {
this.x -= e.x;
this.y -= e.y;
this.z -= e.z;
this.w -= e.w
}
;
this.clone = function() {
return new THREE.Vector4(this.x,this.y,this.z,this.w)
}
;
this.toVector3 = function() {
return new THREE.Vector3(this.x / this.w,this.y / this.w,this.z / this.w)
}
;
this.toString = function() {
return "THREE.Vector4 (" + this.x + ", " + this.y + ", " + this.z + ", " + this.w + ")"
}
}
;
THREE.Matrix4 = function() {
var a, c, b;
a = new THREE.Vector3();
c = new THREE.Vector3();
b = new THREE.Vector3();
this.n11 = 1;
this.n12 = 0;
this.n13 = 0;
this.n14 = 0;
this.n21 = 0;
this.n22 = 1;
this.n23 = 0;
this.n24 = 0;
this.n31 = 0;
this.n32 = 0;
this.n33 = 1;
this.n34 = 0;
this.n41 = 0;
this.n42 = 0;
this.n43 = 0;
this.n44 = 1;
this.identity = function() {
this.n11 = 1;
this.n12 = 0;
this.n13 = 0;
this.n14 = 0;
this.n21 = 0;
this.n22 = 1;
this.n23 = 0;
this.n24 = 0;
this.n31 = 0;
this.n32 = 0;
this.n33 = 1;
this.n34 = 0;
this.n41 = 0;
this.n42 = 0;
this.n43 = 0;
this.n44 = 1
}
;
this.lookAt = function(g, e, d) {
b.sub(e, g);
b.normalize();
a.copy(b);
a.cross(d);
a.normalize();
c.copy(a);
c.cross(b);
c.normalize();
c.negate();
this.n11 = a.x;
this.n12 = a.y;
this.n13 = a.z;
this.n14 = -a.dot(g);
this.n21 = c.x;
this.n22 = c.y;
this.n23 = c.z;
this.n24 = -c.dot(g);
this.n31 = b.x;
this.n32 = b.y;
this.n33 = b.z;
this.n34 = -b.dot(g)
}
;
this.transform = function(d) {
var h = d.x
, g = d.y
, e = d.z
, j = (d.w ? d.w : 1);
d.x = this.n11 * h + this.n12 * g + this.n13 * e + this.n14 * j;
d.y = this.n21 * h + this.n22 * g + this.n23 * e + this.n24 * j;
d.z = this.n31 * h + this.n32 * g + this.n33 * e + this.n34 * j;
j = this.n41 * h + this.n42 * g + this.n43 * e + this.n44 * j;
if (d.w) {
d.w = j
} else {
d.x = d.x / j;
d.y = d.y / j;
d.z = d.z / j
}
}
;
this.crossVector = function(d) {
var e = new THREE.Vector4();
e.x = this.n11 * d.x + this.n12 * d.y + this.n13 * d.z + this.n14 * d.w;
e.y = this.n21 * d.x + this.n22 * d.y + this.n23 * d.z + this.n24 * d.w;
e.z = this.n31 * d.x + this.n32 * d.y + this.n33 * d.z + this.n34 * d.w;
e.w = (d.w) ? this.n41 * d.x + this.n42 * d.y + this.n43 * d.z + this.n44 * d.w : 1;
return e
}
;
this.multiply = function(e, d) {
this.n11 = e.n11 * d.n11 + e.n12 * d.n21 + e.n13 * d.n31 + e.n14 * d.n41;
this.n12 = e.n11 * d.n12 + e.n12 * d.n22 + e.n13 * d.n32 + e.n14 * d.n42;
this.n13 = e.n11 * d.n13 + e.n12 * d.n23 + e.n13 * d.n33 + e.n14 * d.n43;
this.n14 = e.n11 * d.n14 + e.n12 * d.n24 + e.n13 * d.n34 + e.n14 * d.n44;
this.n21 = e.n21 * d.n11 + e.n22 * d.n21 + e.n23 * d.n31 + e.n24 * d.n41;
this.n22 = e.n21 * d.n12 + e.n22 * d.n22 + e.n23 * d.n32 + e.n24 * d.n42;
this.n23 = e.n21 * d.n13 + e.n22 * d.n23 + e.n23 * d.n33 + e.n24 * d.n34;
this.n24 = e.n21 * d.n14 + e.n22 * d.n24 + e.n23 * d.n34 + e.n24 * d.n44;
this.n31 = e.n31 * d.n11 + e.n32 * d.n21 + e.n33 * d.n31 + e.n34 * d.n41;
this.n32 = e.n31 * d.n12 + e.n32 * d.n22 + e.n33 * d.n32 + e.n34 * d.n42;
this.n33 = e.n31 * d.n13 + e.n32 * d.n23 + e.n33 * d.n33 + e.n34 * d.n43;
this.n34 = e.n31 * d.n14 + e.n32 * d.n24 + e.n33 * d.n34 + e.n34 * d.n44;
this.n41 = e.n41 * d.n11 + e.n42 * d.n21 + e.n43 * d.n31 + e.n44 * d.n41;
this.n42 = e.n41 * d.n12 + e.n42 * d.n22 + e.n43 * d.n32 + e.n44 * d.n42;
this.n43 = e.n41 * d.n13 + e.n42 * d.n23 + e.n43 * d.n33 + e.n44 * d.n43;
this.n44 = e.n41 * d.n14 + e.n42 * d.n24 + e.n43 * d.n34 + e.n44 * d.n44
}
;
this.multiplySelf = function(g) {
var u = this.n11
, t = this.n12
, r = this.n13
, p = this.n14
, k = this.n21
, j = this.n22
, h = this.n23
, e = this.n24
, d = this.n31
, y = this.n32
, x = this.n33
, w = this.n34
, s = this.n41
, q = this.n42
, o = this.n43
, l = this.n44;
this.n11 = u * g.n11 + t * g.n21 + r * g.n31 + p * g.n41;
this.n12 = u * g.n12 + t * g.n22 + r * g.n32 + p * g.n42;
this.n13 = u * g.n13 + t * g.n23 + r * g.n33 + p * g.n43;
this.n14 = u * g.n14 + t * g.n24 + r * g.n34 + p * g.n44;
this.n21 = k * g.n11 + j * g.n21 + h * g.n31 + e * g.n41;
this.n22 = k * g.n12 + j * g.n22 + h * g.n32 + e * g.n42;
this.n23 = k * g.n13 + j * g.n23 + h * g.n33 + e * g.n43;
this.n24 = k * g.n14 + j * g.n24 + h * g.n34 + e * g.n44;
this.n31 = d * g.n11 + y * g.n21 + x * g.n31 + w * g.n41;
this.n32 = d * g.n12 + y * g.n22 + x * g.n32 + w * g.n42;
this.n33 = d * g.n13 + y * g.n23 + x * g.n33 + w * g.n43;
this.n34 = d * g.n14 + y * g.n24 + x * g.n34 + w * g.n44;
this.n41 = s * g.n11 + q * g.n21 + o * g.n31 + l * g.n41;
this.n42 = s * g.n12 + q * g.n22 + o * g.n32 + l * g.n42;
this.n43 = s * g.n13 + q * g.n23 + o * g.n33 + l * g.n43;
this.n44 = s * g.n14 + q * g.n24 + o * g.n34 + l * g.n44
}
;
this.clone = function() {
var d = new THREE.Matrix4();
d.n11 = this.n11;
d.n12 = this.n12;
d.n13 = this.n13;
d.n14 = this.n14;
d.n21 = this.n21;
d.n22 = this.n22;
d.n23 = this.n23;
d.n24 = this.n24;
d.n31 = this.n31;
d.n32 = this.n32;
d.n33 = this.n33;
d.n34 = this.n34;
d.n41 = this.n41;
d.n42 = this.n42;
d.n43 = this.n43;
d.n44 = this.n44;
return d
}
;
this.toString = function() {
return "| " + this.n11 + " " + this.n12 + " " + this.n13 + " " + this.n14 + " |\n| " + this.n21 + " " + this.n22 + " " + this.n23 + " " + this.n24 + " |\n| " + this.n31 + " " + this.n32 + " " + this.n33 + " " + this.n34 + " |\n| " + this.n41 + " " + this.n42 + " " + this.n43 + " " + this.n44 + " |"
}
}
;
THREE.Matrix4.translationMatrix = function(b, d, c) {
var a = new THREE.Matrix4();
a.n14 = b;
a.n24 = d;
a.n34 = c;
return a
}
;
THREE.Matrix4.scaleMatrix = function(b, d, c) {
var a = new THREE.Matrix4();
a.n11 = b;
a.n22 = d;
a.n33 = c;
return a
}
;
THREE.Matrix4.rotationXMatrix = function(b) {
var a = new THREE.Matrix4();
a.n22 = a.n33 = Math.cos(b);
a.n32 = Math.sin(b);
a.n23 = -a.n32;
return a
}
;
THREE.Matrix4.rotationYMatrix = function(b) {
var a = new THREE.Matrix4();
a.n11 = a.n33 = Math.cos(b);
a.n13 = Math.sin(b);
a.n31 = -a.n13;
return a
}
;
THREE.Matrix4.rotationZMatrix = function(b) {
var a = new THREE.Matrix4();
a.n11 = a.n22 = Math.cos(b);
a.n21 = Math.sin(b);
a.n12 = -a.n21;
return a
}
;
THREE.Matrix4.makeFrustum = function(g, u, e, r, k, j) {
var h = new THREE.Matrix4()
, t = 2 * k / (u - g)
, q = 2 * k / (r - e)
, s = (u + g) / (u - g)
, p = (r + e) / (r - e)
, o = -(j + k) / (j - k)
, l = -2 * j * k / (j - k);
h.n11 = t;
h.n13 = s;
h.n22 = q;
h.n23 = p;
h.n33 = o;
h.n34 = l;
h.n43 = -1;
h.n44 = 0;
return h
}
;
THREE.Matrix4.makePerspective = function(d, c, h, b) {
var a = h * Math.tan(d * 0.00872664625972)
, g = -a
, j = g * c
, e = a * c;
return THREE.Matrix4.makeFrustum(j, e, g, a, h, b)
}
;
THREE.Vertex = function(a, b) {
this.position = a || new THREE.Vector3();
this.normal = b || new THREE.Vector3();
this.screen = new THREE.Vector3();
this.visible = true;
this.toString = function() {
return "THREE.Vertex ( Pos: " + this.position + ", Normal: " + this.normal + " )"
}
}
;
THREE.Face3 = function(e, d, k, h, j, g) {
this.a = e;
this.b = d;
this.c = k;
this.normal = j || new THREE.Vector3();
this.screen = new THREE.Vector3();
this.uv = h || [[0, 0], [0, 0], [0, 0]];
this.color = g || new THREE.Color();
this.toString = function() {
return "THREE.Face3 ( " + this.a + ", " + this.b + ", " + this.c + " )"
}
}
;
THREE.Face4 = function(g, e, m, l, j, k, h) {
this.a = g;
this.b = e;
this.c = m;
this.d = l;
this.normal = k || new THREE.Vector3();
this.screen = new THREE.Vector3();
this.uv = j || [[0, 0], [0, 0], [0, 0], [0, 0]];
this.color = h || new THREE.Color();
this.toString = function() {
return "THREE.Face4 ( " + this.a + ", " + this.b + ", " + this.c + " " + this.d + " )"
}
}
;
THREE.Geometry = function() {
this.vertices = [];
this.faces = [];
this.computeNormals = function(k, j) {
for (v = 0; v < this.vertices.length; v++) {
this.vertices[v].normal.set(0, 0, 0)
}
for (f = 0; f < this.faces.length; f++) {
var e = this.vertices[this.faces[f].a].position;
var d = this.vertices[this.faces[f].b].position;
var c = this.vertices[this.faces[f].c].position;
var m = this.vertices[this.faces[f].d].position;
var g = new THREE.Vector3;
var l = new THREE.Vector3;
var h = new THREE.Vector3;
g.sub(c, d);
l.sub(e, d);
g.cross(l);
if (!g.isZero()) {
g.normalize()
}
this.faces[f].normal = g
}
}
}
;
THREE.Camera = function(a, c, b) {
this.position = new THREE.Vector3(a,c,b);
this.target = {
position: new THREE.Vector3(0,0,0)
};
this.matrix = new THREE.Matrix4();
this.projectionMatrix = THREE.Matrix4.makePerspective(45, 1, 0.001, 1000);
this.up = new THREE.Vector3(0,1,0);
this.roll = 0;
this.zoom = 3;
this.focus = 500;
this.updateMatrix = function() {
this.matrix.lookAt(this.position, this.target.position, this.up)
}
;
this.toString = function() {
return "THREE.Camera ( " + this.position + ", " + this.target.position + " )"
}
;
this.updateMatrix()
}
;
THREE.Object3D = function(a) {
this.position = new THREE.Vector3(0,0,0);
this.rotation = new THREE.Vector3(0,0,0);
this.scale = new THREE.Vector3(1,1,1);
this.matrix = new THREE.Matrix4();
this.screen = new THREE.Vector3(0,0,0);
this.material = a instanceof Array ? a : [a];
this.updateMatrix = function() {
this.matrix.identity();
this.matrix.multiplySelf(THREE.Matrix4.translationMatrix(this.position.x, this.position.y, this.position.z));
this.matrix.multiplySelf(THREE.Matrix4.rotationXMatrix(this.rotation.x));
this.matrix.multiplySelf(THREE.Matrix4.rotationYMatrix(this.rotation.y));
this.matrix.multiplySelf(THREE.Matrix4.rotationZMatrix(this.rotation.z));
this.matrix.multiplySelf(THREE.Matrix4.scaleMatrix(this.scale.x, this.scale.y, this.scale.z))
}
}
;
THREE.Line = function(b, a) {
THREE.Object3D.call(this, a);
this.geometry = b
}
;
THREE.Line.prototype = new THREE.Object3D();
THREE.Line.prototype.constructor = THREE.Line;
THREE.Mesh = function(b, a) {
THREE.Object3D.call(this, a);
this.geometry = b;
this.doubleSided = false
}
;
THREE.Mesh.prototype = new THREE.Object3D();
THREE.Mesh.prototype.constructor = THREE.Mesh;
var CubeExtrude = function(c, m, h) {
THREE.Geometry.call(this);
var p = this
, o = c / 2
, l = m / 2
, g = h / 2;
k(o, l, -g);
k(o, -l, -g);
k(-o, -l, -g);
k(-o, l, -g);
k(o, l, g);
k(o, -l, g);
k(-o, -l, g);
k(-o, l, g);
d(0, 1, 2, 3);
d(4, 7, 6, 5);
d(0, 4, 5, 1);
d(1, 5, 6, 2);
d(2, 6, 7, 3);
d(4, 0, 3, 7);
this.initialFaceCol = new THREE.Vector3(Math.floor(Math.random() * 255),this.g = Math.floor(Math.random() * 255),this.b = Math.floor(Math.random() * 255));
for (f = 0; f < 6; f++) {
p.faces[f].color.setRGBA(this.initialFaceCol.x, this.initialFaceCol.y, this.initialFaceCol.z, 255)
}
p.computeNormals();
var e = p.faces.length;
for (i = 0; i < e; i++) {
a(i, 10)
}
this.localInitialVerts = new Array();
for (k = 0; k < p.vertices.length; k++) {
this.localInitialVerts[k] = this.vertices[k].position.clone()
}
this.time = 0;
this.animate = function(x) {
var w = 0.2;
this.time += delta * 0.05;
for (k = 0; k < p.vertices.length; k++) {
var s = new THREE.Vector3;
s = p.localInitialVerts[k].clone();
var y = s.length();
var q = this.time - (y * w);
var u = THREE.Matrix4.rotationXMatrix(q * 0.05);
var t = THREE.Matrix4.rotationYMatrix(q * 0.02);
var r = THREE.Matrix4.rotationZMatrix(q * 0.06);
u.transform(s);
t.transform(s);
r.transform(s);
p.vertices[k].position = s
}
}
;
function a(F, A) {
var K = p.faces[F].normal;
var J = p.faces[F].a;
var I = p.faces[F].b;
var H = p.faces[F].c;
var G = p.faces[F].d;
var E = p.vertices[J].position;
var D = p.vertices[I].position;
var C = p.vertices[H].position;
var B = p.vertices[G].position;
var u = 8;
var s = 5;
var A = 30;
var L = new THREE.Vector3(0.9,0.9,0.9);
var q;
var r = p.initialFaceCol.clone();
for (n = 0; n < u; n++) {
E = E.clone();
D = D.clone();
C = C.clone();
B = B.clone();
var L = new THREE.Vector3(0.9,0.9,0.9);
E.mulComponents(L);
D.mulComponents(L);
C.mulComponents(L);
B.mulComponents(L);
var K = p.faces[F].normal.clone();
K.multiply(A * (n + 1));
var y = new THREE.Vector3();
var x = new THREE.Vector3();
var w = new THREE.Vector3();
var t = new THREE.Vector3();
y.copy(E);
y.addSelf(K);
b(y);
x.copy(D);
x.addSelf(K);
b(x);
w.copy(C);
w.addSelf(K);
b(w);
t.copy(B);
t.addSelf(K);
b(t);
q = p.vertices.length - 4;
var z = new THREE.Color;
r.addScalar(-10);
z.setRGBA(r.x, r.y, r.z, 255);
j(J, I, q + 1, q, z);
j(I, H, q + 2, q + 1, z);
j(H, G, q + 3, q + 2, z);
j(G, J, q, q + 3, z);
J = q;
I = q + 1;
H = q + 2;
G = q + 3
}
j(q, q + 1, q + 2, q + 3, z)
}
function b(q) {
p.vertices.push(new THREE.Vertex(q))
}
function k(q, s, r) {
p.vertices.push(new THREE.Vertex(new THREE.Vector3(q,s,r)))
}
function j(r, q, u, t, s) {
p.faces.push(new THREE.Face4(r,q,u,t,null,null,s))
}
function d(r, q, t, s) {
p.faces.push(new THREE.Face4(r,q,t,s))
}
};
CubeExtrude.prototype = new THREE.Geometry();
CubeExtrude.prototype.constructor = CubeExtrude;
THREE.Particle = function(a) {
THREE.Object3D.call(this, a);
this.size = 1
}
;
THREE.Particle.prototype = new THREE.Object3D();
THREE.Particle.prototype.constructor = THREE.Particle;
THREE.ColorFillMaterial = function(b, a) {
this.color = new THREE.Color((a ? (a * 255) << 24 : 4278190080) | b);
this.toString = function() {
return "THREE.ColorFillMaterial ( color: " + this.color + " )"
}
}
;
THREE.ColorStrokeMaterial = function(a, c, b) {
this.lineWidth = a || 1;
this.color = new THREE.Color((b ? (b * 255) << 24 : 4278190080) | c);
this.toString = function() {
return "THREE.ColorStrokeMaterial ( lineWidth: " + this.lineWidth + ", color: " + this.color + " )"
}
}
;
THREE.FaceColorFillMaterial = function() {
this.toString = function() {
return "THREE.FaceColorFillMaterial ( )"
}
}
;
THREE.FaceColorStrokeMaterial = function(a) {
this.lineWidth = a || 1;
this.toString = function() {
return "THREE.FaceColorStrokeMaterial ( lineWidth: " + this.lineWidth + " )"
}
}
;
THREE.Scene = function() {
this.objects = [];
this.add = function(a) {
this.objects.push(a)
}
;
this.toString = function() {
return "THREE.Scene ( " + this.objects + " )"
}
}
;
THREE.Renderer = function() {
var e = []
, c = []
, a = []
, b = new THREE.Matrix4();
this.renderList;
function d(h, g) {
return h.screenZ - g.screenZ
}
this.project = function(A, y) {
var u, s, z, p, B, m, l, k, h, r = 0, x = 0, t = 0, w = y.focus, q = y.focus * y.zoom, o = 0, g = 0;
this.renderList = [];
for (u = 0; u < A.objects.length; u++) {
B = A.objects[u];
if (B instanceof THREE.Mesh) {
b.multiply(y.matrix, B.matrix);
o = B.geometry.vertices.length;
for (s = 0; s < o; s++) {
z = B.geometry.vertices[s];
z.screen.copy(z.position);
b.transform(z.screen);
z.screen.z = q / (w + z.screen.z);
z.visible = z.screen.z > 0;
z.screen.x *= z.screen.z;
z.screen.y *= z.screen.z
}
g = B.geometry.faces.length;
for (s = 0; s < g; s++) {
p = B.geometry.faces[s];
if (p instanceof THREE.Face3) {
m = B.geometry.vertices[p.a];
l = B.geometry.vertices[p.b];
k = B.geometry.vertices[p.c];
if (m.visible && l.visible && k.visible && (B.doubleSided || (k.screen.x - m.screen.x) * (l.screen.y - m.screen.y) - (k.screen.y - m.screen.y) * (l.screen.x - m.screen.x) > 0)) {
p.screen.z = (m.screen.z + l.screen.z + k.screen.z) * 0.3;
if (e[r] == null) {
e[r] = new THREE.RenderableFace3()
}
e[r].v1.x = m.screen.x;
e[r].v1.y = m.screen.y;
e[r].v2.x = l.screen.x;
e[r].v2.y = l.screen.y;
e[r].v3.x = k.screen.x;
e[r].v3.y = k.screen.y;
e[r].screenZ = p.screen.z;
e[r].color = p.color;
e[r].material = B.material;
this.renderList.push(e[r]);
r++
}
} else {
if (p instanceof THREE.Face4) {
m = B.geometry.vertices[p.a];
l = B.geometry.vertices[p.b];
k = B.geometry.vertices[p.c];
h = B.geometry.vertices[p.d];
if (m.visible && l.visible && k.visible && h.visible && (B.doubleSided || ((h.screen.x - m.screen.x) * (l.screen.y - m.screen.y) - (h.screen.y - m.screen.y) * (l.screen.x - m.screen.x) > 0 || (l.screen.x - k.screen.x) * (h.screen.y - k.screen.y) - (l.screen.y - k.screen.y) * (h.screen.x - k.screen.x) > 0))) {
p.screen.z = (m.screen.z + l.screen.z + k.screen.z + h.screen.z) * 0.25;
if (c[x] == null) {
c[x] = new THREE.RenderableFace4()
}
c[x].v1.x = m.screen.x;
c[x].v1.y = m.screen.y;
c[x].v2.x = l.screen.x;
c[x].v2.y = l.screen.y;
c[x].v3.x = k.screen.x;
c[x].v3.y = k.screen.y;
c[x].v4.x = h.screen.x;
c[x].v4.y = h.screen.y;
c[x].screenZ = p.screen.z;
c[x].color = p.color;
c[x].material = B.material;
this.renderList.push(c[x]);
x++
}
}
}
}
} else {
if (B instanceof THREE.Particle) {
B.screen.copy(B.position);
y.matrix.transform(B.screen);
B.screen.z = q / (w + B.screen.z);
if (B.screen.z < 0) {
continue
}
B.screen.x *= B.screen.z;
B.screen.y *= B.screen.z;
if (a[t] == null) {
a[t] = new THREE.RenderableParticle()
}
a[t].x = B.screen.x;
a[t].y = B.screen.y;
a[t].screenZ = B.screen.z;
a[t].size = B.size;
a[t].material = B.material;
a[t].color = B.color;
this.renderList.push(a[t]);
t++
}
}
}
this.renderList.sort(d)
}
}
;
THREE.CanvasRenderer = function(a) {
THREE.Renderer.call(this);
b = a.getContext("2d");
this.setSize = function(d, c) {
a.width = d;
a.height = c;
b.setTransform(1, 0, 0, 1, d / 2, c / 2)
}
;
this.domElement = a;
this.render = function(g, k) {
var d, c, e, o = Math.PI * 2, h, l, m;
b.clearRect(-a.width / 2, -a.height / 2, a.width, a.height);
this.project(g, k);
h = this.renderList.length;
for (d = 0; d < h; d++) {
e = this.renderList[d];
m = e.material.length;
for (c = 0; c < m; c++) {
l = e.material[c];
b.beginPath();
if (e instanceof THREE.RenderableFace3) {
b.moveTo(e.v1.x, e.v1.y);
b.lineTo(e.v2.x, e.v2.y);
b.lineTo(e.v3.x, e.v3.y);
b.lineTo(e.v1.x, e.v1.y)
} else {
if (e instanceof THREE.RenderableFace4) {
b.moveTo(e.v1.x, e.v1.y);
b.lineTo(e.v2.x, e.v2.y);
b.lineTo(e.v3.x, e.v3.y);
b.lineTo(e.v4.x, e.v4.y);
b.lineTo(e.v1.x, e.v1.y)
} else {
if (e instanceof THREE.RenderableParticle) {
b.arc(e.x, e.y, e.size * e.screenZ, 0, o, true)
}
}
}
if (l instanceof THREE.ColorFillMaterial) {
b.fillStyle = l.color.styleString;
b.fill()
} else {
if (l instanceof THREE.FaceColorFillMaterial) {
b.fillStyle = e.color.styleString;
b.fill()
} else {
if (l instanceof THREE.ColorStrokeMaterial) {
b.lineWidth = l.lineWidth;
b.lineJoin = "round";
b.lineCap = "round";
b.strokeStyle = l.color.styleString;
b.stroke()
} else {
if (l instanceof THREE.FaceColorStrokeMaterial) {
b.lineWidth = l.lineWidth;
b.lineJoin = "round";
b.lineCap = "round";
b.strokeStyle = e.color.styleString;
b.stroke()
}
}
}
}
b.closePath()
}
}
}
}
;
THREE.CanvasRenderer.prototype = new THREE.Renderer();
THREE.CanvasRenderer.prototype.constructor = THREE.CanvasRenderer;
THREE.RenderableFace3 = function() {
this.v1 = new THREE.Vector2();
this.v2 = new THREE.Vector2();
this.v3 = new THREE.Vector2();
this.screenZ;
this.color;
this.material
}
;
THREE.RenderableFace4 = function() {
this.v1 = new THREE.Vector2();
this.v2 = new THREE.Vector2();
this.v3 = new THREE.Vector2();
this.v4 = new THREE.Vector2();
this.screenZ;
this.color;
this.material
}
;
THREE.RenderableParticle = function() {
this.x;
this.y;
this.screenZ;
this.color;
this.material
}
var SCREEN_WIDTH = window.innerWidth/2;
var SCREEN_HEIGHT = window.innerHeight/2;
var AMOUNT = 100;
var container;
//var stats;
var camera;
var scene;
var renderer;
var mesh;
var windowHalfX = window.innerWidth >> 1;
var windowHalfY = window.innerHeight >> 1;
init();
var lastTime = performance.now()
requestAnimationFrame(loop)
function init()
{
camera = new THREE.Camera(0, 0, 1800);
camera.focus = 300;
scene = new THREE.Scene();
cube = new CubeExtrude(20, 20, 20);
//mesh = new THREE.Mesh(cube, new THREE.ColorFillMaterial(Math.random() * 0xffffff));
/* mesh = new THREE.Mesh(cube, new THREE.FaceColorFillMaterial());*/
mesh = new THREE.Mesh(cube, [new THREE.FaceColorFillMaterial(), new THREE.ColorStrokeMaterial(1, 0x000000,0.5)]);
mesh.position.x = 0;
mesh.rotation.x = Math.random();
mesh.rotation.y = Math.random();
mesh.scale.x = mesh.scale.y = mesh.scale.z = 3;
mesh.updateMatrix();
scene.add(mesh);
const canvas = document.getElementById('canvas2d');
renderer = new THREE.CanvasRenderer(canvas);
renderer.setSize(canvas.width, canvas.height);
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
renderer.setSize(canvas.width, canvas.height);
}
resize();
window.addEventListener("resize", resize);
}
function loop()
{
var now = performance.now()
delta = now - lastTime
lastTime = now
camera.updateMatrix();
cube.animate();
mesh.updateMatrix();
renderer.render(scene, camera);
requestAnimationFrame(loop)
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment