Three js: Create a vertical ruler with measurements

user_2588884 0
Viewed 1408

I want to create a vertical ruler with measurements like the image below. can anyone help me with it.

var material = new THREE.LineBasicMaterial({
            color: 0x07E1E1,
            linewidth: 3
        });

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


        var line = new THREE.Line( geometry, material );
        scene.add( line );
        line.position.set(-550, -550, 200);

But it is not getting as the image and also the measurements…

three.js
1 Answers

You can use LineBasicMaterial and Line elements.

    var camera, scene, renderer, object;

    init();

    function init() {
        var container;
        container = document.getElementById( 'container' );
        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
        camera.target = new THREE.Vector3( 0, 0, 0 );
        scene = new THREE.Scene();

        object = new THREE.Object3D();
        var lineMtr = new THREE.LineBasicMaterial({ color: 0xffffff, linewidth: 3, opacity: 1 });
        var geo = new THREE.Geometry();
        geo.vertices.push(new THREE.Vector3(0, 10 ,3));
        geo.vertices.push(new THREE.Vector3(0, 0 ,3));
        var line = new THREE.Line(geo, lineMtr);
        var i = 0, l = 10;
        object.add(line);
        while (i <= l) {
            var geoSegm = new THREE.Geometry();
            geoSegm.vertices.push(new THREE.Vector3(0.1, i, 3));
            geoSegm.vertices.push(new THREE.Vector3(0, i, 3));
            var lineSegm = new THREE.Line(geoSegm, lineMtr);
                object.add(lineSegm);
            var textSprite = makeTextSprite((i * 10).toString(), {r: 255, g: 255, b: 255, a: 255}, new THREE.Vector3(0.2, i, 3), Math.PI);
            object.add(textSprite);
            i++;
        }
        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
    }

    function animate() {
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
    }

You can create a texture for a SpriteMaterial, then use Sprite for ruler texts.

    function makeTextSprite(label, fontColor, pos, rot) {
        var fontface = "Arial";
        var fontsize = 100;
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        context.font = "Bold " + fontsize.toString() + "px " + fontface;
        var metrics = context.measureText(label);
        context.rotate(-Math.PI);
        context.translate(-canvas.width, -canvas.height);
        context.fillStyle = "rgba(" + fontColor.r + "," + fontColor.g + "," + fontColor.b + "," + fontColor.a + ")";
        context.fillText(label, 0, 100);

        var texture = new THREE.Texture(canvas);
        texture.needsUpdate = true;
        texture.center = new THREE.Vector2(0.5, 0.5);
        texture.rotation = Math.PI;

        var spriteMaterial = new THREE.SpriteMaterial({
            map: texture, color: 0xffffff
        });
        var sprite = new THREE.Sprite(spriteMaterial);
        sprite.scale.set(0.25, 0.25, 0.25);
        sprite.position.set(pos.x, pos.y, pos.z);
        return sprite;
    }

I used codes in that link http://jsfiddle.net/3mrzL75h/19/ In first look you can't seeing ruler, drag camera to right.

user_72777100
Related