How can I create an axis helper like the below image at the top left corner and in the middle. When I use axesHelper, the line doesnot have an arrow at the end and it is also thin. Below is the code I used.
// Create and add axis helpers
const axesHelper = new THREE.AxesHelper(10); // Adjust length as needed
scene.add(axesHelper);
The output is like below,
and I need the axis helper at the left corner as well. What I want is like the below image.
You can do this in a cleaner or less clean way. One suggestion would be to create two separate scenes for the main objects and another for the helper.
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/[email protected]/build/three.module.js",
"three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 10;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const g = new THREE.BoxGeometry(1, 1, 1);
const m = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const c = new THREE.Mesh(g, m);
scene.add(c);
const controls = new OrbitControls(camera, renderer.domElement);
const hudScene = new THREE.Scene();
const hudCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 10);
hudCamera.position.z = 5;
const axesHelper = new THREE.AxesHelper(0.5);
hudScene.add(axesHelper);
axesHelper.position.set(-1.3, 0.3, 0);
function updateHUD() {
hudCamera.left = -window.innerWidth / window.innerHeight;
hudCamera.right = window.innerWidth / window.innerHeight;
hudCamera.top = 1;
hudCamera.bottom = -1;
hudCamera.updateProjectionMatrix();
}
window.addEventListener("resize", () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
updateHUDPositionAndCamera();
});
updateHUD();
function a() {
requestAnimationFrame(a);
axesHelper.quaternion.copy(camera.quaternion);
renderer.autoClear = true;
renderer.render(scene, camera);
renderer.autoClear = false;
renderer.clearDepth();
renderer.render(hudScene, hudCamera);
}
a();
</script>
