Develop Reference

Measure element while drawing using javascript

I am implementing draw/modify features using OpenLayer in ReactJS and came across a very interesting question.
How can I draw a line and at the same time see how long it is in the real world (considering zoom and scale of the map).
So for instance when I draw a line I would like to have an info like "real world length: x meters" where x is dynamically changing while extending the line.
Is it possible to achieve such a functionality using OpenLayers and ReactJS (or just pure JS)? Is there maybe a better solution? Maybe anyone saw something that works this way?
Thanks for help in advance.

The ol-ext/Overlay/Tooltips can do it for you.
See example online: https://viglino.github.io/ol-ext/examples/popup/map.tooltip.measure.html

Creating charts using d3.js and canvas together

I have been using D3.js library to create some basic graphs. I'm trying to create a bar graph with HTML5 canvas but finding it hard to create.I found some resources and this chart but I'm unable to understand how it's done.Can you guys suggest some resources/tutorials/books/blogs of D3.js with canvas so I can have a better idea how it's done.
Thanks!

My first thoughts reading this are that there may be a bit of a mismatch. There's no reason you shouldn't be able to use D3.js and canvas together, but I think you'll find it much easier working with SVG instead of canvas with D3, plus you get all sorts of benefits in terms of animation, CSS manipulation, and accessiblity.
If you do want to stick to canvas then use Chart.js instead of D3, it's designed to work with canvas and presents a much more gentle learning curve, being a more out-of-the-box solution.

For ThreeJS, 'm looking for a Helper class or utility that works like AxisHelper

In working with Three.js and I’ve run across several useful Helper classes that really make displaying and or modifying the scene much easier. There is one tool out there that I can’t seem to find again. It is kind of like the AxisHelper however it has a plane between the axis when you mouse over that area allowing the user to move the object along the xy, xz, or yz plane depending on what you pick. I’ve drawn an example of what it adds to the object in order to help the user move the object along the plane. If anyone knows of this tool or maybe an example of something that uses a utility like this, it would be great if you could point it out to me. Thanks.

I expect you are looking for TransformControls. There is a three.js example of its use here.
TransformControls is not part of the library -- it is part of the examples. You must include it explicitly in your project.
three.js r.80

Three.js collision detection optimization with raycasting

I'm just looking for someone to point me in the right direction. My Google-fu is failing me.
I'm working on a WebGL game, and I'm using raycasting for collision detection. I'm using Clara.io to create levels. I'm using THREE.ObjectLoader() to load the scenes. What I'd like to do is split the scenes I've made into smaller parts so as to not have to do raycasting on all vertices in the level. I'd like to not have to split the level mesh into tiny pieces inside of Clara for isolated raycasting, but instead do it within the game itself.
How do I go about only doing raycasting on a small section of a mesh? Is there a tutorial that anyone knows about or an example? I've chosen to not use heightmaps or any physics libraries.
Thank you in advance!

The problem of finding out which parts of mesh are relevant is usually solved using some sort of space partitioning algorithm. A relatively simple but effective approach for a static mesh is using an Octree.
A Three.js - specific implementation of an Octree (by Collin Hover) can be found here. You can either use it directly or take some inspiration from it to write your own.

Three.js - Points

When I create a point using Three.js it looks like a square. How can I make it look round? I saw in the documentation some blending factors but I did not quite understand how to use them on my points and I don't even know whether it is the right way to do it.

One trick I used is to create an SVG circle element, render it to a canvas with canvg, and render that canvas to a texture to use in a point cloud.
By applying gradients on the circle, I can give the illusion of shininess on a 3D sphere with a 2D circle.
There's too much code to post into an answer but I have a project over at Github you can look at, if interested, which demonstrates the idea. See: https://github.com/alexpreynolds/cubemaker and the associated demo at: http://alexpreynolds.github.io/cubemaker/
If you just want circles and no "shiny" effect, you could remove the gradients. Or draw a circle directly to a canvas element and skip SVG altogether.

Alex Reynolds' answer is correct. I add this one to give more details : as far as I know there are two ways to customize your points' look.
As the docs suggets, using textures (THREE.PointsMaterial({map:texture})):
The most intuitive is to use an image of yours :
var texture=THREE.ImageUtils.loadTexture('url-to-my-image');
You can also draw something in a canvas and use it as a texture. This includes raw drawing in the canvas, SVG importing as Alex Reynolds suggests, or any other technique. You can check his link and look for threejs examples. This is particularly used to render 2D text on sprites, you will find more examples with that.
var texture=THREE.Texture(canvas);
Check three.js examples for more details on using textures on Points
Using shaders :
If you know about shaders, you can write a small fragment shader that will result in the lightest and most precise of those solutions.