123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128 |
- 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
-
- AXIS_COLOR_X = 0xff0000
- AXIS_COLOR_Y = 0x00ff00
- AXIS_COLOR_Z = 0x0000ff
- 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)
-
-
-
-
-
-
-
- let that = this
- const loader = new FontLoader();
- loader.load(
-
- `${publicPath}font.json`,
-
- function (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,
-
-
-
- });
- var meshX = new THREE.Mesh(geometryX, matX);
- meshX.rotation.y = -Math.PI / 2
-
-
- 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, 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.position.set(36, 0, 0);
- that.add(meshZ);
- },
-
- function (xhr) {
-
- },
-
- function (err) {
- console.log('An error happened');
- }
- );
- }
- }
|