[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/ru/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL [Back]  [Original]

WebGL - API | MDN

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

WebGL

WebGL 15 . . , .

. , , - , .

In this article

, . :

js
var squareRotation = 0.0;

drawScene() , . :

js
mvPushMatrix();
mvRotate(squareRotation, [1, 0, 1]);

, squareRotation X Z.

:

js
mvPopMatrix();

, .

, squareRotation . ( lastSquareUpdateTime), drawScene():

js
var currentTime = new Date().getTime();
if (lastSquareUpdateTime) {
  var delta = currentTime - lastSquareUpdateTime;

  squareRotation += (30 * delta) / 1000.0;
}

lastSquareUpdateTime = currentTime;

, squareRotation .

,

. , , - .

:

js
var squareXOffset = 0.0;
var squareYOffset = 0.0;
var squareZOffset = 0.0;

:

js
var xIncValue = 0.2;
var yIncValue = -0.4;
var zIncValue = 0.3;

, :

js
squareXOffset += xIncValue * ((30 * delta) / 1000.0);
squareYOffset += yIncValue * ((30 * delta) / 1000.0);
squareZOffset += zIncValue * ((30 * delta) / 1000.0);

if (Math.abs(squareYOffset) > 2.5) {
  xIncValue = -xIncValue;
  yIncValue = -yIncValue;
  zIncValue = -zIncValue;
}

, , drawScene() :

js
mvTranslate([squareXOffset, squareYOffset, squareZOffset]);

, .

WebGL, , .

, . :

js
var mvMatrixStack = [];

function mvPushMatrix(m) {
  if (m) {
    mvMatrixStack.push(m.dup());
    mvMatrix = m.dup();
  } else {
    mvMatrixStack.push(mvMatrix.dup());
  }
}

function mvPopMatrix() {
  if (!mvMatrixStack.length) {
    throw "Can't pop from an empty matrix stack.";
  }

  mvMatrix = mvMatrixStack.pop();
  return mvMatrix;
}

function mvRotate(angle, v) {
  var inRadians = (angle * Math.PI) / 180.0;

  var m = Matrix.Rotation(inRadians, $V([v[0], v[1], v[2]])).ensure4x4();
  multMatrix(m);
}

(Vlad Vukievi).


Web Proxy Viewer  |  New URL  |  Original Page