Axis

by cristianrodriguezcanto

HTML

<style>
      #top-camera {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 150px;
        height: 150px;
      }
      
      body
      {
        overflow: hidden;
        margin:0;
        padding: 0;
      }
      
      .axisText{
        color : magenta;
        width : 2px;
        height : 2px;
        font-size : 1px;
        /*transform: rotateY(40deg);*/
      }


    </style>

    <body>
      <canvas id="top-camera"></canvas> 
    </body>

JavaScript

import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r119/build/three.module.js';

THREE.Object3D.DefaultUp.set(0, 0, 1)

import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r119/examples/jsm/controls/OrbitControls.js';

import { CSS2DRenderer, CSS2DObject } from "https://threejsfundamentals.org/threejs/resources/threejs/r119/examples/jsm/renderers/CSS2DRenderer.js";

import { CSS3DRenderer, CSS3DObject } from "https://threejsfundamentals.org/threejs/resources/threejs/r119/examples/jsm/renderers/CSS3DRenderer.js";

const scene = new THREE.Scene();
const canvasTop = document.getElementById("top-camera");
const camaraTop = new THREE.PerspectiveCamera(50, 1, 0.1, 600);
const dirLook = new THREE.Vector3(1,1,1)

//camaraTop.up = new THREE.Vector3(0,0,1)
camaraTop.position.addScaledVector(dirLook, 20);

//Top canvas
const rendererTop = new THREE.WebGLRenderer({
  //canvas: canvasTop
});
rendererTop.setSize(
  window.innerWidth, window.innerHeight
);

document.body.appendChild(rendererTop.domElement);

const controlsTop = new OrbitControls(
  camaraTop,
  rendererTop.domElement
);

const rendererArrows = new THREE.WebGLRenderer({canvas:canvasTop, antialias: true, alpha: true  });
rendererArrows.setSize(
  150,
  150
);
rendererArrows.setClearColor(0x000000, 0.1)
const cameraArrows = new THREE.OrthographicCamera( -5, 5, 5, -5, -4, 4);
cameraArrows.up = new THREE.Vector3(0,0,1)
const sceneArrows = new THREE.Scene();
var cameraArrowHelper = new THREE.CameraHelper(cameraArrows);
cameraArrowHelper.visible = true
scene.add(cameraArrowHelper);

const labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = "absolute";
labelRenderer.domElement.style.top = "0px";
labelRenderer.domElement.style.pointerEvents = "none";
document.body.appendChild(labelRenderer.domElement);

const labelRenderer2 = new...