@mlightcad/three-viewcube/lib/viewCubeData.js

A highly customizable standalone view cube addon for three.js

import * as THREE from 'three';
import { DEFAULT_FACENAMES } from './faceNames';
function createTextTexture(text, props) {
    var fontface = props.font || 'Helvetica';
    var fontsize = props.fontSize || 30;
    var width = props.width || 200;
    var height = props.height || 200;
    var bgColor = props.bgColor
        ? props.bgColor.join(', ')
        : '255, 255, 255, 1.0';
    var fgColor = props.color ? props.color.join(', ') : '0, 0, 0, 1.0';
    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    var context = canvas.getContext('2d');
    if (context) {
        context.font = "bold ".concat(fontsize, "px ").concat(fontface);
        context.fillStyle = "rgba(".concat(bgColor, ")");
        context.fillRect(0, 0, width, height);
        // get size data (height depends only on font size)
        var metrics = context.measureText(text);
        var textWidth = metrics.width;
        // text color
        context.fillStyle = "rgba(".concat(fgColor, ")");
        context.fillText(text, width / 2 - textWidth / 2, height / 2 + fontsize / 2 - 2);
    }
    // canvas contents will be used for a texture
    var texture = new THREE.Texture(canvas);
    texture.minFilter = THREE.LinearFilter;
    texture.needsUpdate = true;
    return texture;
}
export function createTextSprite(text) {
    var texture = createTextTexture(text, {
        fontSize: 100,
        font: 'Arial Narrow, sans-serif',
        color: [255, 255, 255, 1],
        bgColor: [0, 0, 0, 0]
    });
    var material = new THREE.SpriteMaterial({ map: texture, transparent: true });
    return new THREE.Sprite(material);
}
export function createFaceMaterials(faceNames, fontSize) {
    if (faceNames === void 0) { faceNames = DEFAULT_FACENAMES; }
    if (fontSize === void 0) { fontSize = 60; }
    var materials = [
        {
            name: FACES.FRONT,
            map: createTextTexture(faceNames.front, {
                fontSize: fontSize,
                font: 'Arial Narrow, sans-serif'
            })
        },
        {
            name: FACES.RIGHT,
            map: createTextTexture(faceNames.right, {
                fontSize: fontSize,
                font: 'Arial Narrow, sans-serif'
            })
        },
        {
            name: FACES.BACK,
            map: createTextTexture(faceNames.back, {
                fontSize: fontSize,
                font: 'Arial Narrow, sans-serif'
            })
        },
        {
            name: FACES.LEFT,
            map: createTextTexture(faceNames.left, {
                fontSize: fontSize,
                font: 'Arial Narrow, sans-serif'
            })
        },
        {
            name: FACES.TOP,
            map: createTextTexture(faceNames.top, {
                fontSize: fontSize,
                font: 'Arial Narrow, sans-serif'
            })
        },
        {
            name: FACES.BOTTOM,
            map: createTextTexture(faceNames.bottom, {
                fontSize: fontSize,
                font: 'Arial Narrow, sans-serif'
            })
        }
    ];
    return materials;
}
export var FACES = {
    TOP: '1',
    FRONT: '2',
    RIGHT: '3',
    BACK: '4',
    LEFT: '5',
    BOTTOM: '6',
    TOP_FRONT_EDGE: '7',
    TOP_RIGHT_EDGE: '8',
    TOP_BACK_EDGE: '9',
    TOP_LEFT_EDGE: '10',
    FRONT_RIGHT_EDGE: '11',
    BACK_RIGHT_EDGE: '12',
    BACK_LEFT_EDGE: '13',
    FRONT_LEFT_EDGE: '14',
    BOTTOM_FRONT_EDGE: '15',
    BOTTOM_RIGHT_EDGE: '16',
    BOTTOM_BACK_EDGE: '17',
    BOTTOM_LEFT_EDGE: '18',
    TOP_FRONT_RIGHT_CORNER: '19',
    TOP_BACK_RIGHT_CORNER: '20',
    TOP_BACK_LEFT_CORNER: '21',
    TOP_FRONT_LEFT_CORNER: '22',
    BOTTOM_FRONT_RIGHT_CORNER: '23',
    BOTTOM_BACK_RIGHT_CORNER: '24',
    BOTTOM_BACK_LEFT_CORNER: '25',
    BOTTOM_FRONT_LEFT_CORNER: '26'
};
export var CORNER_FACES = [
    { name: FACES.TOP_FRONT_RIGHT_CORNER },
    { name: FACES.TOP_BACK_RIGHT_CORNER },
    { name: FACES.TOP_BACK_LEFT_CORNER },
    { name: FACES.TOP_FRONT_LEFT_CORNER },
    { name: FACES.BOTTOM_BACK_RIGHT_CORNER },
    { name: FACES.BOTTOM_FRONT_RIGHT_CORNER },
    { name: FACES.BOTTOM_FRONT_LEFT_CORNER },
    { name: FACES.BOTTOM_BACK_LEFT_CORNER }
];
export var EDGE_FACES = [
    { name: FACES.TOP_FRONT_EDGE },
    { name: FACES.TOP_RIGHT_EDGE },
    { name: FACES.TOP_BACK_EDGE },
    { name: FACES.TOP_LEFT_EDGE },
    // flip back and front bottom edges
    { name: FACES.BOTTOM_BACK_EDGE },
    { name: FACES.BOTTOM_RIGHT_EDGE },
    { name: FACES.BOTTOM_FRONT_EDGE },
    { name: FACES.BOTTOM_LEFT_EDGE }
];
export var EDGE_FACES_SIDE = [
    { name: FACES.FRONT_RIGHT_EDGE },
    { name: FACES.BACK_RIGHT_EDGE },
    { name: FACES.BACK_LEFT_EDGE },
    { name: FACES.FRONT_LEFT_EDGE }
];
//# sourceMappingURL=viewCubeData.js.map