Question

我试图了解house or plan builder在绘制平面图时的工作原理

他们如何在3d墙中转换2d平面图。

我用2d画布行进行了一个小演示，我试图找出如何使用three.js或任何其他webgl库在3d墙中转换2d画布行。

var canvas,
    context,
    dragging = false,
    dragStartLocation,
    snapshot;


function getCanvasCoordinates(event) {
    var x = event.clientX - canvas.getBoundingClientRect().left,
        y = event.clientY - canvas.getBoundingClientRect().top;

    return {x: x, y: y};
}

function takeSnapshot() {
    snapshot = context.getImageData(0, 0, canvas.width, canvas.height);
}

function restoreSnapshot() {
    context.putImageData(snapshot, 0, 0);
}


function drawLine(position) {
    context.beginPath();
    context.moveTo(dragStartLocation.x, dragStartLocation.y);
    context.lineTo(position.x, position.y);
    context.stroke();
}

function dragStart(event) {
    dragging = true;
    dragStartLocation = getCanvasCoordinates(event);
    takeSnapshot();
}

function drag(event) {
    var position;
    if (dragging === true) {
        restoreSnapshot();
        position = getCanvasCoordinates(event);
        drawLine(position);
    }
}

function dragStop(event) {
    dragging = false;
    restoreSnapshot();
    var position = getCanvasCoordinates(event);
    drawLine(position);
}

function init() {
    canvas = document.getElementById("canvas");
    context = canvas.getContext('2d');
    context.strokeStyle = 'purple';
    context.lineWidth = 6;
    context.lineCap = 'round';

    canvas.addEventListener('mousedown', dragStart, false);
    canvas.addEventListener('mousemove', drag, false);
    canvas.addEventListener('mouseup', dragStop, false);
}

window.addEventListener('load', init, false);

*{
  border:0;
  padding:0;
  margin:0;
}

canvas{
    position: absolute;
    top: 100px;
    left:100px;
    border: 1px solid gray;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>
    
</head>

<body>
<canvas id="canvas" width="600" height="600"></canvas>

</body>
</html>

是否有人可以做到？

Answer 1

查看此应用程序的来源：

https://github.com/furnishup/blueprint3d

他们采用线段并将点挤出到墙壁上，在门窗的墙壁上切开孔，并对地板多边形进行三角剖分。

http://furnishup.github.io/blueprint3d/example/

希望有帮助。

在3D中转换2D画布

1 个答案: