在3D中转换2D画布
[英]transform 2d canvas in 3d
问题描述
I try to understand how house or plan builder work when you can draw a floorplan 
当您绘制平面图时，我会尝试了解房屋或计划建造者的工作方式
How they transform 2d floor plan in 3d wall. 他们如何在3d墙中转换2d平面图。
I made a small demo with 2d canvas line and I try to find out how to convert a 2d canvas line in 3d wall with three.js or any other webgl libraries. 我用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>
If anyone has tracks to do it ? 是否有人能做到？
1 个解决方案
解决方案1
0 已采纳 2018-11-18 23:54:28
Check out the source for this app: 查看此应用程序的来源：
https://github.com/furnishup/blueprint3d https://github.com/furnishup/blueprint3d
They take the line segments and extrude the points into walls, cut holes into the walls for windows and doors, and triangulate the floor polygons. 他们采用线段并将点挤出到墙壁中，在门窗的墙壁上切孔，然后对地板多边形进行三角剖分。
http://furnishup.github.io/blueprint3d/example/ http://furnishup.github.io/blueprint3d/example/
Hope it helps. 希望能帮助到你。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.