three.js ：禁用一个轴上的透视图

Question

我想要一个不现实的特殊效果。

当我渲染网格时，我不希望渲染在 Y 轴上受到影响。这意味着对于特定列，视角必须相同。所以透视只受（x，z）位置的影响。

你觉得有可能吗？

Answer 1

我在 POC 中快速完成的一个小技巧是在 three.js 中更改一行。

我替换了这一行：

var project_vertex = `"vec4 mvPosition = modelViewMatrix * vec4( transformed, 1.0 );\ngl_Position = (projectionMatrix * mvPosition);";`

作者：

var project_vertex = "vec4 mvPosition = modelViewMatrix * vec4( transformed, 1.0 );\ngl_Position = (projectionMatrix * mvPosition);\ngl_Position.y = gl_Position.y*gl_Position.w;";

这个答案How to draw ortho axes for object in perspective projection using modern OpenGL?，它解释了将坐标乘以最后一个组件 w 会删除透视图，这对我有帮助。

现在我必须找到一种正确的方法来完成与three.js 正确集成并且适用于我们想要禁用透视的任何轴。

更新

一种无需修改 three.js 的方法：

//As stated here : https://stackoverflow.com/questions/49918798/how-to-draw-ortho-axes-for-object-in-perspective-projection-using-modern-opengl
// In order to remove the perspective in one axis, you have to muliply by the 4th component of gl_position (w)
var project_vertex_custom = "vec4 mvPosition = modelViewMatrix * vec4( transformed, 1.0 );\ngl_Position = (projectionMatrix * mvPosition);"
if (disablePerspectiveAxis.indexOf("x") >= 0)
    project_vertex_custom += "\ngl_Position.x = gl_Position.x*gl_Position.w;";
if(disablePerspectiveAxis.indexOf("y") >= 0)
    project_vertex_custom += "\ngl_Position.y = gl_Position.y*gl_Position.w;";

//Update the glsl code in three.js
THREE.ShaderChunk.project_vertex = project_vertex_custom;