Drag the grid on top of the other and limit it to the sides of three.js

Question

I need to create a house, such as a structure, where the user can add windows to the wall. The approach that I think of is to first create a separate grid for the window, which the user can drag over the selected wall of the home grid, and falls where they find it suitable, but inside the same wall or the same side at home. After that, I will create the whole scene again, but I will draw a window in the wall of the home grid, and not create a separate window grid.

Below is what the window mesh will look like over the wall,

I can drag a window through a wall using DragControls.

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

but I don’t know how to limit the drag so that the window cannot go beyond the wall.

, , - fiddle.

Answer 1

THREE.DragControls(). , / , , .

, :

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 r87