@mlightcad/three-viewcube
Version:
A highly customizable standalone view cube addon for three.js
304 lines • 13.1 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __values = (this && this.__values) || function(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import * as THREE from 'three';
import { DEFAULT_FACENAMES } from './faceNames';
import { CORNER_FACES, createFaceMaterials, EDGE_FACES, EDGE_FACES_SIDE } from './viewCubeData';
/**
* View cube 3d object
*/
var ViewCube = /** @class */ (function (_super) {
__extends(ViewCube, _super);
/**
* Construct one instance of view cube 3d object
* @param cubeSize Size of area ocupied by view cube
* @param borderSize Border size of view cube
* @param isShowOutline Flag to decide whether to show edge of view cube
* @param faceColor Face color of view cube
* @param outlineColor Edge color of view cube
* @param faceNames Texts in each face of view cube
* @param fontSize Font size of the faceNames
*/
function ViewCube(cubeSize, borderSize, isShowOutline, faceColor, outlineColor, faceNames, fontSize) {
if (cubeSize === void 0) { cubeSize = 60; }
if (borderSize === void 0) { borderSize = 5; }
if (isShowOutline === void 0) { isShowOutline = true; }
if (faceColor === void 0) { faceColor = 0xcccccc; }
if (outlineColor === void 0) { outlineColor = 0x999999; }
if (faceNames === void 0) { faceNames = DEFAULT_FACENAMES; }
if (fontSize === void 0) { fontSize = 60; }
var _this = _super.call(this) || this;
_this._cubeSize = cubeSize;
_this._borderSize = borderSize;
_this._isShowOutline = isShowOutline;
_this._faceColor = faceColor;
_this._outlineColor = outlineColor;
_this._fontSize = fontSize;
_this.build(faceNames);
return _this;
}
/**
* Free the GPU-related resources allocated by this instance. Call this method whenever this instance
* is no longer used in your app.
*/
ViewCube.prototype.dispose = function () {
this.children.forEach(function (child) {
var _a, _b, _c, _d;
var mesh = child;
(_a = mesh.material) === null || _a === void 0 ? void 0 : _a.dispose();
(_c = (_b = mesh.material) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.dispose();
(_d = mesh.geometry) === null || _d === void 0 ? void 0 : _d.dispose();
});
};
ViewCube.prototype.build = function (faceNames) {
var e_1, _a, e_2, _b, e_3, _c, e_4, _d;
var faceSize = this._cubeSize - this._borderSize * 2;
var faceOffset = this._cubeSize / 2;
var borderSize = this._borderSize;
/* faces: front, right, back, left, top, bottom */
var cubeFaces = this.createCubeFaces(faceSize, faceOffset);
var faceMaterials = createFaceMaterials(faceNames, this._fontSize);
try {
for (var _e = __values(faceMaterials.entries()), _f = _e.next(); !_f.done; _f = _e.next()) {
var _g = __read(_f.value, 2), i = _g[0], props = _g[1];
var face = cubeFaces.children[i];
var material = face.material;
material.color.setHex(this._faceColor);
material.map = props.map;
face.name = props.name;
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
}
finally { if (e_1) throw e_1.error; }
}
this.add(cubeFaces);
/* corners: top, bottom */
var corners = [];
try {
for (var _h = __values(CORNER_FACES.entries()), _j = _h.next(); !_j.done; _j = _h.next()) {
var _k = __read(_j.value, 2), i = _k[0], props = _k[1];
var corner = this.createCornerFaces(borderSize, faceOffset, props.name, { color: this._faceColor });
corner.rotateOnAxis(new THREE.Vector3(0, 1, 0), THREE.MathUtils.degToRad((i % 4) * 90));
corners.push(corner);
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_j && !_j.done && (_b = _h.return)) _b.call(_h);
}
finally { if (e_2) throw e_2.error; }
}
var topCorners = new THREE.Group();
var bottomCorners = new THREE.Group();
this.add(topCorners.add.apply(topCorners, __spreadArray([], __read(corners.slice(0, 4)), false)));
this.add(bottomCorners
.add.apply(bottomCorners, __spreadArray([], __read(corners.slice(4)), false)).rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI));
/* edges: top + bottom */
var edges = [];
try {
for (var _l = __values(EDGE_FACES.entries()), _m = _l.next(); !_m.done; _m = _l.next()) {
var _o = __read(_m.value, 2), i = _o[0], props = _o[1];
var edge = this.createHorzEdgeFaces(faceSize, borderSize, faceOffset, props.name, { color: this._faceColor });
edge.rotateOnAxis(new THREE.Vector3(0, 1, 0), THREE.MathUtils.degToRad((i % 4) * 90));
edges.push(edge);
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (_m && !_m.done && (_c = _l.return)) _c.call(_l);
}
finally { if (e_3) throw e_3.error; }
}
var topEdges = new THREE.Group();
var bottomEdges = new THREE.Group();
this.add(topEdges.add.apply(topEdges, __spreadArray([], __read(edges.slice(0, 4)), false)));
this.add(bottomEdges
.add.apply(bottomEdges, __spreadArray([], __read(edges.slice(4)), false)).rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI));
/* edges on the side */
var sideEdges = new THREE.Group();
try {
for (var _p = __values(EDGE_FACES_SIDE.entries()), _q = _p.next(); !_q.done; _q = _p.next()) {
var _r = __read(_q.value, 2), i = _r[0], props = _r[1];
var edge = this.createVertEdgeFaces(borderSize, faceSize, faceOffset, props.name, { color: this._faceColor });
edge.rotateOnAxis(new THREE.Vector3(0, 1, 0), THREE.MathUtils.degToRad(i * 90));
sideEdges.add(edge);
}
}
catch (e_4_1) { e_4 = { error: e_4_1 }; }
finally {
try {
if (_q && !_q.done && (_d = _p.return)) _d.call(_p);
}
finally { if (e_4) throw e_4.error; }
}
this.add(sideEdges);
if (this._isShowOutline) {
this.add(this.createCubeOutline(this._cubeSize));
}
};
ViewCube.prototype.createFace = function (size, position, _a) {
var _b;
var _c = _a === void 0 ? {} : _a, _d = _c.axis, axis = _d === void 0 ? [0, 1, 0] : _d, _e = _c.angle, angle = _e === void 0 ? 0 : _e, _f = _c.name, name = _f === void 0 ? '' : _f, _g = _c.matProps, matProps = _g === void 0 ? {} : _g;
if (!Array.isArray(size))
size = [size, size];
var material = new THREE.MeshBasicMaterial(matProps);
var geometry = new THREE.PlaneGeometry(size[0], size[1]);
var face = new THREE.Mesh(geometry, material);
face.name = name;
face.rotateOnAxis(new ((_b = THREE.Vector3).bind.apply(_b, __spreadArray([void 0], __read(axis), false)))(), THREE.MathUtils.degToRad(angle));
face.position.set(position[0], position[1], position[2]);
return face;
};
ViewCube.prototype.createCubeFaces = function (faceSize, offset) {
var faces = new THREE.Object3D();
faces.add(this.createFace(faceSize, [0, 0, offset], { axis: [0, 1, 0], angle: 0 }));
faces.add(this.createFace(faceSize, [offset, 0, 0], { axis: [0, 1, 0], angle: 90 }));
faces.add(this.createFace(faceSize, [0, 0, -offset], {
axis: [0, 1, 0],
angle: 180
}));
faces.add(this.createFace(faceSize, [-offset, 0, 0], {
axis: [0, 1, 0],
angle: 270
}));
faces.add(this.createFace(faceSize, [0, offset, 0], {
axis: [1, 0, 0],
angle: -90
}));
faces.add(this.createFace(faceSize, [0, -offset, 0], {
axis: [1, 0, 0],
angle: 90
}));
return faces;
};
ViewCube.prototype.createCornerFaces = function (faceSize, offset, name, matProps) {
if (name === void 0) { name = ''; }
if (matProps === void 0) { matProps = {}; }
var corner = new THREE.Object3D();
var borderOffset = offset - faceSize / 2;
corner.add(this.createFace(faceSize, [borderOffset, borderOffset, offset], {
axis: [0, 1, 0],
angle: 0,
matProps: matProps,
name: name
}));
corner.add(this.createFace(faceSize, [offset, borderOffset, borderOffset], {
axis: [0, 1, 0],
angle: 90,
matProps: matProps,
name: name
}));
corner.add(this.createFace(faceSize, [borderOffset, offset, borderOffset], {
axis: [1, 0, 0],
angle: -90,
matProps: matProps,
name: name
}));
return corner;
};
ViewCube.prototype.createHorzEdgeFaces = function (w, h, offset, name, matProps) {
if (name === void 0) { name = ''; }
if (matProps === void 0) { matProps = {}; }
var edge = new THREE.Object3D();
var borderOffset = offset - h / 2;
edge.add(this.createFace([w, h], [0, borderOffset, offset], {
axis: [0, 1, 0],
angle: 0,
name: name,
matProps: matProps
}));
edge.add(this.createFace([w, h], [0, offset, borderOffset], {
axis: [1, 0, 0],
angle: -90,
name: name,
matProps: matProps
}));
return edge;
};
ViewCube.prototype.createVertEdgeFaces = function (w, h, offset, name, matProps) {
if (name === void 0) { name = ''; }
if (matProps === void 0) { matProps = {}; }
var edge = new THREE.Object3D();
var borderOffset = offset - w / 2;
edge.add(this.createFace([w, h], [borderOffset, 0, offset], {
axis: [0, 1, 0],
angle: 0,
name: name,
matProps: matProps
}));
edge.add(this.createFace([w, h], [offset, 0, borderOffset], {
axis: [0, 1, 0],
angle: 90,
name: name,
matProps: matProps
}));
return edge;
};
ViewCube.prototype.createCubeOutline = function (size) {
var geometry = new THREE.BoxGeometry(size, size, size);
var geo = new THREE.EdgesGeometry(geometry);
var mat = new THREE.LineBasicMaterial({
color: this._outlineColor,
linewidth: 1
});
var wireframe = new THREE.LineSegments(geo, mat);
return wireframe;
};
return ViewCube;
}(THREE.Object3D));
export { ViewCube };
//# sourceMappingURL=viewCube.js.map