javascript - 如何在此示例中添加 ondrag 鼠标事件

Question

I want a mouse drager event when i drag and move the mouse accordingly with the velocity of mouse movement it shuld rotate and slowly stop.

this html and javascript will give a cube which rotates at time interval 33

 window.onload = startDemo;
    
    
    
     
            function Point3D(x,y,z) {
                this.x = x;
                this.y = y;
                this.z = z;
     
                this.rotateX = function(angle) {
                    var rad, cosa, sina, y, z
                    rad = angle * Math.PI / 180
                    cosa = Math.cos(rad)
                    sina = Math.sin(rad)
                    y = this.y * cosa - this.z * sina
                    z = this.y * sina + this.z * cosa
                    return new Point3D(this.x, y, z)
                }
     
                this.rotateY = function(angle) {
                    var rad, cosa, sina, x, z
                    rad = angle * Math.PI / 180
                    cosa = Math.cos(rad)
                    sina = Math.sin(rad)
                    z = this.z * cosa - this.x * sina
                    x = this.z * sina + this.x * cosa
                    return new Point3D(x,this.y, z)
                }
     
                this.rotateZ = function(angle) {
                    var rad, cosa, sina, x, y
                    rad = angle * Math.PI / 180
                    cosa = Math.cos(rad)
                    sina = Math.sin(rad)
                    x = this.x * cosa - this.y * sina
                    y = this.x * sina + this.y * cosa
                    return new Point3D(x, y, this.z)
                }
     
                this.project = function(viewWidth, viewHeight, fov, viewDistance) {
                    var factor, x, y
                    factor = fov / (viewDistance + this.z)
                    x = this.x * factor + viewWidth / 2
                    y = this.y * factor + viewHeight / 2
                    return new Point3D(x, y, this.z)
                }
            }
     
            var vertices = [
                new Point3D(-1,1,-1),
                new Point3D(1,1,-1),
                new Point3D(1,-1,-1),
                new Point3D(-1,-1,-1),
                new Point3D(-1,1,1),
                new Point3D(1,1,1),
                new Point3D(1,-1,1),
                new Point3D(-1,-1,1)
            ];
     
            // Define the vertices that compose each of the 6 faces. These numbers are
            // indices to the vertex list defined above.
            var faces  = [[0,1,2,3],[1,5,6,2],[5,4,7,6],[4,0,3,7],[0,4,5,1],[3,2,6,7]];
     
            // Define the colors for each face.
            var colors = [[255,0,0],[0,255,0],[0,0,255],[255,255,0],[0,255,255],[255,0,255]];
     
            var angle = 0;
     
            /* Constructs a CSS RGB value from an array of 3 elements. */
            function arrayToRGB(arr) {
                if( arr.length == 3 ) {
                    return "rgb(" + arr[0] + "," + arr[1] + "," + arr[2] + ")";
                }
                return "rgb(0,0,0)";
            }
     
            function startDemo() {
                canvas = document.getElementById("thecanvas");
                if( canvas && canvas.getContext ) {
                    ctx = canvas.getContext("2d");
                   
                }setInterval(loop,33);
          
            }
     
            function loop() {
                var t = new Array();
     
                ctx.fillStyle = "rgb(0,0,0)";
                ctx.fillRect(0,0,400,250);
     
                for( var i = 0; i < vertices.length; i++ ) {
                    var v = vertices[i];
                    var r = v.rotateZ(angle).rotateX(angle);
                    var p = r.project(400,250,200,4);
                    t.push(p)
                }
     
                var avg_z = new Array();
     
                for( var i = 0; i < faces.length; i++ ) {
                    var f = faces[i];
                    avg_z[i] = {"index":i, "z":(t[f[0]].z + t[f[1]].z + t[f[2]].z + t[f[3]].z) / 4.0};
                }
     
                avg_z.sort(function(a,b) {
                    return b.z - a.z;
                });
     
                for( var i = 0; i < faces.length; i++ ) {
                    var f = faces[avg_z[i].index]
     
                    ctx.fillStyle = arrayToRGB(colors[avg_z[i].index]);
                    ctx.beginPath()
                    ctx.moveTo(t[f[0]].x,t[f[0]].y)
                    ctx.lineTo(t[f[1]].x,t[f[1]].y)
                    ctx.lineTo(t[f[2]].x,t[f[2]].y)
                    ctx.lineTo(t[f[3]].x,t[f[3]].y)
                    ctx.closePath()
                    ctx.fill()
                }
                angle += 2
            }

