JavaScript рисует с помощью мыши Canvas с 3 осями

Как это / можно нарисовать с помощью мыши холст, используя 3 оси (x,y,z).

Я знаю, что можно нарисовать холст на 2 осях, и я сделал это успешно.

Но я понятия не имею, как я нарисую его на 3 оси (например, куб).

Ниже показаны некоторые функции рисования на холсте.

$(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-холст, например, куб.

Источник

3 ответа

С 2D это просто, у вас есть координаты X и Y мыши, и когда вы нажимаете кнопку мыши, вы можете изменить пиксели в этом месте на холсте.

3D с другой стороны довольно сложно. Из-за дополнительного измерения, которого нет на 2D-поверхности, вам необходимо знать, как управлять 3D-позициями. И что еще хуже, с этим третьим измерением приходят всевозможные дополнительные элементы, которые все любят иметь: молнии и тени, эффекты, фокусировка и т. Д.

Простое рисование

В своей основной форме (за исключением некоторой арифметики) вы можете выровнять ось Z на 2D-поверхности с помощью одного деления. Предположим, что у вас есть точка в 3D, которая состоит из трех точек на трех осях (x3d, y3d, z3d), тогда вы можете сделать:

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

Если вы новичок в 3D, вы сначала захотите поиграть с этим. Вот учебник.

Продвинутый рисунок

Только для частиц и линий это довольно просто, хотя вы можете использовать другую точку зрения. Но вскоре это становится сложнее, когда вы используете объекты и хотите повернуть их в трехмерном пространстве. Вот почему большинство людей используют 3D-движок для создания 3D-графики.

Управление 3D пространством

При рисовании с помощью мыши вам необходимо отобразить движение 2D мыши на 3D для контроля. Для примера посмотрите эти 3D GUI: Microsoft Paint 3D, Google Sketchup и Blender. Обратите внимание, что чем больше видов отображений необходимо реализовать (например, масштабирование и другие преобразования), тем больше математики требуется.

Источник

Использование 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);

спроецирует ваш рисунок в трехмерное пространство.

Эта функция обновит линию в трехмерном пространстве:

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;


        }
}
Источник 
<html>
<head>
<title>3D Cube</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 10000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(700, 700, 700, 10, 10, 10);
var material = new THREE.MeshBasicMaterial({color: 0xfffff, wireframe: true});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 1000;        
function render() {
requestAnimationFrame(render);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>

https://github.com/AshokKnv/3D-Cube/blob/master/explanation.txt

Источник
Другие вопросы по тегам