simulation-front/src/views/modelLibrary/common/coordinateAxes.js

import * as THREE from 'three'
import {
    FontLoader
} from "three/examples/jsm/loaders/FontLoader.js"
import {
    TextGeometry
} from "three/examples/jsm/geometries/TextGeometry.js"

let publicPath = process.env.BASE_URL

export default class CoordinateAxes extends THREE.Object3D {
    name = 'COORDINATE_AXES'
    AXIS_LENGTH = 150
    // follows right-hand coordinate system
    AXIS_COLOR_X = 0xff0000 // red
    AXIS_COLOR_Y = 0x00ff00 // green
    AXIS_COLOR_Z = 0x0000ff // blue

    constructor() {
        super()

        const origin = new THREE.Vector3(0, 0, 0)
        const axisX = new THREE.Vector3(1, 0, 0)
        const axisY = new THREE.Vector3(0, 1, 0)
        const axisZ = new THREE.Vector3(0, 0, 1)

        const arrowX = new THREE.ArrowHelper(axisX, origin, this.AXIS_LENGTH, this.AXIS_COLOR_X, this.AXIS_LENGTH / 5, this.AXIS_LENGTH / 10)
        const arrowY = new THREE.ArrowHelper(axisY, origin, this.AXIS_LENGTH, this.AXIS_COLOR_Y, this.AXIS_LENGTH / 5, this.AXIS_LENGTH / 10)
        const arrowZ = new THREE.ArrowHelper(axisZ, origin, this.AXIS_LENGTH, this.AXIS_COLOR_Z, this.AXIS_LENGTH / 5, this.AXIS_LENGTH / 10)
        this.add(arrowX, arrowY, arrowZ)

        // an additional box at the origin
        // const sphere = new THREE.SphereGeometry(this.AXIS_LENGTH / 20)
        // const object = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({
        //     color: 0xffff00
        // }))
        // const box = new THREE.BoxHelper(object, 0xffff00)
        // this.add(box)

        let that = this

        const loader = new FontLoader();
        loader.load(
            // 资源URL
            `${publicPath}font.json`,
            // onLoad回调
            function (font) {
                // do something with the font
                // console.log(font);
                const geometryX = new TextGeometry('X', {
                    font: font,
                    size: 40, // 字体大小
                    height: 2, // 字体深度
                    curveSegments: 12, // 曲线控制点数
                    bevelEnabled: true, // 斜角
                    bevelThickness: 0.1, // 斜角的深度
                    bevelSize: 1, // 斜角的大小
                    bevelSegments: 1 // 斜角段数
                });

                var matX = new THREE.MeshBasicMaterial({
                    color: 0x0000ff,
                    // opacity: 0.6,
                    // shininess: 1,
                    // transparent: true,
                });
                var meshX = new THREE.Mesh(geometryX, matX);
                meshX.rotation.y = -Math.PI / 2
                // meshX.rotation.z = Math.PI / 10
                // meshX.position.set(0, 0, 160);
                meshX.position.set(0, 0, 36);
                that.add(meshX);

                const geometryY = new TextGeometry('Z', {
                    font: font,
                    size: 34, // 字体大小
                    height: 2, // 字体深度
                    curveSegments: 12, // 曲线控制点数
                    bevelEnabled: true, // 斜角
                    bevelThickness: 0.1, // 斜角的深度
                    bevelSize: 1, // 斜角的大小
                    bevelSegments: 1 // 斜角段数
                });

                var matY = new THREE.MeshBasicMaterial({
                    color: 0x00ff00,
                });
                var meshY = new THREE.Mesh(geometryY, matY);
                meshY.rotation.y = Math.PI / 4.5
                // meshY.position.set(0, 160, 0);
                meshY.position.set(0, 36, 0);
                that.add(meshY);

                const geometryZ = new TextGeometry('Y', {
                    font: font,
                    size: 40, // 字体大小
                    height: 2, // 字体深度
                    curveSegments: 12, // 曲线控制点数
                    bevelEnabled: true, // 斜角
                    bevelThickness: 0.1, // 斜角的深度
                    bevelSize: 1, // 斜角的大小
                    bevelSegments: 1 // 斜角段数
                });

                var matZ = new THREE.MeshBasicMaterial({
                    color: 0xff0000,
                });
                var meshZ = new THREE.Mesh(geometryZ, matZ);
                // meshZ.rotation.y = Math.PI / 5
                // meshZ.rotation.x = -Math.PI / 6
                // meshZ.rotation.z = Math.PI / 6
                // meshZ.position.set(160, 0, 0);
                meshZ.position.set(36, 0, 0);
                that.add(meshZ);
            },

            // onProgress回调
            function (xhr) {
                // console.log((xhr.loaded / xhr.total * 100) + '% loaded');
            },

            // onError回调
            function (err) {
                console.log('An error happened');
            }
        );
    }
}