Я использую холст 3d, чтобы нарисовать 3D-график, на котором я могу построить точки, такие как (1,5,4), (-8,6, -2) и т. Д. Так что я могу нарисовать все положительные и отрицательные х, Ось Y и Z. У меня также есть эффект вращения с помощью клавиш со стрелками. Инструкции по вращению: ось Z проходит от центра экрана.

Для поворота вокруг оси x нажимайте клавиши со стрелками вверх / вниз. Чтобы повернуть вокруг оси Y, нажмите клавиши со стрелками влево / вправо. Для поворота вокруг оси z нажмите клавиши со стрелками ctrl + left / ctrl + down.

Я могу построить точку, указав точки в предоставленном мною текстовом поле. Теперь проблема в том, что, например, если я построю график (5,5,2), он будет построен правильно. Но если я сначала поверну ось X, а затем ось Y, то точка будет построена правильно. Проблема возникает, если я сначала поверну ось Y, а затем ось X. Точка будет построена неправильно. Простой способ найти проблему, с которой я столкнулся: это можно легко определить, если вы продолжаете строить одну и ту же точку несколько раз. Точка должна быть нанесена выше одной и той же точки, чтобы была видна только одна точка. Но в моем случае та же самая точка ( Например, (5,5,2) рисуется в другом месте на холсте при вращении. Эта проблема возникает, только если я сначала поворачиваю ось Y, а затем ось X или если я сначала поворачиваю ось Z, а затем ось Y. это ошибка, которую я сделал в кодировании. Я новичок в этом холсте 3d и java-скрипте. Так что, пожалуйста, помогите.

 

Canvas Surface Rotation



  body {

    text-align: center;

  }



  canvas {

    border: 1px solid black;

  }



  

var p1;
var p2;
var p3;
var p4;
var p5;
var p6;
var xangle=0;
var yangle=0;
var zangle=0;
  var constants = {

    canvasWidth: 600, // In pixels.

    canvasHeight: 600, // In pixels.

    leftArrow: 37,

    upArrow: 38,

    rightArrow: 39,

    downArrow: 40,

    xMin: -10, // These four max/min values define a square on the xy-plane that the surface will be plotted over.

    xMax: 10,

    yMin: -10,

    yMax: 10, 

    xDelta: 0.06, // Make smaller for more surface points. 

    yDelta: 0.06, // Make smaller for more surface points. 

    colorMap: ["#000080"], // There are eleven possible "vertical" color values for the surface, based on the last row of http://www.cs.siena.edu/~lederman/truck/AdvanceDesignTrucks/html_color_chart.gif

    pointWidth: 2, // The size of a rendered surface point (i.e., rectangle width and height) in pixels.

    dTheta: 0.05, // The angle delta, in radians, by which to rotate the surface per key press.

    surfaceScale: 24 // An empirically derived constant that makes the surface a good size for the given canvas size.

  };



  // These are constants too but I've removed them from the above constants literal to ease typing and improve clarity.

  var X = 0;

  var Y = 1;

  var Z = 2;



  // -----------------------------------------------------------------------------------------------------  



  var controlKeyPressed = false; // Shared between processKeyDown() and processKeyUp().

  var surface = new Surface(); // A set of points (in vector format) representing the surface.



  // -----------------------------------------------------------------------------------------------------



  function point(x, y, z)

  /*

    Given a (x, y, z) surface point, returns the 3 x 1 vector form of the point.

  */

  {       

    return [x, y, z]; // Return a 3 x 1 vector representing a traditional (x, y, z) surface point. This vector form eases matrix multiplication.

  }



  // -----------------------------------------------------------------------------------------------------



  function Surface()

  /*

    A surface is a list of (x, y, z) points, in 3 x 1 vector format. This is a constructor function.

  */

  {

    this.points = [];
    // An array of surface points in vector format. That is, each element of this array is a 3 x 1 array, as in [ [x1, y1, z1], [x2, y2, z2], [x3, y3, z3], ... ]

  }



  // -----------------------------------------------------------------------------------------------------  



  Surface.prototype.equation = function(x, y)

  /*

    Given the point (x, y), returns the associated z-coordinate based on the provided surface equation, of the form z = f(x, y).

  */

  {

    var d = Math.sqrt(x*x + y*y); // The distance d of the xy-point from the z-axis.



    return 4*(Math.sin(d) / d); // Return the z-coordinate for the point (x, y, z). 

  }



  // -----------------------------------------------------------------------------------------------------  



  Surface.prototype.generate = function()

  /*

    Creates a list of (x, y, z) points (in 3 x 1 vector format) representing the surface.

  */

  {

    var i = 0;



    for (var x = constants.xMin; x