Menu
Consider the code 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 above code creates x,y,z axis in the cube.
Kindly help me to label the axis.
The Labelled text must rotate along with the axis.
I need a sample code to customize the axis helper(to create labels) in THREE.js
316
FWIW, there seems to be a pattern in three.js (and blender, for that matter), where the x, y, z axis are red, green, and blue, respectively (i.e., RGB), so if you can match RGB with XYZ, it can aid in determining which axis is which.
180
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
