Форум программистов, компьютерный форум, киберфорум
Наши страницы

JavaScript: HTML5 Canvas

Войти
Регистрация
Восстановить пароль
 
helenka22
0 / 0 / 0
Регистрация: 11.05.2017
Сообщений: 8
#1

Вращение квадрата вокруг оси Z при перемещении мышки влево и вправо - HTML5 Canvas

10.12.2017, 21:22. Просмотров 188. Ответов 1
Метки нет (Все метки)

Помогите, пожалуйста !!! Есть нарисован белый квадрат. Нужно при щелчке мыши, чтобы он вокруг оси Z вертелся. Ниже приведен сам листинг и результат. Очень нужно! Кому не трудно подскажите как это сделать. А то я запуталась немного.
HTML5
1
2
3
4
5
6
7
8
<html>  
     <head>  
         <script src="draw.js" type="text/javascript"> </script>   
     </head>  
     <body onload="onLoad();">
         <canvas id="webgl"  width="500" height="500"></canvas>  
     </body>  
</html>

Javascript
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
function onLoad() {  
              var canvas = document.getElementById("webgl");
              var gl = initWebGL(canvas);
              initViewport(gl, canvas);             
              initShader(gl);
              initMatrices();
              var model = createModel(gl);
              draw(gl, model);
             }
function initWebGL(canvas) {
    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
        return gl; 
    }  
function initViewport(gl, canvas) {
            gl.viewport(0, 0, canvas.width, canvas.height);
            }
 
var shaderProgram, shaderVertexPositionAttribute, shaderProjectionMatrixUniform, shaderModelViewMatrixUniform;
function initShader(gl) {
  var fragmentShader = createShader(gl, fragmentShaderSource, "fragment");
  var vertexShader = createShader(gl, vertexShaderSource, "vertex");
  shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);
  gl.linkProgram(shaderProgram);
  shaderVertexPositionAttribute = gl.getAttribLocation(shaderProgram, "vertexPos");
  gl.enableVertexAttribArray(shaderVertexPositionAttribute);
  shaderProjectionMatrixUniform = gl.getUniformLocation(shaderProgram, "projectionMatrix");
  shaderModelViewMatrixUniform = gl.getUniformLocation(shaderProgram, "modelViewMatrix");
  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
      alert("Could not initialise shaders");
    }
}
function createShader(gl, str, type) {
   var shader;
   if (type == "fragment") {
       shader = gl.createShader(gl.FRAGMENT_SHADER);
       } 
       else if (type == "vertex") {
          shader = gl.createShader(gl.VERTEX_SHADER);
       } else {
          return null;
          }
    gl.shaderSource(shader, str);
    gl.compileShader(shader);
       if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
         alert(gl.getShaderInfoLog(shader));
         return null;
       }
   return shader;
}
 
function initMatrices()
{
   modelViewMatrix = new Float32Array(
     [1, 0, 0, 0,
      0, 1, 0, 0, 
      0, 0, 1, 0, 
      0, 0, -5, 1]);
   projectionMatrix = new Float32Array(
     [1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 0, 0, 
      0, 0, 0, 1]);  
}
 
function createModel(gl) {
       var vertexBuffer;
       vertexBuffer = gl.createBuffer();
       gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
       var verts = [                      //              |Y
                    .5, .5, 0.0,          //1          2  |  1
                    -.5, .5, 0.0,         //2        -----|-----X
                    .5, -.5, 0.0,         //3          4  |  3
                    -.5, -.5, 0.0         //4             |
                    ];
       gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);
       var square = {buffer:vertexBuffer, vertSize:3, nVerts:4, primtype:gl.TRIANGLE_STRIP};
       return square;
    }
 
function draw(gl, obj) {
   gl.clearColor(0.0, 0.0, 0.0, 1.0);
   gl.clear(gl.COLOR_BUFFER_BIT);
   gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer);
   gl.useProgram(shaderProgram);
 gl.vertexAttribPointer(shaderVertexPositionAttribute, obj.vertSize, gl.FLOAT, false, 0, 0);
   gl.uniformMatrix4fv(shaderProjectionMatrixUniform,false, projectionMatrix);
   gl.uniformMatrix4fv(shaderModelViewMatrixUniform,false, modelViewMatrix);
   gl.drawArrays(obj.primtype, 0, obj.nVerts);
}
     
var vertexShaderSource = 
" attribute vec3 vertexPos;\n" +
" uniform mat4 modelViewMatrix;\n" +
" uniform mat4 projectionMatrix;\n" +
" void main(void) {\n" + 
"gl_Position = projectionMatrix * modelViewMatrix * vec4(vertexPos, 1.0);\n" +
" }\n";
 
var fragmentShaderSource = 
" void main(void) {\n" + 
" gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n" +
"}\n";
Результат:
Вложение 891321
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
10.12.2017, 21:22
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Вращение квадрата вокруг оси Z при перемещении мышки влево и вправо (HTML5 Canvas):

Движения квадрата влево и вправо - JavaScript
Добрый вечер, вновь требуется помощь. есть квадрат который я дивом сделал, есть еще кнопка вправо и кнопка влево. нужно чтобы при нажатии...

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

не сдвигает картинку при нажатии вправо или влево - JavaScript
Привет ребята, помогите пожалуйста найти ошибку, уже 3 часа голову ломаю не могу сделать, вот скрипт: &lt;html&gt; &lt;head&gt; &lt;meta...

не сдвигает картинку при нажатии вправо или влево - JavaScript
Привет ребята, помогите пожалуйста найти ошибку, уже 3 часа голову ломаю не могу сделать, вот скрипт: &lt;html&gt; &lt;head&gt; &lt;meta...

Как сделать, чтоб глобус при клике вращался вокруг указателя мышки? - JavaScript
Как сделать, чтоб глобус при клике вращался вокруг указателя мышки? Написала код, но все &quot;ломается&quot; при следующем же клике - глобус...

Вращение квадрата при нажатии на его угол и его перемещение при нажатии на него (Canvas) - HTML5 Canvas
Добрый день, я столкнулся с такой проблемой, мне нужно сделать реализацию вращения квадрата при нажатии на его угол и его перемещение при...

1
8Observer8
1831 / 1158 / 153
Регистрация: 05.10.2013
Сообщений: 3,789
Записей в блоге: 55
15.12.2017, 10:49 #2
helenka22, вращение квадрата: Небольшие примеры на WebGL
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
15.12.2017, 10:49
Привет! Вот еще темы с ответами:

JS вращение квадрата - JavaScript
Доброе время суток! Я только начинаю изучать JS. Помогите решить задачу. Нужно сделать PageTransitions только который работает как...

Three.js Вращение по оси - HTML5 Canvas
Использую последнюю версию библиотеки three.js. Сделал сферу, которая вращается по оси. Но она оставляет непонятный след на второй...

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

На странице слева раздвигающийся влево\вправо лифт как в файле справки - JavaScript
Здравствуйте как сделать? Добавлено через 11 часов 42 минуты вот здесь http://jsfiddle.net/ZZszj/23/ &lt;ul&gt; ...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.