| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/ko/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL | [Back] [Original] |
Get to know MDN better
This page was translated from English by the community. Learn more and join the MDN Web Docs community.
15 WebGL (Scene) . , 15 . .
2 3 . 3 X, Y, Z , 2 3 .
. () :
var squareRotation = 0.0;
drawScene() . :
mvPushMatrix();
mvRotate(squareRotation, [1, 0, 1]);
- , X Z squareRotation .
- :
mvPopMatrix();
- .
squareRotation . lastSquareUpdateTime , drawScene() :
var currentTime = new Date().getTime();
if (lastSquareUpdateTime) {
var delta = currentTime - lastSquareUpdateTime;
squareRotation += (30 * delta) / 1000.0;
}
lastSquareUpdateTime = currentTime;
squareRotation squareRotation .
. . .
X, Y, Z (offset) :
var squareXOffset = 0.0;
var squareYOffset = 0.0;
var squareZOffset = 0.0;
:
var xIncValue = 0.2;
var yIncValue = -0.4;
var zIncValue = 0.3;
:
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() :
mvTranslate([squareXOffset, squareYOffset, squareZOffset]);
, , , , , . .
push, pop , . :
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 .
This page was last modified on 2024 12 17 by MDN contributors.
WebGLRenderingContextWebGLBufferWebGLFramebufferWebGLRenderbufferWebGLObjectWebGLProgramWebGLShaderWebGLTextureWebGLUniformLocationWebGLActiveInfoWebGLShaderPrecisionFormatWebGLContextEventWebGLQueryWebGLSamplerWebGLSyncWebGLTransformFeedbackWebGLVertexArrayObjectWebGL2RenderingContextWEBGL_compressed_texture_s3tcWEBGL_compressed_texture_s3tc_srgbWEBGL_compressed_texture_etc1WEBGL_compressed_texture_pvrtcWEBGL_debug_renderer_infoWEBGL_debug_shadersWEBGL_depth_textureOES_element_index_uintEXT_frag_depthWEBGL_lose_contextEXT_texture_filter_anisotropicEXT_sRGBOES_standard_derivativesOES_texture_floatWEBGL_draw_buffersOES_texture_float_linearEXT_shader_texture_lodOES_texture_half_floatOES_texture_half_float_linearWEBGL_color_buffer_floatEXT_color_buffer_half_floatOES_vertex_array_objectANGLE_instanced_arraysEXT_blend_minmaxEXT_disjoint_timer_queryOES_draw_buffers_indexedYour blueprint for a better internet.
Portions of this content are 19982026 by individual mozilla.org contributors. Content available under a Creative Commons license.
| Web Proxy Viewer | New URL | Original Page |