Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript: HTML5 Canvas
Войти
Регистрация
Восстановить пароль
 
helenka22
0 / 0 / 0
Регистрация: 11.05.2017
Сообщений: 8
#1

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

10.12.2017, 21:22. Просмотров 437. Ответов 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
Ответы с готовыми решениями:

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

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

не сдвигает картинку при нажатии вправо или влево
Привет ребята, помогите пожалуйста найти ошибку, уже 3 часа голову ломаю не...

Не сдвигает картинку при нажатии вправо или влево
Привет ребята, помогите пожалуйста найти ошибку, уже 3 часа голову ломаю не...

Как сделать, чтоб глобус при клике вращался вокруг указателя мышки?
Как сделать, чтоб глобус при клике вращался вокруг указателя мышки? Написала...

1
8Observer8
2217 / 1364 / 224
Регистрация: 05.10.2013
Сообщений: 4,287
Записей в блоге: 56
15.12.2017, 10:49 #2
helenka22, вращение квадрата: Небольшие примеры на WebGL
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
15.12.2017, 10:49

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

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

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


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

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

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