网格

Question

我有两个网格A和B，一个包含5个点。我想投影网格B上A上的点。

所以，我在网格1上有点（正如你在第一张图片中看到的那样） 我有另一个与第一个独立的网格（图2） 我想在第二个网格上投射黄点，这样我就可以得到你在第三张图片上看到的东西

你知道我们该怎么办，或者你有什么例子吗？ 我虽然从点（Vector3）发送光线，但我不知道这是否可行。 我想分享代码，但它非常大，包含很多文件，分享它很复杂..所以如果你能给我一些想法谢谢

Answer 1

作为一种选择，当您知道某个点和方向的坐标时，可以使用THREE.Raycaster()：

＆＃13;

＆＃13;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 2, 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 meshA = new THREE.Mesh(new THREE.PlaneGeometry(3, 7), new THREE.MeshBasicMaterial({
  color: "blue",
  side: THREE.DoubleSide,
  transparent: true,
  opacity: .5
}));
meshA.position.set(0, 0, 2);
scene.add(meshA);

var meshB = new THREE.Mesh(new THREE.SphereGeometry(2.5, 16, 12), new THREE.MeshBasicMaterial({
  color: "red"
}));
meshB.position.set(0, 0, -3);
scene.add(meshB);

var points = [];
for (let i = -3; i <= 3; i++) {
  let point = new THREE.Vector3().copy(meshA.position).setComponent(1, i);
  points.push(point);
  let p = new THREE.Mesh(new THREE.SphereGeometry(.125, 4, 2), new THREE.MeshBasicMaterial({
    color: "orange",
    wireframe: true
  }));
  p.position.copy(point);
  scene.add(p);
}

pressme.addEventListener("click", getIntersections, false);

var raycaster = new THREE.Raycaster();
var direction = new THREE.Vector3(0, 0, -1);
var intersects;

function getIntersections() {
  points.forEach(p => {
    raycaster.set(p, direction);
    intersects = raycaster.intersectObject(meshB);
    if (intersects.length > 0) {
      let pI = intersects[0].point; //this is the point of intersection in world coordinates
      console.log(pI);
      // visualization
      let lineGeom = new THREE.Geometry();
      lineGeom.vertices.push(p, pI);
      let line = new THREE.Line(lineGeom, new THREE.LineBasicMaterial({
        color: "yellow"
      }));
      scene.add(line);
      let pointI = new THREE.Mesh(new THREE.SphereGeometry(.125, 4, 2), new THREE.MeshBasicMaterial({
        color: "white"
      }));
      pointI.position.copy(pI);
      scene.add(pointI);
    }
  });

}

render();

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

＆＃13;

body {
  overflow: hidden;
  margin: 0;
}

＆＃13;

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<button id="pressme" style="position:absolute;">PressMe</button>

＆＃13;

＆＃13;

＆＃13;

按＆＃34;按Me＆＃34;按钮得到结果。