How to draw 2 axes x,y in threejs?

Questions
1

Hi everyone!
In threejs we have AxesHelper to draw 3 axes x,y,z. Now i want to draw 2 axes x,y , so in threejs is there any method to support this.
Thank your.

2

every time you see z, set it to 0

3 
import React, { Component } from 'react'
import { scryRenderedComponentsWithType } from 'react-dom/test-utils';
import * as THREE from 'three';
import { AmbientLight } from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
 
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);
const orbit = new OrbitControls(camera, renderer.domElement);
 
camera.position.set(0,6,6);
orbit.update();
 
const ambientLight = new THREE.AmbientLight(0x333333);
scene.add(ambientLight);
 
const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 0.8);
scene.add(directionalLight);
directionalLight.position.set(0,50,0);
 
const helper = new THREE.AxesHelper(5);
scene.add(helper);
 
function animate(){
    renderer.render(scene, camera);
}
 
renderer.setAnimationLoop(animate);
 
window.addEventListener('resize',function(){
    camera.aspect = window.innerWidth/ window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, this.window.innerHeight);
})

const gridHelper = new THREE.GridHelper();
scene.add(gridHelper);
export default class a extends Component {
  render() {
    return (
      <div>
       
      </div>
    )
  }
}

Here is my code, i use :

const helper = new THREE.AxesHelper(5);
scene.add(helper);

to draw 3 axes x,y,z, i dont see any z in this code, can you help me?

4

helper.scale.z = 1e-23;

1 Like