Search code examples
three.jsdrawaxes

Draw 3D object axes threejs


How can i draw object axes. I am refering at the mesh local axes and not the world axes. I know that using:

function drawlines(){
            var material = new THREE.LineBasicMaterial({
                    color: 0x0000ff
                });

                var geometry = new THREE.Geometry();
                geometry.vertices.push(
                    new THREE.Vector3( 100, 0, 0 ),
                    new THREE.Vector3( 0, 0, 0 )
                );

                var line = new THREE.Line( geometry, material );
                scene.add( line );

                var material = new THREE.LineBasicMaterial({
                    color: 0x00ff00
                });

                var geometry = new THREE.Geometry();
                geometry.vertices.push(
                    new THREE.Vector3( 0, 100, 0 ),
                    new THREE.Vector3( 0, 0, 0 )
                );

                var line = new THREE.Line( geometry, material );
                scene.add( line );

                var material = new THREE.LineBasicMaterial({
                    color: 0xff0000
                });

                var geometry = new THREE.Geometry();
                geometry.vertices.push(
                    new THREE.Vector3( 0, 0, 100 ),
                    new THREE.Vector3( 0, 0, 0 )
                );

                var line = new THREE.Line( geometry, material );
                scene.add( line );
        }

draws lines at XYZ respectively. What i need is to draw the XYZ axis of the model. How can i do that. I load the model with this code

var loader = new THREE.JSONLoader();
            loader.load( "https://threejs.org/examples/models/animated/horse.js", function ( geometry ) {
                var material = new THREE.MeshLambertMaterial( {
                    vertexColors: THREE.FaceColors,
                    morphTargets: true,
                    overdraw: 0.5
                } );
                mesh = new THREE.Mesh( geometry, material );
                mesh.scale.set( 1.5, 1.5, 1.5 );
                scene.add( mesh );
                mixer = new THREE.AnimationMixer( mesh );
                var clip = THREE.AnimationClip.CreateFromMorphTargetSequence( 'gallop', geometry.morphTargets, 30 );
                mixer.clipAction( clip ).setDuration( 1 ).play();
            } );

Solution

  • If I get you correctly, you can use THREE.AxisHelper(). Just create an instance of it and then add it to your model.

    jsfiddle example.

    var camera, scene, renderer, controls;
    var sphere, cube;
    init();
    animate();
    
    function init() {
    
      scene = new THREE.Scene();
      camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
      camera.position.set(0, 5, 1.5).setLength(100);
    
      renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      //renderer.setClearColor(0xcccccc);
      document.body.appendChild(renderer.domElement);
     
      controls = new THREE.OrbitControls(camera, renderer.domElement);
    
      var plane = new THREE.GridHelper(100, 10);
      scene.add(plane);
        
      sphere = new THREE.Mesh(new THREE.SphereGeometry(10, 16, 8), new THREE.MeshBasicMaterial({color: "red", wireframe: true}));
      sphere.position.set(-20, 0, 0);
      cube = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshBasicMaterial({color: "green", wireframe: true}));
      cube.position.set(20, 0, 0);
      var worldAxis = new THREE.AxesHelper(20);
      scene.add(worldAxis);
      scene.add(sphere);
      scene.add(cube);
      
      var sphereAxis = new THREE.AxesHelper(20);
      sphere.add(sphereAxis);
      var cubeAxis = new THREE.AxesHelper(20);
      cube.add(cubeAxis);
    }
    
    var delta;
    function animate() {
      requestAnimationFrame(animate);
      render();
    }
    
    function render() {
      renderer.render(scene, camera);
    }
    

    enter image description here