如何将运行时绘制的二维线（例如如何在Microsoft绘制中绘制）转换为使用Three.js的三维矩形？

Question

Design.prototype.get3dPointZAxis = function(event) { 
    var mouseX = event.clientX - this.container.getClientRects()[0].left; 
    var mouseY = event.clientY - this.container.getClientRects()[0].top; 
    var vector = new THREE.Vector3((mouseX/this.container.offsetWidth) * 2 - 1, mouseY /this.container.offsetHeight) * 2 + 1, 0.5); 
    this.projector.unprojectVector(vector, this.camera); 
    var dir = vector.sub(this.camera.position).normalize(); 
    var distance = - this.camera.position.z/dir.z; 
    var pos = this.camera.position.clone().add(dir.multiplyScalar(distance));  
    return pos; 

};

Design.prototype.stopDraw= function(event) { 
    this.twoDLine.push(this.tempLine.geometry); 
    this.tempLine = null; 
    this.lastPoint = null; 

};

Design.prototype.startDraw= function(event) { 
    this.lastPoint = this.get3dPointZAxis(event);  

};

Design.prototype.handleMouseMove = function(event) { 
    if (this.lastPoint) { 
    var pos = this.get3dPointZAxis(event); 
    if (!this.tempLine) { 
     var material = new THREE.LineBasicMaterial({ 
      color: 0x0089ff 
     }); 
     var geometry = new THREE.Geometry(); 
     geometry.vertices.push(this.lastPoint); 
     geometry.vertices.push(pos);    
     this.tempLine = new THREE.Line(geometry, material); 
     this.scene.add(this.tempLine); 
    } 
    else { 
     this.tempLine.geometry.verticesNeedUpdate = true; 
     this.tempLine.geometry.vertices[1] = pos; 
    } 
} 

};

我正在使用鼠标事件在容器内绘制2D线条和形状。我需要将这些线条和形状转换为3D。我正在尝试以下技术......但没有结果。请请帮忙！

Design.prototype.convertTo3D = function() { 
console.log("convertTo3D"); 
this.tempLine.geometry.vertices.z = 10; 

};

Answer 1

Design.prototype.convertTo3D = function() { 
for (var i in this.linesToDraw) { 
    var line = this.linesToDraw[i]; 
    this.scene.remove(line); 
    var x1 = line.geometry.vertices[0].x; 
    var y1 = line.geometry.vertices[0].y; 
    var x2 = line.geometry.vertices[1].x; 
    var y2 = line.geometry.vertices[1].y; 
    var length = Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2)); 
    var slope = (y2 - y1)/(x2 - x1); 
    var xMid = (x2 + x1)/2; 
    var yMid = (y2 + y1)/2; 
    slope = Math.atan(slope); 
    var material = new THREE.MeshPhongMaterial({ambient: 0x030303,shading: THREE.FlatShading}); 
    var geometry = new THREE.CubeGeometry(length, 1, 6); 
    var cube = new THREE.Mesh(geometry, material); 
    cube.addEventListener("click", function (event) { 
     console.log("CUBE CLICKED"); 
    }, false); 
    cube.rotateZ(slope); 
    cube.position = new THREE.Vector3(xMid, yMid, 3); 
    cube.castShadow = true; 
    cube.receiveShadow = true; 
    this.scene.add(cube); 
}