Develop Reference

Openlayers trackline length (include altitude)

I using OpenLayers 4, and I want to get length at the LineString.
My code snippet:
var trackline = new ol.geom.LineString(points); //points an array with coordinates
var featurething = new ol.Feature({geometry: trackline});
var linestyle = new ol.style.Style({
stroke : new ol.style.Stroke({width: 4, color: 'rgba(0, 180, 220, 1)'})
});
featurething.setStyle(linestyle);
vectorSource.addFeature( featurething );
How get the trackline length, include altitude?
Thanks!

glowing object tin three.js

I am trying to create a textGeometry in three.js and for some reason it just isn't showing. Also i have looked at other three.js text examples and they just don't show after i use the same method. My code is below thanks.`
var loader = new THREE.FontLoader();
loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
var textGeo = new THREE.TextGeometry( "My Text", {
font: font,
size: 50,
height: 50,
curveSegments: 12,
bevelThickness: 2,
bevelSize: 5,
bevelEnabled: true
} );
textGeo.computerBoundingBox();
var centerOffset = -0.5 *(textGeo.boundingBox.max.x - textGeo.boundingBox.min.x)
var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000 } );
var mesh = new THREE.Mesh( textGeo, textMaterial );
mesh.position.set( centerOffset, 400, 0 );
var group = new THREE.Group();
group.add(mesh);
scene.add( group );
I do have ambient light for the whole scene. Other geometries are showing. Also textgeometry examples on the three.js websited don't work when I take the code and try using it.

three.js shape holes height

I'm trying to build a Mesh with holes from an original Shape and then an ExtrudedGeometry. The problem is that the holes I add always go trough the whole height of the resulting Mesh. Is there any way to make the holes shorter in height, so in the end these don't go across the whole shape?
Reference code for the shape to extruded:
var heartShape = new THREE.Shape();
heartShape.moveTo( 25, 25 );
heartShape.bezierCurveTo( 25, 25, 20, 0, 0, 0 );
blah
var innerCircle = new THREE.Path();
innerCircle.moveTo(blah);
heartShape.holes.push(innerCircle);
var extrudeSettings = { amount: 8, bevelEnabled: true, bevelSegments: 2, steps: 2, bevelSize: 1, bevelThickness: 1 };
var geometry = new THREE.ExtrudeGeometry( heartShape, extrudeSettings );
var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
Thanks!

There is no separate argument for hole depth in THREE.ExtrudeGeometry. You will need two separate operations to solve it.
One solution could be to "plug" it with another extrude based on your inner circle path (convert to Shape first).
var extrudeSettingsForPlug = { amount: 4, bevelEnabled: true, bevelSegments: 2, steps: 2, bevelSize: 1, bevelThickness: 1 };
var geometry = new THREE.ExtrudeGeometry( innerCircleShape, extrudeSettingsForPlug );

Implementing an eraser with paperjs

I've checked, similar questions have been asked, but have been left partially answered or not answered at all.
I need to build an eraser tool with PaperJS that will be able to erase existing paths, without erasing the image underneath.
So the image can reside on the first layer, and the paths on the second. See the accompanying JSFiddle: jsfiddle which shows two attempts:
paper.install(window);
var canvas = document.getElementById("myCanvas");
paper.setup(canvas);
//the yellow background (can also be background image) which should NOT be erased
var rect = new Rectangle(new Point(0, 0), new Point(paper.view.size.width, paper.view.size.height));
var rectPath = new Path.Rectangle(rect);
rectPath.fillColor = 'yellow';
//first attempt to erase the black line
var first = paper.project.activeLayer;
var second = new Layer();
var from = new Point(50, 0);
var to = new Point(50, 100);
var path1 = new Path.Line(from, to);
path1.strokeColor = 'black';
path1.strokeWidth = 40;
var from = new Point(0, 50);
var to = new Point(100, 50);
var path2 = new Path.Line(from, to);
path2.strokeColor = 'green'; //I've tried other colors as well, this seems irrelevant
path2.strokeWidth = 40;
path2.blendMode = 'destination-out';
//So I saw this
var path = new CompoundPath({
children: [
new Path.Circle({
center: new Point(200, 50),
radius: 30
}),
new Path.Circle({
center: new Point(200, 50),
radius: 10
})
],
fillColor: 'black',
selected: true
});
//second attempt
//I need to actually erase with one line through lots of paths, not sure how to implement it with this
var path = new CompoundPath({
children: [
new Path.Line({
from: [350, 0],
to: [350, 100],
strokeWidth: 30,
strokeColor: 'green' //irrelevant it seems
}),
new Path.Line({
from: [300, 50],
to: [400, 50],
strokeWidth: 30,
strokeColor: 'white' //irrelevant it seems
})
],
strokeColor: 'black',
selected: true,
strokeWidth: 20
});
paper.view.draw();
<script src="http://tmantechblog.com/testpaperjs/js/libs/paper.js"></script>
<canvas id="myCanvas" height='500' width='500'>This does not support HTML5 canvas</canvas>
The first attempt tries to use blendMode='destination-out' but it leaves a white mark rather than a transparent path
The second implementation tries to mimic the compoundPath example provided there, but where the paths cross, no hole is produced. Also, I'm unsure how this can be used to implement an eraser across multiple paths.
Any advice on how to proceed will be appreciated. Otherwise I'll have to port my whole project either to the basic HTML 5 canvas or FabricJS, or something similar.

Three.js 3D Text Bending

Is this still available in r69? In the process of 'rolling' my own, but before moving forward, want to make sure I have not overlooked any vital documentation or useful libraries...

Try to make through this example. Look at messages in the console.
<script src="js/modifiers/BendModifier.js"></script>
var text = "THREE.BendModifier";
var textGeometry = new THREE.TextGeometry(text, {
size: 128,
height: 50,
curveSegments: 4,
font: "gentilis",
weight: "bold",
style: "normal",
bevelEnabled: true,
bevelThickness: 2,
bevelSize: 1,
});
var textMaterial = new THREE.MeshPhongMaterial({
color: 0x62254a
});
var text3D = new THREE.Mesh(textGeometry, textMaterial);
var direction = new THREE.Vector3(0, 0, -1);
var axis = new THREE.Vector3(0, 1, 0);
var angle = Math.PI / 6;
var modifier = new THREE.BendModifier();
modifier.set(direction, axis, angle).modify( text3D.geometry );
textGeometry.computeBoundingBox();
var textWidth = textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x;
text3D.position.set(-0.5 * textWidth, 500, 0);
scene.add(text3D);

Just wanted to mention that you need to change BendModifier.js according to here https://stackoverflow.com/a/40492948/7132939
to make it work with newer versions of three.js
BendModifier.js uses THREE.Matrix3.getInverse() which is not working any more.
So you need to change the BendModifier.js to use THREE.Matrix4.getInverse(..) and one other change as mentioned in the answer linked.
And generating text has changed - using a THREE.fontLoader()
Complete working example can be found following this link
Screenshot of web site - link
And full answer of the internal link:
There was a change in THREE.js but it is quite easy to adjust the BendModifier.js script. Just change the lines
var InverseP = new THREE.Matrix3().getInverse( P );
and
newVertices[i] = new THREE.Vector3(); newVertices[i].copy( geometry.vertices[i] ).applyMatrix3( InverseP );
to Matrix4 in both cases - so they will read:
var InverseP = new THREE.Matrix4().getInverse( P );
and
newVertices[i] = new THREE.Vector3(); newVertices[i].copy( geometry.vertices[i] ).applyMatrix4( InverseP );
Just tried it with three.min.81.js and it works fine.