Take a look at the code snippet provided below:
<html>
<head>
<title>My first Three.js app</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"> </script>
<script>
var scene=new THREE.Scene();
var axis;
var camera = new THREE.PerspectiveCamera( 35, window.innerWidth/window.innerHeight, 0.1, 10000);
camera.position.z = 3;
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(document.body.clientWidth,document.body.clientHeight);
document.body.appendChild(renderer.domElement);
renderer.setClearColorHex(0xEEEEEE, 1.0);
renderer.clear();
var cube = new THREE.Mesh( new THREE.CubeGeometry(50,50,50),new THREE.MeshBasicMaterial({color: 0x000000}));
scene.add( cube );
function animate(t) {
camera.position.x = Math.sin(t/1000)*300;
camera.position.y = 150;
camera.position.z = Math.cos(t/1000)*300;
camera.lookAt(scene.position);
renderer.render(scene, camera);
renderer.shadowMapEnabled = true;
window.requestAnimationFrame(animate, renderer.domElement);// auto called - many advantages
};
animate(new Date().getTime());
axis = new THREE.AxisHelper(75);
scene.add(axis);
</script>
</body>
</html>
The provided code snippet generates x, y, z axes in the cube.
I am looking for guidance on how to add labels to these axes that rotate along with them.
Could you please provide a code example to customize the axis helper in THREE.js for creating labels?