Question

在app.Use(async (context,next) => { using (var serviceScope = app.ApplicationServices.CreateScope()) { if (true) //add your own logic to decide whether to run these code { var db = serviceScope.ServiceProvider.GetService<ApplicationDbContext>(); SeederModuleComponent seeder = new SeederModuleComponent(db); seeder.Seeding(); // Seed the database. } } await next(); });中，我要突出显示鼠标指针最近的边缘，然后选择它以获取边缘的长度。我正在使用threejs webgl来创建边缘。

Edgesgeometry

Answer 1

一个想法。

您知道要镶嵌的面，并且具有边，可以使用THREE.Line3()，该边是根据每个边的顶点构建的（因此，您将使用THREE.Line3()三次）。然后，您知道了交点，并拥有三条THREE.Line3()线，现在您可以通过选择最接近交点的线来找到最近的边，.closestPointToPoint()方法会有所帮助。此方法返回相对于相交点的边缘上的闭合点。

意味着，您只找到了从交点到脸部三个边缘的三个距离。然后，您将突出显示边缘到相交点的最小距离。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geom = new THREE.PlaneBufferGeometry(8, 8).toNonIndexed();
var mat = new THREE.MeshBasicMaterial({
  color: "blue"
});
var mesh = new THREE.Mesh(geom, mat);
scene.add(mesh);

renderer.domElement.addEventListener("mousemove", onMouseMove, false);

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersects = [];
var localPoint = new THREE.Vector3();
let closestPoint = new THREE.Vector3();
var edgeGeom = new THREE.BufferGeometry().setFromPoints([
  new THREE.Vector3(),
  new THREE.Vector3()
]);
var edge = new THREE.Line(edgeGeom, new THREE.LineBasicMaterial({
  color: "aqua"
}));
scene.add(edge);

var pos = mesh.geometry.attributes.position;

function onMouseMove(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  raycaster.setFromCamera(mouse, camera);
  intersects = raycaster.intersectObject(mesh);
  if (intersects.length === 0) return;

  let faceIdx = intersects[0].faceIndex;

  let lines = [
    new THREE.Line3(
      new THREE.Vector3().fromBufferAttribute(pos, faceIdx * 3 + 0),
      new THREE.Vector3().fromBufferAttribute(pos, faceIdx * 3 + 1)
    ),
    new THREE.Line3(
      new THREE.Vector3().fromBufferAttribute(pos, faceIdx * 3 + 1),
      new THREE.Vector3().fromBufferAttribute(pos, faceIdx * 3 + 2)
    ),
    new THREE.Line3(
      new THREE.Vector3().fromBufferAttribute(pos, faceIdx * 3 + 2),
      new THREE.Vector3().fromBufferAttribute(pos, faceIdx * 3 + 0)
    )
  ];

  let edgeIdx = 0;
  mesh.worldToLocal(localPoint.copy(intersects[0].point));

  let minDistance = 1000;
  for (let i = 0; i < 3; i++) {
    lines[i].closestPointToPoint(localPoint, true, closestPoint);
    let dist = localPoint.distanceTo(closestPoint);
    if (dist < minDistance) {
      minDistance = dist;
      edgeIdx = i;
    }
  }

  let pStart = mesh.localToWorld(lines[edgeIdx].start);
  let pEnd = mesh.localToWorld(lines[edgeIdx].end);
  edgeGeom.attributes.position.setXYZ(0, pStart.x, pStart.y, pStart.z);
  edgeGeom.attributes.position.setXYZ(1, pEnd.x, pEnd.y, pEnd.z);
  edgeGeom.attributes.position.needsUpdate = true;

}

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body{
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js"></script>

在三个js中高亮显示鼠标指针的最近边缘

1 个答案: