使用带3轴的鼠标Canvas绘制JavaScript

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/.

但是如何添加az轴并绘制一个3d画布,例如一个立方体.

Answer 1

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

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

简单的绘图

在最基本的形式中，（抛开一些算术）您可以通过一次除法将 2D 表面上的 Z 轴展平。假设您有一个 3D 点，它由三个轴上的三个点 (x3d、y3d、z3d) 组成，那么您可以执行以下操作：

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

如果您是 3D 新手，您会想先玩玩这个。这是一个教程。

高级绘图

对于粒子和线条来说，这相当简单，尽管您可能想使用另一个视角。但当您使用对象并希望在 3D 空间中旋转它们时，事情很快就会变得更加复杂。这就是为什么大多数人依赖Three.js这样的引擎来为他们进行 3D 绘图。

控制 3D 空间

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