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

Question

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

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

我可以使用 DragControls 将 window 拖到墙上。

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

但不知道如何限制拖动，使window不能出墙。

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

Answer 1

不用THREE.DragControls()也可以。只要检查你的光线投射器的光线是否与 wall/building 相交，如果是，则在交点处设置 window 的位置。

这里有一个粗略的解决方案，可以作为你创意的起点：

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

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

Drag a mesh over another and limit it within the sides three.js

3d

three.js

drag-and-drop

intersection