rectangulo - JavaScript dibuja con el mouse Canvas con 3 ejes
dibujar un triangulo en javascript (3)
Con 2D es simple, tiene las coordenadas X e Y del mouse, y cuando se hace clic en un botón del mouse, puede cambiar los píxeles en esa ubicación en el lienzo.
3D por otro lado es bastante difícil. Debido a la dimensión adicional que no existe en la superficie 2D, necesita saber cómo controlar las posiciones 3D. Y para empeorar las cosas, con esa tercera dimensión vienen todo tipo de extra que a todos les gusta tener: rayos y sombras, efectos, enfoque, etc.
Dibujo simple
En su forma más básica, (aparte algún aritmético) puede aplanar el eje Z en la superficie 2D con una sola división. Supongamos que tiene un punto en 3D que consta de tres puntos en tres ejes (x3d, y3d, z3d) y puede hacer lo siguiente:
var x2d = x3d / z3d;
var y2d = y3d / z3d;
Si eres nuevo en 3D, querrás jugar con esto primero. Aquí hay un tutorial .
Dibujo avanzado
Para las partículas y líneas esto es bastante sencillo, aunque es posible que desee utilizar otra perspectiva . Pero se vuelve más complicado pronto cuando utiliza objetos y desea rotarlos en el espacio 3D . Esta es la razón por la cual la mayoría de la gente confía en un motor como three.js para hacer el dibujo 3D para ellos.
Controle el espacio 3D
Al dibujar con el mouse, debe asignar el movimiento del mouse 2D a 3D para controlarlo. Por ejemplo, eche un vistazo a estas GUI en 3D: Paint 3D de Microsoft, Sketchup de Google y Blender . Tenga en cuenta que cuantas más clases de mapeos necesite implementarse (como escalas y otras transformaciones), más matemáticas se requieren.
Cómo es / es posible dibujar usando el mouse un lienzo usando 3 ejes (x, y, z).
Sé que uno puede dibujar un lienzo en 2 ejes y lo he hecho con éxito.
Pero no tengo idea de cómo lo dibujaré en 3 ejes (por ejemplo, un cubo).
A continuación se muestran algunas funciones de dibujo de lienzo en 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);
});
El código completo https://jsfiddle.net/ArtBIT/kneDX/ .
Pero, ¿cómo puedo agregar un eje az y dibujar un lienzo 3d, por ejemplo, un cubo?
Usar three.js te ayudaría. Vea aquí: https://jsfiddle.net/bn890dtc/
El código central para dibujar la línea como su clic y arrastre:
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);
}
}
La línea
vNow.unproject(camera);
Proyectará tu dibujo en el espacio 3D.
Esta función actualizará la línea en el espacio 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;
}
}
<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