JavaScript 使用 3 轴鼠标画布绘制

Question

如何/是否可以使用鼠标绘制使用 3 轴 (x,y,z) 的画布。

我知道可以在 2 轴上绘制画布，我已经成功地做到了。

但我不知道如何在 3 轴上绘制它（例如立方体）。

以下显示了一些 2d 画布绘图功能

$(canvas).on('mousemove', function(e) {
mousex = parseInt(e.clientX-canvasx);
mousey = parseInt(e.clientY-canvasy);
if(mousedown) {
    ctx.beginPath();
    if(tooltype=='draw') {
        ctx.globalCompositeOperation = 'source-over';
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 3;
    } else {
        ctx.globalCompositeOperation = 'destination-out';
        ctx.lineWidth = 10;
    }
    ctx.moveTo(last_mousex,last_mousey);
    ctx.lineTo(mousex,mousey);
    ctx.lineJoin = ctx.lineCap = 'round';
    ctx.stroke();
}
last_mousex = mousex;
last_mousey = mousey;
//Output
$('#output').html('current: '+mousex+', '+mousey+'<br/>last: '+last_mousex+', '+last_mousey+'<br/>mousedown: '+mousedown);

});

完整代码https://jsfiddle.net/ArtBIT/kneDX/。

但是如何添加 z 轴并绘制 3d 画布，例如立方体。

Answer 1

使用 2D 很简单，您拥有鼠标的 X 和 Y 坐标，当单击鼠标按钮时，您可以更改画布中该位置的像素。

另一方面，3D 是相当困难的。由于 2D 表面上不存在额外维度，因此您需要知道如何控制 3D 位置。更糟糕的是，第三维度带来了每个人都喜欢的各种额外功能：闪电和阴影、效果、焦点等等。

简单绘图

在其最基本的形式中，（抛开一些算术）您可以在 2D 表面上用一个分割来展平 Z 轴。假设你有一个 3D 点，它由三个轴上的三个点（x3d，y3d，z3d）组成，那么你可以这样做：

var x2d = x3d / z3d;
var y2d = y3d / z3d;

如果您是 3D 新手，您会想先玩这个。 Here is a tutorial.

高级绘图

对于粒子和线条，这相当简单，尽管您可能想使用另一个perspective。但是当您使用对象并想要rotate them in 3D space 时，它很快就会变得更加复杂。这就是为什么大多数人依赖像three.js 这样的引擎来为他们做 3D 绘图。

控制 3D 空间

使用鼠标绘图时，需要将鼠标移动的 2D 映射到 3D 进行控制。例如，看看这些 3D GUI：Microsoft 的 Paint 3D、Google 的 Sketchup 和 Blender。请注意，需要实现更多种类的映射（如缩放和其他转换）more math 是必需的。

Answer 2

使用 three.js 会帮助您。见这里：https://jsfiddle.net/bn890dtc/

点击拖拽画线的核心代码：

function onMouseMove(evt) {
    if (renderer) {

        var x = (event.clientX / window.innerWidth) * 2 - 1;
        var y = -(event.clientY / window.innerHeight) * 2 + 1;
        var z = 0
        var vNow = new THREE.Vector3(x, y, z);

        vNow.unproject(camera);
        splineArray.push(vNow);

    }
}

线

vNow.unproject(camera);

会将您的绘图投影到 3D 空间中。

此函数将更新 3D 空间中的线：

function updatePositions() {

    var positions = line.geometry.attributes.position.array;

    var index = 0;

        for ( var i = 0; i < splineArray.length;  i ++ ) {

        positions[ index ++ ] = splineArray[i].x;
        positions[ index ++ ] = splineArray[i].y;
        positions[ index ++ ] = splineArray[i].z;


        }
}