3d - 将一个网格拖到另一个网格上并将其限制在侧面 Three.js 内

Question

我必须创建一个类似房屋的结构，用户可以在其中在墙上添加 window 。我正在考虑的方法是首先为窗口创建一个单独的网格，用户可以将其拖过房屋网格的选定墙壁，然后放置在他们认为合适的地方，但在房屋网格的同一墙壁或同一侧。之后，我将再次创建整个场景，但在房屋网格的墙上绘制 window ，而不是创建单独的 window 网格。

以下是在墙上看到 window 网格时的样子 -


我可以使用 DragControls 将窗口拖过墙壁。

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

但不知道如何限制拖动，使窗口不能走出墙外。

它是一个工作示例，我在其中创建了可以拖动的建筑网格和窗口网格 - 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