Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

242
Views
Three.js Line Thickness using MeshLine in 2021?

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);
}
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!