如何将矩形投影到Mesh / Terrain对象上，以用作选择框？ （在three.js中）

Question

我有一个使用THREE.Terrain库生成的地形。我希望能够单击并拖出选取框并选择地形网格表面上的对象。

目前我正在检测拖动的开始和结束，并在全局XZ平面中绘制一个矩形，但我更喜欢它与表面齐平。

目前它看起来像这样;

然而，我的目标是更像这样的东西;

我想知道我是否错过了一些使用Core three.js功能的明显方法。

总是有强力方法在矩形周边周围以一定间隔投射光线，并创建一系列线段来近似投影的矩形，但我想知道是否有原生方法。

（本周我才刚开始看三个。所以我可能错过了一些明显的东西......虽然我已经花了最后一天进行实验，并且没有多少运气）

更新

基于@ prisoner849的建议，我mashed up his code with the Terrain demo，这看起来效果很好。

    varying vec2 vPos;

    void main() {
      vec2 Ro = size * .5;
      vec2 Uo = abs( vPos - center.xz ) - Ro;

      vec3 c = mix(vec3(1.), vec3(1.,0.,0.), float(enabled && (abs(max(Uo.x,Uo.y)) < lineHalfWidth)  ));

      gl_FragColor = vec4(c, float(enabled && (abs(max(Uo.x,Uo.y)) < lineHalfWidth)  ));
    }

  `;

代码需要大量清理，并且需要旋转编辑框以匹配摄像机视角，并且按住Ctrl键单击以添加到选择集等等会很好。

但原则上片段着色器效果很好......

Answer 1

在我发表评论之后，我的想法与Don McCurdy完全一样（干杯，唐:)）。 快速搜索https://www.shadertoy.com给了我那个着色器https://www.shadertoy.com/view/XlsBRB（看看那里的FabriceNeyret2的精彩评论）。 所以我只是为这个非常粗略的概念调整了片段着色器。

＆＃13;

＆＃13;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 5, 10);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var geom = new THREE.PlaneGeometry(20, 20, 10, 10);
geom.vertices.forEach(v => {
  v.z = THREE.Math.randFloat(-1, 1);
});
geom.rotateX(-Math.PI * .5);
geom.computeFaceNormals();
geom.computeVertexNormals();

var uniforms = {
  center: {
    value: new THREE.Vector3()
  },
  size: {
    value: new THREE.Vector2(1, 1)
  },
  lineHalfWidth: {
    value: 0.1
  }
}

var matShader = new THREE.ShaderMaterial({
  uniforms: uniforms,
  vertexShader: vertShader,
  fragmentShader: fragShader
});

var matWire = new THREE.MeshBasicMaterial({
  color: "gray",
  wireframe: true
});

var obj = THREE.SceneUtils.createMultiMaterialObject(geom, [matShader, matWire]);

scene.add(obj);

var gui = new dat.GUI();
gui.add(uniforms.size.value, "x", .5, 5.0).name("size.x");
gui.add(uniforms.size.value, "y", .5, 5.0).name("size.y");
gui.add(uniforms.lineHalfWidth, "value", .05, 2.0).name("line half-width");

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersects = [];
var point = new THREE.Vector3();

window.addEventListener("mousemove", function(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  intersects = raycaster.intersectObject(obj, true);
  if (intersects.length === 0) return;
  obj.worldToLocal(point.copy(intersects[0].point));
  uniforms.center.value.copy(point);

}, false);


render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

＆＃13;

body {
  overflow: hidden;
  margin: 0;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/0949e59f/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/0949e59f/examples/js/utils/SceneUtils.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/0949e59f/examples/js/libs/dat.gui.min.js"></script>
<script>
  var vertShader = `
    varying vec2 vPos;
    void main() {
      vPos = position.xz;
      gl_Position = projectionMatrix *
                    modelViewMatrix *
                    vec4(position,1.0);
    }
  `;

  var fragShader = `
    uniform vec3 center;
    uniform vec2 size;
    uniform float lineHalfWidth;
    
    varying vec2 vPos;
    
    void main() {
      vec2 Ro = size * .5;
      vec2 Uo = abs( vPos - center.xz ) - Ro;
      
      vec3 c = mix(vec3(1.), vec3(1.,0.,0.), float(abs(max(Uo.x,Uo.y)) < lineHalfWidth));
      
      gl_FragColor = vec4(c, 1.  );
    }
    
  `;
</script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果其他人在理解着色器时遇到问题，我会尝试进行解释。

size 包含矩形的宽度和高度 Ro 是宽度的一半，高度的一半

Uo 是衡量您与矩形边缘的距离的度量。如果 vPos 在其中一条边上，X 或 Y 的表达式将为 0。以左侧的点为例 - abs(vPos.x - centre.x) 将等于 Ro，所以当你减去 Ro 时，结果是 0。

c - mix 是一个在两个值之间进行线性插值的函数 - 你给它一个开始、结束和一个值来进行插值。在这里，我们在 WHITE 和 RED 之间进行插值，并使用我们与矩形 (float(abs(max(Uo.x,Uo.y)) < lineHalfWidth) 边缘的接近程度的表达式来进行插值。

gl_FragColor — 我们需要 vec4 的 color，因此我们通过在 c 的所有值的末尾粘贴 1 从 c 创建一个.