I was looking to create a curved line in Three.js with a thickness greater than one. After some research, I found that using Three.MeshLine seemed to be the solution. However, I have come across several reports (and experienced it myself) stating that the code provided in the repository example triggers a "Class constructor cannot be invoked without 'new'" error and disrupts the line.
I am curious if anyone has figured out a way to make MeshLine work with recent versions of Three. The code snippet below is from the latest release (last commit made a year ago). It's possible that I might be missing something or that the repository is no longer being maintained.
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);
}