JavaScript draw using mouse Canvas with 3 axis

Question

How is it / is it possible to draw using the mouse a canvas using 3 axis(x,y,z).

I know that one can draw a canvas on 2 axis and I have done that successfully.

But I have no idea of how I shall draw it on 3 axis (for example a cube).

Following shows some 2d canvas drawing functionallity

$(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);

});

The full code https://jsfiddle.net/ArtBIT/kneDX/.

But how can I add a z axis and draw a 3d canvas for instance a cube.

@evolutionxbox hi do you know a tutorial page which may explain a few steps(or examples), or could you explain me which steps I have to do to accomplish this? — utdev, May 17 '17 at 12:51
Sorry. I don't have the time, nor the energy to acquire the knowledge for that. — evolutionxbox, May 17 '17 at 12:53
Do you mean draw on a 3D surface, or draw in 3D? To draw on a 3D surface you project the mouse into the 3D scene, where the ray from the camera through the mouse intercepts a polygon you get a 3D coordinate you can use to draw. To draw in 3D you need a 3rd input, there are mouse like input devices that can return a true 3D position but the standard mouse interface is only designed for 2D, though there are workarounds that can get at the 3 position inputs (6D really as 3D input devices also have yaw, pitch, and roll) (and some 2D mice have direction which could also give you a 3rd axis) — Blindman67, May 18 '17 at 16:41
@Blindman67 thanks for the information, do you have a tutorial page for that case? — utdev, May 19 '17 at 08:34

Code4R7 · Answer 1 · 2017-05-30T08:35:02.647

With 2D it is simple, you have the X and Y coordinate of the mouse, and when a mouse button is clicked you can change pixels at that location in the canvas.

3D on the other hand is quite hard. Because of the extra dimension that does not exist on the 2D surface, you need to know how to control the 3D positions. And to make matters worse, with that third dimension comes all kinds of extra's that everyone likes to have: lightning and shadows, effects, focus, etc.

Simple drawing

In its most basic form, (set aside some arithmic) you can flatten the Z axis on the 2D surface with a single division. Suppose that you have a point in 3D which consists of three points on three axis (x3d, y3d, z3d) then you can do:

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

If you're new to 3D, you will want to play with this first. Here is a tutorial.

Advanced drawing

For just particles and lines this is rather straightforward, although you might want to use another perspective. But it gets more complicated soon when you use objects and want to rotate them in 3D space. This is why most people rely on an engine like three.js to do the 3D drawing for them.

Control 3D space

When drawing with the mouse, you need to map the 2D mouse movement to 3D for control. For examples, have a look a these 3D GUI's: Microsoft's Paint 3D, Google's Sketchup, and Blender. Note that the more kinds of mappings needs to be implemented (like scaling and other transformations) the more math is required.

score 1 · Answer 2 · answered May 30 '17 at 14:55

Using three.js would help you out. See here: https://jsfiddle.net/bn890dtc/

The core code for drawing the line as your click and drag:

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

    }
}

The line

vNow.unproject(camera);

will project your drawing into 3D space.

This function will update the line in 3D space:

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;


        }
}

Hi thanks for your answer I will check this out, after 2 minutes of drawing your script bugs a little I cant draw afterwards any idea why? — utdev, Jun 01 '17 at 14:38
No particular error mouse the drawing just does not work after a while — utdev, Jun 01 '17 at 14:46

JavaScript draw using mouse Canvas with 3 axis

2 Answers2