5

如何/是否可以使用鼠标使用 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 画布，例如立方体。

4

2 回答 2

4

使用 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。请注意，需要实现的映射种类越多（如缩放和其他转换），需要的数学就越多。

于 2017-05-29T12:05:07.420 回答
1

使用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;


        }
}
于 2017-05-30T14:55:24.443 回答