在3D中转换2D画布

Question

当您绘制平面图时，我会尝试了解房屋或计划建造者的工作方式

他们如何在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 个解决方案

解决方案1
0 已采纳 2018-11-18 23:54:28

在3D中转换2D画布

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-11-18 23:54:28

解决方案1
0 已采纳 2018-11-18 23:54:28