2021年Three.js使用MeshLine设置线宽遇类构造函数报错如何解决？

错误根因 #

你遇到的Class constructor cannot be invoked without 'new'错误来自两个核心原因：

• 原仓库的最新重构版本已将MeshLine、MeshLineMaterial改为ES6 Class实现，旧的非标准调用方式会触发该报错
• 原仓库最近一次提交已经是一年前，没有适配r130之后的Three.js版本迭代，处于停止维护状态，旧示例代码本身也存在API不匹配的问题

适配高版本Three.js的修复步骤 #

1. 修正引入方式 #

如果是通过npm安装three.meshline包，必须使用ES模块导入语法：

import { MeshLine, MeshLineMaterial } from 'three.meshline';

如果是页面直接引入编译后的UMD包，需要通过THREE命名空间下的挂载对象调用：new THREE.MeshLine()、new THREE.MeshLineMaterial()，不能直接调用全局变量。

2. 修正API传参 #

原示例中setPoints方法的参数要求为Float32Array类型，不能直接传入普通数组，对应代码修改为：

line.setPoints(new Float32Array(points.flat()));

同时你提供的示例代码未声明mesh变量，需要提前补充变量声明避免隐式全局变量报错。

3. 高版本Three.js额外适配 #

如果你使用r150以上的Three.js版本，需要在MeshLineMaterial配置中补充着色器适配逻辑：

const material = new MeshLineMaterial({
  color: new THREE.Color(0xffff00),
  lineWidth: 0.1,
  dashArray: 0.1,
  dashRatio: 0.2,
  transparent: true,
  onBeforeCompile: shader => {
    shader.vertexShader = shader.vertexShader.replace(
      '#include <projection_vertex>',
      'gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );'
    );
  }
});

按照以上步骤修改后即可正常渲染宽线条，不需要替换其他实现方案。

内容的提问来源于stack exchange，提问作者Nathan Nye