3d 将网格拖动到另一个网格上，并将其限制在边3.js内

我必须创建一个像房子一样的结构，用户可以在墙上加窗户。我想的方法是首先为窗户创建一个单独的网格，用户可以将其拖动到房屋网格的选定墙上，并在他们认为合适的地方放置，但放置在房屋网格的同一面墙内。之后，我将再次创建整个场景，但在房屋网格的墙上绘制窗户，而不是创建单独的窗户网格

下面是在墙上看到窗网格时的外观-

我可以使用DragControl将窗口拖动到墙上

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

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

---

这是一个工作示例，我在其中创建了可以拖动的建筑网格和窗网格-

无需

三个.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));
}

---

示例r87

请看一看。如何将一个对象移动/拖动到另一个对象上。@prisoner849-非常感谢。我已经更新了我的代码示例，请看一下-。现在，窗网格在墙上可见，但其大小发生了变化。谢谢，让我试试。请看小提琴-。别忘了计算自定义几何体的面法线。将Lambert材质与定向光源一起使用将显示您在某些面中按顶点顺序所犯的错误。在此小提琴中，查看第二个对象的顶点坐标。请访问stackoverflow聊天室：。我需要一些建议和帮助。