0 / 0 / 0
Регистрация: 30.12.2020
Сообщений: 109
1

RequestAnimationFrame вращение вокруг собственного центра

05.03.2023, 17:12. Показов 618. Ответов 0

Author24 — интернет-сервис помощи студентам
Есть код построения 2 треугольников которые образуют квадрат. Нужно сделать вращение
вокруг собственного центра с помощью RequestAnimationFrame. В чем может быть ошибка?

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>WebGL Program</title>
  </head>
  <body>
    <canvas id="myCanvas" width = "570" height = "570"></canvas>
    <script>
      function setupWebGL(canvas) {
            return canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
        }
        
      window.onload = function() {
         var canvas = document.getElementById("myCanvas");
         var gl = setupWebGL(canvas);
         gl.viewport(0, 0, canvas.width, canvas.height);
         gl.clearColor(0.0, 0.0, 0.0, 0.1);
         gl.clear(gl.COLOR_BUFFER_BIT);
 
         var vertexShaderSource = `
            attribute vec3 aPosition;
               attribute vec3 aColor;
               uniform vec3 uPosition;
               uniform mat4 uTransformMatrix;
               varying vec3 vColor;
 
               void main() {
                  vColor = aColor;
                  gl_Position = uTransformMatrix * vec4(uPosition + aPosition, 1.0);
               }
            `;
 
         var fragmentShaderSource = `
                precision mediump float;
                varying vec3 vColor;
 
                void main() {
                    gl_FragColor = vec4(vColor.rgb, 1.0);
                }
            `;
 
            var vertexShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vertexShader, vertexShaderSource);
            gl.compileShader(vertexShader);
 
            var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fragmentShader, fragmentShaderSource);
            gl.compileShader(fragmentShader);
 
            var program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);
 
         var vertexBuffer = gl.createBuffer();
         var vertices = [
        -0.5, 0.5, 0.0,
       -0.5, -0.5, 0.0,
        0.5, -0.5, 0.0,
            
            -0.5, 0.5, 0.0,
            0.5, 0.5, 0.0,
            0.5, -0.5, 0.0
            ];
         gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices),  gl.STATIC_DRAW);
 
         var colorBuffer = gl.createBuffer();
         var colors = [
            0, 0, 1,
            0, 0, 0,
            1, 1, 0,
            
            0, 1, 0,
            1, 0, 0,
            0, 1, 1
            ];
         gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
 
         var aPosition = gl.getAttribLocation(program, "aPosition");
         var uPosition = gl.getUniformLocation(program, "uPosition");
         var aColor = gl.getAttribLocation(program, "aColor");
 
         gl.useProgram(program);
 
         gl.uniform3fv(uPosition, [0, 0, 0]);
 
         gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
         gl.enableVertexAttribArray(aColor);
         gl.vertexAttribPointer(aColor, 3, gl.FLOAT, false, 0, 0);
      
         gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
         gl.enableVertexAttribArray(aPosition);
         gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0);
 
         var angle = 0.0; 
         var uAngle = gl.getUniformLocation(program, "uTransformMatrix");
         var transformMatrix = [
                  Math.cos(angle), 0.0, Math.sin(angle), 0.0,
                  0.0, 1.0, 0.0, 0.0,
                  -Math.sin(angle), 0.0, Math.cos(angle), 0.0,
                  0.0, 0.0, 0.0, 1.0
               ];
         gl.uniformMatrix4fv(uAngle, false, new Float32Array(transformMatrix));
         
         function render() {
               gl.clearColor(0.0, 0.0, 0.0, 0.1);
               gl.clear(gl.COLOR_BUFFER_BIT);
 
               angle += 0.1; 
               gl.uniform1f(uAngle, angle); 
 
               gl.drawArrays(gl.TRIANGLES, 0, 3);
               gl.drawArrays(gl.TRIANGLES, 3, 3);
               gl.drawArrays(gl.TRIANGLES, 6, 3);
               
               window.requestAnimationFrame(render); 
         }
         
         render(); 
        }
   </script>
   </body>
</html>
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
05.03.2023, 17:12
Ответы с готовыми решениями:

Вращение фигуры вокруг своей оси
Привет,товарищи. Такое дело, есть код, который реализует вращение прямоугольника вокруг своей оси...

Вращение отрезка вокруг своего конца
Нужно чтобы каждую секунду элемент поварачивался на 27 px вправо , но задня часть должна оставаться...

Вращение круга вокруг своей оси
Здравствуйте! Мне нужно сделать так, чтобы мой круглый элемент (изображение пластинки) вращался...

Вращение равнобедренного треугольника вокруг центра экрана, и одновременно вокруг своего центра. (Turbo Pascal)
Задача в заголовке. Как вращать треугольник вокруг центра я примерно знаю (писали аналогичное для...

Вращение вокруг центра
Подскажите пожалуйста! Вот есть фигуры, они вращаются вокруг осей x, y, z. а как сделать, что бы...

0
05.03.2023, 17:12
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
05.03.2023, 17:12
Помогаю со студенческими работами здесь

Вращение прямоугольника вокруг центра
Помогите,пожалуйста. Прямоугольник нарисовала без проблем)как вращать вокруг одной из вершин знаю,...

Вращение квадрата вокруг центра
Здравствуйте! Возникла проблема с написанием программы: В приложении типа QMainWindow построить ...

Вращение прямоугольника вокруг центра.
Есть программа, которая вращает прмоугольник вокруг центра, но она для АВС. Переделываю ее под...

Вращение фигуры вокруг центра
Две фигуры - по два скрещенных прямоугольника разных цветов с размерами 100 × 40 и 80 ×...

Вращение квадрата вокруг своего центра
Может кто подсказать как вращать квадрат вокруг своего центра? 2D объект, если применяю формулу...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru