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

WebGL - Web 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

15 WebGL (Scene) . , 15 . .

2 3 . 3 X, Y, Z , 2 3 .

In this article

. () :

js
var squareRotation = 0.0;

drawScene() . :

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

- , X Z squareRotation .

- :

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 squareRotation .

. . .

X, Y, Z (offset) :

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 , .

push, pop , . :

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