<!DOCTYPE html>
    <html>
    <head>
        <title>HTML5 Experiment: A Rotating Solid Cube</title>
		 </head>
    <body>
            <canvas id="thecanvas" width="500" height="250">
            Your brows<a href=#>Click here</a> to watch the video.
        </canvas>
     
        </body>
    </html>

请帮我写这段代码

Answer 1

你可以使用

onmouseover 

点击链接，您就会明白。

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover

试试这个代码

<!doctype html>
<html>
   <body>
      <canvas width = "570" height = "570" id = "my_Canvas"></canvas>

      <script>

         /*============= Creating a canvas ======================*/
         var canvas = document.getElementById('my_Canvas');
         gl = canvas.getContext('experimental-webgl');

         /*========== Defining and storing the geometry ==========*/

         var vertices = [
            -1,-1,-1, 1,-1,-1, 1, 1,-1, -1, 1,-1,
            -1,-1, 1, 1,-1, 1, 1, 1, 1, -1, 1, 1,
            -1,-1,-1, -1, 1,-1, -1, 1, 1, -1,-1, 1,
            1,-1,-1, 1, 1,-1, 1, 1, 1, 1,-1, 1,
            -1,-1,-1, -1,-1, 1, 1,-1, 1, 1,-1,-1,
            -1, 1,-1, -1, 1, 1, 1, 1, 1, 1, 1,-1, 
         ];

         var colors = [
            5,3,7, 5,3,7, 5,3,7, 5,3,7,
            1,1,3, 1,1,3, 1,1,3, 1,1,3,
            0,0,1, 0,0,1, 0,0,1, 0,0,1,
            1,0,0, 1,0,0, 1,0,0, 1,0,0,
            1,1,0, 1,1,0, 1,1,0, 1,1,0,
            0,1,0, 0,1,0, 0,1,0, 0,1,0 
         ];

         var indices = [
            0,1,2, 0,2,3, 4,5,6, 4,6,7,
            8,9,10, 8,10,11, 12,13,14, 12,14,15,
            16,17,18, 16,18,19, 20,21,22, 20,22,23 
         ];

         // Create and store data into vertex buffer
         var vertex_buffer = gl.createBuffer ();
         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

         // Create and store data into color buffer
         var color_buffer = gl.createBuffer ();
         gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

         // Create and store data into index buffer
         var index_buffer = gl.createBuffer ();
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
         gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

         /*=================== SHADERS =================== */

         var vertCode = 'attribute vec3 position;'+
            'uniform mat4 Pmatrix;'+
            'uniform mat4 Vmatrix;'+
            'uniform mat4 Mmatrix;'+
            'attribute vec3 color;'+//the color of the point
            'varying vec3 vColor;'+
            'void main(void) { '+//pre-built function
               'gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(position, 1.);'+
               'vColor = color;'+
            '}';

         var fragCode = 'precision mediump float;'+
            'varying vec3 vColor;'+
            'void main(void) {'+
               'gl_FragColor = vec4(vColor, 1.);'+
            '}';

         var vertShader = gl.createShader(gl.VERTEX_SHADER);
         gl.shaderSource(vertShader, vertCode);
         gl.compileShader(vertShader);

         var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
         gl.shaderSource(fragShader, fragCode);
         gl.compileShader(fragShader);

         var shaderprogram = gl.createProgram();
         gl.attachShader(shaderprogram, vertShader);
         gl.attachShader(shaderprogram, fragShader);
         gl.linkProgram(shaderprogram);

         /*======== Associating attributes to vertex shader =====*/
         var _Pmatrix = gl.getUniformLocation(shaderprogram, "Pmatrix");
         var _Vmatrix = gl.getUniformLocation(shaderprogram, "Vmatrix");
         var _Mmatrix = gl.getUniformLocation(shaderprogram, "Mmatrix");

         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
         var _position = gl.getAttribLocation(shaderprogram, "position");
         gl.vertexAttribPointer(_position, 3, gl.FLOAT, false,0,0);
         gl.enableVertexAttribArray(_position);

         gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
         var _color = gl.getAttribLocation(shaderprogram, "color");
         gl.vertexAttribPointer(_color, 3, gl.FLOAT, false,0,0) ;
         gl.enableVertexAttribArray(_color);
         gl.useProgram(shaderprogram);

         /*==================== MATRIX ====================== */

         function get_projection(angle, a, zMin, zMax) {
            var ang = Math.tan((angle*.5)*Math.PI/180);//angle*.5
            return [
               0.5/ang, 0 , 0, 0,
               0, 0.5*a/ang, 0, 0,
               0, 0, -(zMax+zMin)/(zMax-zMin), -1,
               0, 0, (-2*zMax*zMin)/(zMax-zMin), 0 
               ];
         }

         var proj_matrix = get_projection(40, canvas.width/canvas.height, 1, 100);
         var mo_matrix = [ 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 ];
         var view_matrix = [ 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 ];

         view_matrix[14] = view_matrix[14]-6;

         /*================= Mouse events ======================*/

         var AMORTIZATION = 0.95;
         var drag = false;
         var old_x, old_y;
         var dX = 0, dY = 0;

         var mouseDown = function(e) {
            drag = true;
            old_x = e.pageX, old_y = e.pageY;
            e.preventDefault();
            return false;
         };

         var mouseUp = function(e){
            drag = false;
         };

         var mouseMove = function(e) {
            if (!drag) return false;
            dX = (e.pageX-old_x)*2*Math.PI/canvas.width,
            dY = (e.pageY-old_y)*2*Math.PI/canvas.height;
            THETA+= dX;
            PHI+=dY;
            old_x = e.pageX, old_y = e.pageY;
            e.preventDefault();
         };

         canvas.addEventListener("mousedown", mouseDown, false);
         canvas.addEventListener("mouseup", mouseUp, false);
         canvas.addEventListener("mouseout", mouseUp, false);
         canvas.addEventListener("mousemove", mouseMove, false);

         /*=========================rotation================*/

         function rotateX(m, angle) {
            var c = Math.cos(angle);
            var s = Math.sin(angle);
            var mv1 = m[1], mv5 = m[5], mv9 = m[9];

            m[1] = m[1]*c-m[2]*s;
            m[5] = m[5]*c-m[6]*s;
            m[9] = m[9]*c-m[10]*s;

            m[2] = m[2]*c+mv1*s;
            m[6] = m[6]*c+mv5*s;
            m[10] = m[10]*c+mv9*s;
         }

         function rotateY(m, angle) {
            var c = Math.cos(angle);
            var s = Math.sin(angle);
            var mv0 = m[0], mv4 = m[4], mv8 = m[8];

            m[0] = c*m[0]+s*m[2];
            m[4] = c*m[4]+s*m[6];
            m[8] = c*m[8]+s*m[10];

            m[2] = c*m[2]-s*mv0;
            m[6] = c*m[6]-s*mv4;
            m[10] = c*m[10]-s*mv8;
         }

         /*=================== Drawing =================== */

         var THETA = 0,
         PHI = 0;
         var time_old = 0;

         var animate = function(time) {
            var dt = time-time_old;

            if (!drag) {
               dX *= AMORTIZATION, dY*=AMORTIZATION;
               THETA+=dX, PHI+=dY;
            }

            //set model matrix to I4

            mo_matrix[0] = 1, mo_matrix[1] = 0, mo_matrix[2] = 0,
            mo_matrix[3] = 0,

            mo_matrix[4] = 0, mo_matrix[5] = 1, mo_matrix[6] = 0,
            mo_matrix[7] = 0,

            mo_matrix[8] = 0, mo_matrix[9] = 0, mo_matrix[10] = 1,
            mo_matrix[11] = 0,

            mo_matrix[12] = 0, mo_matrix[13] = 0, mo_matrix[14] = 0,
            mo_matrix[15] = 1;

            rotateY(mo_matrix, THETA);
            rotateX(mo_matrix, PHI);

            time_old = time; 
            gl.enable(gl.DEPTH_TEST);

            // gl.depthFunc(gl.LEQUAL);

            gl.clearColor(0.5, 0.5, 0.5, 0.9);
            gl.clearDepth(1.0);
            gl.viewport(0.0, 0.0, canvas.width, canvas.height);
            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

            gl.uniformMatrix4fv(_Pmatrix, false, proj_matrix);
            gl.uniformMatrix4fv(_Vmatrix, false, view_matrix);
            gl.uniformMatrix4fv(_Mmatrix, false, mo_matrix);

            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
            gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

            window.requestAnimationFrame(animate);
         }

         animate(0);

      </script>

   </body>
</html>