Three js: Create a vertical ruler with measurements - three.js

Question

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…

Answer 1

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.