Three.js 2021 年使用 MeshLine 的线宽？

Question

我想在 Three.js 中画一条粗细大于 1 的曲线。经过一番挖掘，Three.MeshLine 曾经是答案。但是，我已经看到一些报告（并且可以从我自己的使用情况中确认），回购示例中给出的代码触发了“Class constructor cannot be invoked without 'new'”错误并终止了该行.

想知道是否有人找到了使 MeshLine 在 Three 的最新版本中起作用的方法。以下是当前版本的代码（最后一次提交是一年前）。除非我遗漏了一些东西，或者如果回购已经用完了 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);
}

Answer 1

项目 THREE.MeshLine 无法支持最新版本 (> r127)，因为它从 BufferGeometry 派生了 MeshLine class，如下所示：

THREE.BufferGeometry.call(this)

这不再是有效的 JS 语法，因为 BufferGeometry 现在是 ES6 class。这意味着 THREE.MeshLine 的维护者也必须将他们的代码移至 ES6。

Three.js 2021 年使用 MeshLine 的线宽？

Three.js Line Thickness using MeshLine in 2021?

javascript

three.js