1. 问题描述
使用three.meshline
包,实例化MeshLineMaterial
运行,控制台报错(three.js
1版本0.141.0
, three.meshline
版本1.4.0
),如下图所示:
three.module.js?6573:18994 THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false
Program Info Log: Vertex shader is not compiled.
ERROR: 0:148: 'isPerspectiveMatrix' : no matching overloaded function found
143: gl_Position = finalPosition;
144:
145: #ifdef USE_LOGDEPTHBUF
146: #ifdef USE_LOGDEPTHBUF_EXT
147: vFragDepth = 1.0 + gl_Position.w;
> 148: vIsPerspective = float( isPerspectiveMatrix( projectionMatrix ) );
149: #else
150: if ( isPerspectiveMatrix( projectionMatrix ) ) {
151: gl_Position.z = log2( max( EPSILON, gl_Position.w + 1.0 ) ) * logDepthBufFC - 1.0;
152: gl_Position.z *= gl_Position.w;
153: }
154: #endif
2. 解决思路
- 首先看报错信息:
Vertex shader
说明为顶点着色器,错误内容——isPerspectiveMatrix
没有找到匹配的重载函数。那么干脆给它加上一个匹配的重载函数呗。 - 浅浅打个日志,看下这个材质实例化后,对象的结构,和顶点着色器具体的内容。
console.log("meshLineMaterial", meshLineMaterial);
从对象中找到顶点着色器(vertexShader
)
- 由此可见,可以直接在
vertexShader
的前面加上isPerspectiveMatrix
的定义, 具体操作方式如下:
meshLineMaterial.vertexShader = `
bool isPerspectiveMatrix(mat4) {
return true;
}
` + meshLineMaterial.vertexShader;
- 再次运行后,控制台报错果然消失,可以正常运行。
3. 关键代码
以下是部分代码(主要是生成曲线和生成MeshLine的部分)。
// 要绘制的路径上的一些关键点,每3个一组
const pointArr = [
121.78093686863522, 0, -4.603376409073572,
121.81339509799925, 0, -1.0333897782644268,
88.18838269349277, 0, -1.0333897782644268,
88.18838269349277, 0, 63.55900780432629,
87.16531645200739, 0, 68.04794277498671,
83.06620769318347, 0, 70.98695971872945,
-1.130897005741467, 0, 70.34667258938468,
-5.231039038271652, 0, 68.42613876317515,
-7.758389327064392, 0, 64.62409029746112,
-7.758389327064392, 0, 46.44123345882236,
-114.62656106119152, 0, 46.44123345882236,
-119.82497669490243, 0, 44.45968445743292,
-121.94606515130032, 0, 39.4725534305143,
-121.94606515130032, 0, -42.76532835182727,
-120.11831411582477, 0, -48.53850237391983,
-116.83579669695663, 0, -49.908124030849784,
78.54313968215955, 0, -49.908124030849784,
85.10694214192533, 0, -50.16532666595109,
89.88557886450108, 0, -55.064547179368375,
89.88557886450108, 0, -93.93831946321087,
91.96632492268847, 0, -98.37744840781204,
95.1920071430169, 0, -100.1746448114269,
152.736779207395, 0, -100.1746448114269,
157.30932898344975, 0, -96.64823157224308,
160.4735065923067, 0, -99.846029526487,
302.4743190232127, 0, -99.846029526487,
307.28097694970387, 0, -98.29435216740127,
309.4249527931002, 0, -93.79194193938966,
317.1439029555364, 0, -10.678271186410282,
322.7256435681537, 0, 64.82345541146658,
321.948957384584, 0, 69.41475711676998,
269.58743740380316, 0, 71.05051147709406,
163.1264743368946, 0, 71.05051147709406,
159.53952961773413, 0, 68.13337162416227,
159.53952961773413, 0, -4.677615417615058,
124.42066238999215, 0, -4.677615417615058,
];
// 将上面的数组转换成坐标的数组
const points = [];
for (let i = 0; i < pointArr.length; i += 3) {
points.push(new Three.Vector3(pointArr[i], pointArr[i + 1], pointArr[i + 2]));
}
// 根据所有点,生成一条“不闭合”的曲线
const pathCurve = new Three.CatmullRomCurve3(points, false, 'catmullrom', 0);
// 根据曲线上的点,生成几何体getPoints的数量越大,几何体越平滑
const geometry = new Three.BufferGeometry().setFromPoints(pathCurve.getPoints(10000));
// 实例化MeshLine
const meshLine = new MeshLine();
meshLine.setGeometry(geometry);
// 纹理贴图
const arrow = await new Three.TextureLoader().loadAsync(require('@/assets/textures/golden-arrow.png'));
arrow.wrapS = Three.RepeatWrapping;
arrow.wrapT = Three.RepeatWrapping;
// 实例化MeshLine的专属材质
const meshLineMaterial = new MeshLineMaterial({
useMap: 1, // 使用贴图
map: arrow,
color: 0xff00ff, // 贴图叠加颜色
repeat: new Three.Vector2(500, 1), // 贴图重复数量
transparent: true,
lineWidth: 10,
dashArray: 0.01, // 一组虚线占总长度的比例
side: DoubleSide,
});
// 解决MeshLine材质顶点着色器报错
meshLineMaterial.vertexShader = `
bool isPerspectiveMatrix(mat4) {
return true;
}
` + meshLineMaterial.vertexShader;
// 实例化渲染出来的网格模型,注意几何体使用MeshLine的几何体
const pathToShow = new Three.Mesh(meshLine.geometry, meshLineMaterial);
// 场景的实例化此处不表
scene.add(pathToShow);