three.js 添加座標軸

class WebGLCoordinateAxis {
    constructor(renderer) {
        this.renderer = renderer;
        this.sceneAxis = new THREE.Scene();

        this.cameraAxis = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 20);
        this.cameraAxis.up.set(0, 0, 1);
        this.cameraAxis.position.set(0, 0, 10);
        this.cameraAxis.updateProjectionMatrix();

        this.group = new THREE.Group();

        this.viewport = new THREE.Vector4();

        this.oldClearColor = new THREE.Color();

        this.initFont = false;

        this.init();
    }

    init() {
        let axisX = new THREE.Mesh(new THREE.BoxBufferGeometry(0.5, 0.01, 0.01), new THREE.MeshBasicMaterial({ color: 0xff0000,depthTest: false}));
        axisX.translateX(0.25);
        let axisY = new THREE.Mesh(new THREE.BoxBufferGeometry(0.01, 0.5, 0.01), new THREE.MeshBasicMaterial({ color: 0x00ff00,depthTest: false }));
        axisY.translateY(0.25);
        let axisZ = new THREE.Mesh(new THREE.BoxBufferGeometry(0.01, 0.01, 0.5), new THREE.MeshBasicMaterial({ color: 0x0000ff,depthTest: false }));
        axisZ.translateZ(0.25);

        this.group.add(axisX);
        this.group.add(axisY);
        this.group.add(axisZ);

        this.group.matrixAutoUpdate = false;
        this.sceneAxis.add(this.group);
    }

    createText(text, size, color, position) {
        //創建geomemory
        let textGeo = new THREE.TextBufferGeometry(text, {
            font: this.font,
            size: size,
            height: 0.02,
            curveSegments: 4,

            bevelThickness: 0,
            bevelSize: 0,
            bevelEnabled: false
        });

        textGeo.computeBoundingBox();
        textGeo.computeVertexNormals();

        let material = new THREE.MeshBasicMaterial({ color: color, flatShading: true, depthTest: false });
        let textMesh = new THREE.Mesh(textGeo, material);
        textMesh.rotateX(Math.PI * 0.5);
        textMesh.position.copy(position);

        return textMesh;
    }

    update(camera) {

        let fontJson = ResourceManager.fontMap['font'];
        if (!this.initFont && fontJson != undefined) {
            this.font = new THREE.Font(fontJson);
            this.group.add(this.createText('X', 0.1, 0xff0000, new THREE.Vector3(0.5, 0, 0)));
            this.group.add(this.createText('Y', 0.1, 0x00ff00, new THREE.Vector3(0, 0.5, 0)));
            this.group.add(this.createText('Z', 0.1, 0x0000ff, new THREE.Vector3(0, 0, 0.5)));
            this.initFont = true;
        }


        this.oldClearColor.copy(this.renderer.getClearColor());
        let oldClearAlpha = this.renderer.getClearAlpha();
        let oldAutoClear = this.renderer.autoClear;
        this.renderer.autoClear = false;

        this.renderer.setClearColor(new THREE.Color(0, 0, 0), 0);

        this.renderer.getCurrentViewport(this.viewport);

        this.group.matrix.extractRotation(camera.matrixWorldInverse);
        this.renderer.setViewport(400, 0, 200, 200)
        this.renderer.render(this.sceneAxis, this.cameraAxis);

        this.renderer.setViewport(this.viewport.x, this.viewport.y, this.viewport.z, this.viewport.w);

        this.renderer.setClearColor(this.oldClearColor);
        this.renderer.setClearAlpha(oldClearAlpha);
        this.renderer.autoClear = oldAutoClear;
    }
}