drawCoordinate.js 2.42 KB
import { Color, ArrowHelper, Object3D, Vector3 } from 'three';
import { drawTextSprite } from './drawTextSprite';

const drawSprite = (originPoint, lineLength) => {
    const backColor = new Color(0xffffff);

    const xtColor = new Color(0xe2141f);
    const ytColor = new Color(0x1eab54);
    const ztColor = new Color(0x03229f);

    const fontsize = 80;
    const backgroundColor = { r: backColor.r * 255, g: backColor.g * 255, b: backColor.b * 255, a: 0.0 };

    const xColor = { r: xtColor.r * 255, g: xtColor.g * 255, b: xtColor.b * 255, a: 1.0 };
    const yColor = { r: ytColor.r * 255, g: ytColor.g * 255, b: ytColor.b * 255, a: 1.0 };
    const zColor = { r: ztColor.r * 255, g: ztColor.g * 255, b: ztColor.b * 255, a: 1.0 };

    const xMaterial = {
        fontsize,
        backgroundColor,
        textColor: xColor,
        yOffset: 20
    };
    const yMaterial = {
        fontsize,
        backgroundColor,
        textColor: yColor,
        yOffset: 20
    };
    const zMaterial = {
        fontsize,
        backgroundColor,
        textColor: zColor,
        yOffset: 20
    };

    const xSprite = drawTextSprite('X', xMaterial);
    const ySprite = drawTextSprite('Y', yMaterial);
    const zSprite = drawTextSprite('Z', zMaterial);

    const scale = 3;
    xSprite.scale.multiplyScalar(scale);
    ySprite.scale.multiplyScalar(scale);
    zSprite.scale.multiplyScalar(scale);

    const xp = originPoint.clone().add(new Vector3(lineLength, 0, 0));
    const yp = originPoint.clone().add(new Vector3(0, lineLength, 0));
    const zp = originPoint.clone().add(new Vector3(0, 0, lineLength));

    xSprite.position.copy(xp);
    ySprite.position.copy(yp);
    zSprite.position.copy(zp);

    const sprites = new Object3D();
    sprites.add(xSprite).add(ySprite).add(zSprite);

    return sprites;
};

export const drawArrowHelper = () => {
    const value = 0;
    const length = 30;
    const x = new Vector3(1, 0, 0);
    const y = new Vector3(0, 1, 0);
    const z = new Vector3(0, 0, 1);
    const position = new Vector3(value, value, value);

    const xmesh = new ArrowHelper(x, position, length, 0xcc4939, 6, 6);
    const ymesh = new ArrowHelper(y, position, length, 0x1eab54, 6, 6);
    const zmesh = new ArrowHelper(z, position, length, 0x03229f, 6, 6);

    const coordianteText = drawSprite(position, length + 1);

    const arrows = new Object3D();
    arrows.add(xmesh).add(ymesh).add(zmesh).add(coordianteText);

    return arrows;
};