I wished to draw a curved line in Three.js with a thickness greater than one . After some digging, Three.MeshLine used to be the answer. However, I've seen a few reports (and can confirm from my own usage) that the code given on the repo example triggers a "Class constructor cannot be invoked without 'new'" error and kills the line.
Curious if anybody has found a way to make MeshLine functional with recent versions of Three. Below is the code from the current release (last commit one year ago). Unless maybe I'm missing something or if the repo has kind of gone out the window.
var scene, camera, renderer, points, line;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, 640 / 480, 0.1, 1000);
renderer = new THREE.WebGLRenderer();
renderer.setSize(640, 480);
document.body.appendChild(renderer.domElement);
camera.position.z = 9;
points = [];
for (var i = -10; i < 10.1; i += 0.1) {
points.push([i, Math.sin(i), 0]);
}
line = new MeshLine();
line.setPoints(points.flat());
var material = new MeshLineMaterial({ color: new THREE.Color(0xffff00), lineWidth: 0.1, dashArray: 0.1, dashRatio: 0.2});
material.transparent = true;
mesh = new THREE.Mesh(line, material);
scene.add(mesh);
animate();
}
function animate() {
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
The project THREE.MeshLine can not support latest versions (> r127) because it derives the MeshLine class from BufferGeometry like so:
THREE.BufferGeometry.call(this)
This is no valid JS syntax anymore since BufferGeometry is now a ES6 class. That means the maintainers of THREE.MeshLine also have to move their code to ES6.