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);
}

如何将在运行时绘制的2D线（如在Microsoft绘制中绘制的方式）转换为使用Three.js的3D矩形？

1 个答案: