Three JS how to render the xyz axis over all the models inside a scene?

Question

Currently I want to render the axis over the cube (rather than through it). But I can't figure out a way to do that. Does any one know how to render the axis lines over the cube module? Thanks.

Have provided the JS code below. The cube will be rendered in scene and axis lines will be rendered in fscene. (The axis lines rendered in fscene is supposed to cover the cube which rendered in scene)

    var container, stats;

    var camera, scene, fscene, renderer;

    var cube, plane;

    function init() {

        container = document.createElement( 'div' );
        document.body.appendChild( container );

        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 999999 );
        camera.position.y = 5;
        camera.position.z = 5;
        camera.position.x = 4;
        camera.lookAt(new THREE.Vector3());

        scene = new THREE.Scene();
        fscene = new THREE.Scene();

        // Cube

        var geometry = new THREE.CubeGeometry( 1, 1, 1 );

        for ( var i = 0; i < geometry.faces.length; i ++ ) {

            geometry.faces[ i ].color.setHex( 0xcccccc * i );

        }

        var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors } );
        cube = new THREE.Mesh( geometry, material );
        scene.add(cube);

        addAxis();

        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.autoClear = false;
        renderer.setSize( window.innerWidth, window.innerHeight );

        container.appendChild( renderer.domElement );
        animate();
    }


    function animate() {

        requestAnimationFrame(animate);
        renderer.clear();
        renderer.render(scene, camera);

        renderer.render(fscene, camera);
    }

    function addAxis() {
        var sceneSize = 9000;
        line({ begin: [0, 0, 0], end: [sceneSize, 0, 0], color: 0xff0000, scene: scene });
        line({ begin: [0, 0, 0], end: [-sceneSize, 0, 0], color: 0xff0000, dashed: true, scene: scene });
        line({ begin: [0, 0, 0], end: [0, sceneSize, 0], color: 0x00ff00, scene: scene });
        line({ begin: [0, 0, 0], end: [0, -sceneSize, 0], color: 0x00ff00, dashed: true, scene: scene });
        line({ begin: [0, 0, 0], end: [0, 0, sceneSize], color: 0x0000ff, scene: scene });
        line({ begin: [0, 0, 0], end: [0, 0, -sceneSize], color: 0x0000ff, dashed: true, scene: scene });
    }

    function line(cfg){
        var p = cfg.begin;
        var q = cfg.end;
        if (cfg.color) {
            cfg.colorb = cfg.colorb || cfg.color;
            cfg.colore = cfg.colore || cfg.color;
        }
        var geometry = new THREE.Geometry();
        var material = cfg.dashed ? new THREE.LineDashedMaterial({ linewidth: 1, color: cfg.color, dashSize: 1, gapSize: 1, depthWrite:false }) : new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors, depthWrite:false });
        var cp = new THREE.Color(cfg.colorb);
        var cq = new THREE.Color(cfg.colore);

        geometry.vertices.push(new THREE.Vector3(p[0], p[1], p[2]));
        geometry.vertices.push(new THREE.Vector3(q[0], q[1], q[2]));
        geometry.colors.push(cp,cq);
        geometry.computeLineDistances();

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

Answer 1

TransformControls.js contains the code that might help you. depthTest should be set to false and transparent should be set to true.