Back

Technologies:

javascriptjavascript
avatar
Tolerim
a month ago

How can I create a basic first person 3D camera using JavaScript?

Can you suggest a way to draw a 3D rectangle in canvas using JavaScript? The function should have parameters for x, y, depth, width, and height. Additionally, how can one create a function to move the rectangle horizontally and vertically using the same parameters of x, y, depth, width, and height? I have attempted to use the following code, but it does not work:

function matrix(x, y, width, height, z, cont) {
  var x1 = x,
    y1 = y,
    z1 = 0;
  var x2 = x + width + z,
    y2 = y + height + z,
    z2 = x + width + y + height + z;

  x11 = (Math.cos(Math.PI + cont) * x1) + (Math.cos(cont) * x1);
  y11 = (Math.cos(Math.PI + cont) * y1) + (Math.cos(cont) * y1);
  z11 = (Math.cos(Math.PI + cont) * z1) + (Math.cos(cont) * z1);

  x21 = (Math.cos(cont) * x2) + (Math.cos(Math.PI - cont) * x2);
  y21 = (Math.cos(cont) * y2) + (Math.cos(Math.PI - cont) * y2);
  z21 = (Math.cos(cont) * z2) + (Math.cos(Math.PI - cont) * z2);

  var width2 = x21 - x11 - z,
    height2 = y21 - y11 - z;
  z2 = z21 - z11;

  ctx.reset();            
  draw_rectangle(Math.round(x11), Math.round(y11), Math.round(width2), Math.round(height2), Math.round(z2));
}
Answers(2)
avatar
Vogi
a month ago
Verified Answer
To draw a 3D rectangle in canvas using JavaScript, you can use the rect() method to create a rectangle and then use the fill() method to fill it with color. Here's an example code snippet that you can use as a starting point: 
function draw3DRect(x, y, depth, width, height) {
  // Draw front rectangle
  ctx.fillStyle = 'blue';
  ctx.fillRect(x, y, width, height);

  // Draw top rectangle
  ctx.fillStyle = 'lightblue';
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + depth, y - depth);
  ctx.lineTo(x + depth + width, y - depth);
  ctx.lineTo(x + width, y);
  ctx.closePath();
  ctx.fill();

  // Draw right rectangle
  ctx.fillStyle = 'darkblue';
  ctx.beginPath();
  ctx.moveTo(x + width, y);
  ctx.lineTo(x + width + depth, y - depth);
  ctx.lineTo(x + width + depth, y - depth + height);
  ctx.lineTo(x + width, y + height);
  ctx.closePath();
  ctx.fill();
}
To move the rectangle horizontally and vertically using the same parameters of x, y, depth, width, and height, you can simply change the values of x and y in your function. Here's an example code snippet that moves the rectangle by a certain amount: 
function move3DRect(x, y, depth, width, height) {
  x += 10; // Move right by 10 pixels
  y += 10; // Move down by 10 pixels

  draw3DRect(x, y, depth, width, height); // Redraw rectangle at new position
}
I hope this helps! Let me know if you have any other questions.

Sources

HTML canvas rect() Method - W3Schooldraw rectangle in javascript - Stack OverflowHTML Canvas Drawing - W3SchoolDrawing shapes with canvas - Web APIs | MDN - Mozilla Developerjavascript - 3d drawing in Canvas with HTML+JS - Stack Overflow
avatar
Tolerim
a month ago
This function appears to be drawing a rectangle in 2D rather than 3D. To draw a rectangle in 3D using canvas, you can use the rect() method and adjust the z value to create depth. Here's an example: 
function drawRectangle3D(x, y, depth, width, height) {
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + width, y);
  ctx.lineTo(x + width, y + height);
  ctx.lineTo(x, y + height);
  ctx.lineTo(x, y);
  ctx.moveTo(x + depth, y);
  ctx.lineTo(x + depth + width, y);
  ctx.lineTo(x + depth + width, y + height);
  ctx.lineTo(x + depth, y + height);
  ctx.lineTo(x + depth, y);
  ctx.stroke();
}
To move the rectangle in vertical and horizontal directions, you can adjust the x and y parameters accordingly. For example, to move the rectangle to the right by 10 pixels and down by 5 pixels, you can call the function like this: 
drawRectangle3D(10, 5, 0, 50, 30);
Note that the depth parameter is set to 0 in this case. If you want to create depth, you can increase the value of depth.
;