3d - Arrastre una malla sobre otra y limítela dentro de los lados three.js

drag-and-drop intersection

Question

Tengo que crear una estructura similar a una casa donde el usuario pueda agregar ventanas en la pared. El enfoque que estoy pensando es primero crear una malla separada para la ventana que el usuario puede arrastrar sobre la pared seleccionada de la malla de la casa, y caer donde lo considere adecuado, pero dentro de la misma pared o el mismo lado de la malla de la casa. Después de eso, crearé toda la escena nuevamente, pero dibujaré la ventana en la pared de la malla de la casa en lugar de crear una malla de ventana por separado.

A continuación se muestra cómo se verá cuando se vea una malla de ventana sobre una pared.

Puedo arrastrar la ventana sobre la pared usando DragControls.

dragControls = new THREE.DragControls( objects, camera, renderer.domElement );

pero no sé cómo limitar el arrastre para que la ventana no pueda salir del muro.

Es una muestra de trabajo donde he creado malla de construcción y malla de ventana que se puede arrastrar - violín .

Answer 1

Puedes hacerlo sin THREE.DragControls() . Simplemente verifique, si el rayo de su raycaster se está cruzando con la pared / edificio y, si lo está, configure la posición de la ventana en el punto de intersección.

Hay una solución aproximada, que puede ser solo el punto de partida para tu creatividad:

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

var building = new THREE.Mesh(...); // wall/building
var _window = new THREE.Mesh(...);  // window

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersects;
var normalMatrix = new THREE.Matrix3();
var worldNormal = new THREE.Vector3();
var lookAtVector = new THREE.Vector3();
var dragging = false;

window.addEventListener("mousemove", onMouseMove, false);
window.addEventListener("mousedown", onMouseDown, false);
window.addEventListener("mouseup", onMouseUp, false);

function onMouseDown(event){
  if (intersects.length > 0) {
    controls.enableRotate = false;
    dragging = true;
  }
}

function onMouseUp (event){
  controls.enableRotate = true;
  dragging = false;
}

function onMouseMove(event) {
  mouse.set((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1);
  raycaster.setFromCamera(mouse, camera);
  intersects = raycaster.intersectObjects([building]);

  if (intersects.length == 0 || !dragging) return;

  normalMatrix.getNormalMatrix(intersects[0].object.matrixWorld);
  worldNormal.copy(intersects[0].face.normal).applyMatrix3(normalMatrix).normalize();
  _window.position.copy(intersects[0].point);
  _window.lookAt(lookAtVector.copy(intersects[0].point).add(worldNormal));
}

jsfiddle example r87