CODEWITHSUNDEEP
three.js
Fatine Boujnouni
Fatine Boujnouni

Reputation: 57

ThreeJS projection vector3 on mesh

I have two meshes A and B, A one contains 5 points on it. I want to project the points that are on A on the mesh B.

enter image description here

enter image description here

enter image description here

So, I have the points on the mesh 1 ( as you can see in the first picture ) I have another mesh independant from the first one ( pic 2 ) And I want to project the yellow points on the second mesh so I can have something like what you see on the 3rd picture

Do you have any idea how can we proceed, or do you have any examples ? I though of send a ray from the point (Vector3), but I don't know if that can work. I wanted to share the code, but it's very big and contains a lot of files and it very complicated to share it.. So if you can give me just some ideas Thanks

Upvotes: 2

Views: 1014

Answers (1)

prisoner849
prisoner849

Reputation: 17596

enter image description here

As an option, you can use THREE.Raycaster(), when you know coordinates of a point and direction:

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);
}
body {
  overflow: hidden;
  margin: 0;
}
<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>

Press the "PressMe" button to get the result.

Upvotes: 2

Related Questions