Labelling the vertices in AxisHelper of THREE.js

javascript canvas three.js

10,610

Solution 1

Text geometry can be added as below:

var  textGeo = new THREE.TextGeometry('Y', {
     size: 5,
     height: 2,
     curveSegments: 6,
     font: "helvetiker",
     style: "normal"       
});

var  color = new THREE.Color();
color.setRGB(255, 250, 250);
var  textMaterial = new THREE.MeshBasicMaterial({ color: color });
var  text = new THREE.Mesh(textGeo , textMaterial);

text.position.x = axis.geometry.vertices[1].x;
text.position.y = axis.geometry.vertices[1].y;
text.position.z = axis.geometry.vertices[1].z;
text.rotation = camera.rotation;
scene.add(text);

You need to include helvetiker_regular.typeface.js font file before using TextGeometry as Three,js needs it for loading THREE.TextGeometry. You can add other labels just either by creating clones of mesh object or creating new text geometries and changing the xyz position as per vertices[3] and vertices[5] of axis helper.

Solution 2

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.

10,610

Author by

Priya_J

Updated on June 04, 2022

Comments

Priya_J almost 2 years

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

Peter Ehrlich about 10 years

typeface-0.15.js must be included before threejs, helvetiker_regular.typeface.js must be included after. This is because threejs monkeypatches the typeface loader. :-/
Russell Strauss over 4 years

Here is the solution that worked for me for adding text: stackoverflow.com/questions/35589984/textgeometry-in-three-j‌s