在片段着色器threejs中将ndc坐标转换为世界坐标答案

【问题标题】：Convert ndc coordinates to world coordinates in fragment shader threejs在片段着色器threejs中将ndc坐标转换为世界坐标
【发布时间】：2018-10-03 12:38:02
【问题描述】：

我的目标是在飞机上围绕鼠标光标画一个圆圈。

我得到代表我的光标位置的 NDC 坐标（-1 到 +1）：

const rect = targetHTML.getBoundingClientRect();
const mousePositionX = event.clientX - rect.left;
const mousePositionY = event.clientY - rect.top;

this._currentPoint = {
  x: (mousePositionX / targetHTML.clientWidth *  2 - 1),
  y: (mousePositionY / targetHTML.clientHeight *  -2 + 1),
};

我通过制服将它传递给我的片段着色器：

this._cursorMaterial.uniforms.uBrushPosition.value =
  new window.THREE.Vector2(this._currentPoint.x, this._currentPoint.y);

在我的片段着色器中，我想将其转换为世界坐标，以便将其与片段世界位置进行比较。

// vertex shader
varying vec4 vPos;
void main() {
  vPos = modelMatrix * vec4(position, 1.0 );
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0 );
}

// fragment shader
varying vec4 vPos;
uniform vec2 uBrushPosition;
void main() {
  // convert uBrush position to world space
  // uBrushPosition
  vec3 brushWorldPosition = ?

  // 
  if (distance(brushWorldPosition, vpos) < 10.) {
    gl_FragColor = vec4(1., 0., 0., .5);
  }
  discard;

【问题讨论】：

是否可以使用THREE.Raycaster() 找到与您的平面的交点并将其坐标传递给着色器，初步使用plane.worldToLocal(point_of_intersection)？
最好不要，那是备用计划:)
你能提供一个实时代码示例吗？ )

标签： three.js glsl webgl fragment-shader

【解决方案1】：

不在着色器中，但您可以将其作为制服发送。

var mouseWorld = new THREE.Vector3( mouse.x, mouse.y, distanceFromCamera )
mouseWorld.unproject( camera )

【讨论】：