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

Question

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

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

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

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

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

它在那里我已经创建了建筑网格和窗口网格可以拖动的工作示例-小提琴。

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