Fatal编程技术网
  • webgl/
  • Webgl 如何将对象动态添加到场景中？

Webgl 如何将对象动态添加到场景中？

webgl

Webgl 如何将对象动态添加到场景中？,webgl,Webgl,我必须写一个程序，我应该能够在其中点击一个按钮添加立方体，将有尽可能多的立方体，我想加入到场景中。我必须能够选择其中任何一个并四处移动。我设法创建了一个硬编码的立方体，并对其进行缩放和平移 <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Lab 0</title> <script id="vertex-shader"

我必须写一个程序，我应该能够在其中点击一个按钮添加立方体，将有尽可能多的立方体，我想加入到场景中。我必须能够选择其中任何一个并四处移动。我设法创建了一个硬编码的立方体，并对其进行缩放和平移

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Lab 0</title>

  <script id="vertex-shader" type="x-shader/x-vertex">

    attribute  vec4 vPosition;
    attribute  vec4 vColors;
    varying vec4 fragColor;

    uniform vec3 theta;
    uniform float coeff;
    uniform vec3 trCoeff;

    uniform mat4 modelView;
    uniform mat4 projection;

    vec3 angles = radians( theta );
    void main() {

      vec3 angles = radians( theta );
      vec3 c = cos( angles );
      vec3 s = sin( angles );

      // Remeber: thse matrices are column-major
      mat4 rx = mat4( 1.0,  0.0,  0.0, 0.0,
      0.0,  c.x,  s.x, 0.0,
      0.0, -s.x,  c.x, 0.0,
      0.0,  0.0,  0.0, 1.0 );

  mat4 ry = mat4( c.y, 0.0, -s.y, 0.0,
      0.0, 1.0,  0.0, 0.0,
      s.y, 0.0,  c.y, 0.0,
      0.0, 0.0,  0.0, 1.0 );


  mat4 rz = mat4( c.z, s.z, 0.0, 0.0,
      -s.z,  c.z, 0.0, 0.0,
      0.0,  0.0, 1.0, 0.0,
      0.0,  0.0, 0.0, 1.0 );

  mat4 sc = mat4(
    coeff, 0, 0, 0,
    0, coeff, 0, 0,
    0, 0, coeff, 0,
    0, 0, 0, 1
  );

  mat4 tr = mat4(
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    trCoeff.x, trCoeff.y, trCoeff.z, 1
  );

    fragColor = vColors;
    //projection * modelView *
    gl_Position =  tr * rz * ry * rx * sc * vPosition;
    }
  </script>

  <script id="fragment-shader" type="x-shader/x-fragment">
    precision mediump float;
    varying vec4 fragColor;

    void main() {
      gl_FragColor = vec4(fragColor);
    }
  </script>

  <script type="text/javascript" src="webgl-utils.js"></script>
  <script type="text/javascript" src="initShaders.js"></script>
  <script type="text/javascript" src="MV.js"></script>
  <script type="text/javascript" src="shape0.js"></script>
</head>

<body>
  <canvas id="gl-canvas" width="512" height="512">
    Oops ... your browser doesn't support the HTML5 canvas element
  </canvas>
</body>
<p> </p>
<button id="xButton">Rotate X</button>
<button id="yButton">Rotate Y</button>
<button id="zButton">Rotate Z</button>
<button id="stopButton">Stop Fucking Rotation</button>
<p> </p>

<button id="sUpButton">Scale Up</button>
<button id="sDownButton">Scale Down</button>
<p> </p>

<button id="leftButton">Left</button>
<button id="rightButton">Right</button>
<button id="upButton">Up</button>
<button id="downButton">Down</button>
<button id="closeButton">Closer</button>
<button id="furtherButton">Further</button>

<p> </p>
<button id="Button1">Increase Z</button>
<button id="Button2">Decrease Z</button>
<button id="Button3">Increase R</button>
<button id="Button4">Decrease R</button>

<p> </p>
<button id="Button5">Increase theta</button>
<button id="Button6">Decrease theta</button>
<button id="Button7">Increase phi</button>
<button id="Button8">Decrease phi</button>
<p> </p>

</html>
我试图创建一个类多维数据集，调用初始化并将其作为对象的一部分呈现，但没有按预期工作。下面是一个立方体及其变换的工作示例。请注意，只需进行缩放和转换工作

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Lab 0</title>

  <script id="vertex-shader" type="x-shader/x-vertex">

    attribute  vec4 vPosition;
    attribute  vec4 vColors;
    varying vec4 fragColor;

    uniform vec3 theta;
    uniform float coeff;
    uniform vec3 trCoeff;

    uniform mat4 modelView;
    uniform mat4 projection;

    vec3 angles = radians( theta );
    void main() {

      vec3 angles = radians( theta );
      vec3 c = cos( angles );
      vec3 s = sin( angles );

      // Remeber: thse matrices are column-major
      mat4 rx = mat4( 1.0,  0.0,  0.0, 0.0,
      0.0,  c.x,  s.x, 0.0,
      0.0, -s.x,  c.x, 0.0,
      0.0,  0.0,  0.0, 1.0 );

  mat4 ry = mat4( c.y, 0.0, -s.y, 0.0,
      0.0, 1.0,  0.0, 0.0,
      s.y, 0.0,  c.y, 0.0,
      0.0, 0.0,  0.0, 1.0 );


  mat4 rz = mat4( c.z, s.z, 0.0, 0.0,
      -s.z,  c.z, 0.0, 0.0,
      0.0,  0.0, 1.0, 0.0,
      0.0,  0.0, 0.0, 1.0 );

  mat4 sc = mat4(
    coeff, 0, 0, 0,
    0, coeff, 0, 0,
    0, 0, coeff, 0,
    0, 0, 0, 1
  );

  mat4 tr = mat4(
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    trCoeff.x, trCoeff.y, trCoeff.z, 1
  );

    fragColor = vColors;
    //projection * modelView *
    gl_Position =  tr * rz * ry * rx * sc * vPosition;
    }
  </script>

  <script id="fragment-shader" type="x-shader/x-fragment">
    precision mediump float;
    varying vec4 fragColor;

    void main() {
      gl_FragColor = vec4(fragColor);
    }
  </script>

  <script type="text/javascript" src="webgl-utils.js"></script>
  <script type="text/javascript" src="initShaders.js"></script>
  <script type="text/javascript" src="MV.js"></script>
  <script type="text/javascript" src="shape0.js"></script>
</head>

<body>
  <canvas id="gl-canvas" width="512" height="512">
    Oops ... your browser doesn't support the HTML5 canvas element
  </canvas>
</body>
<p> </p>
<button id="xButton">Rotate X</button>
<button id="yButton">Rotate Y</button>
<button id="zButton">Rotate Z</button>
<button id="stopButton">Stop Fucking Rotation</button>
<p> </p>

<button id="sUpButton">Scale Up</button>
<button id="sDownButton">Scale Down</button>
<p> </p>

<button id="leftButton">Left</button>
<button id="rightButton">Right</button>
<button id="upButton">Up</button>
<button id="downButton">Down</button>
<button id="closeButton">Closer</button>
<button id="furtherButton">Further</button>

<p> </p>
<button id="Button1">Increase Z</button>
<button id="Button2">Decrease Z</button>
<button id="Button3">Increase R</button>
<button id="Button4">Decrease R</button>

<p> </p>
<button id="Button5">Increase theta</button>
<button id="Button6">Decrease theta</button>
<button id="Button7">Increase phi</button>
<button id="Button8">Decrease phi</button>
<p> </p>

</html>
HTML: 

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Lab 0</title>

  <script id="vertex-shader" type="x-shader/x-vertex">

    attribute  vec4 vPosition;
    attribute  vec4 vColors;
    varying vec4 fragColor;

    uniform vec3 theta;
    uniform float coeff;
    uniform vec3 trCoeff;

    uniform mat4 modelView;
    uniform mat4 projection;

    vec3 angles = radians( theta );
    void main() {

      vec3 angles = radians( theta );
      vec3 c = cos( angles );
      vec3 s = sin( angles );

      // Remeber: thse matrices are column-major
      mat4 rx = mat4( 1.0,  0.0,  0.0, 0.0,
      0.0,  c.x,  s.x, 0.0,
      0.0, -s.x,  c.x, 0.0,
      0.0,  0.0,  0.0, 1.0 );

  mat4 ry = mat4( c.y, 0.0, -s.y, 0.0,
      0.0, 1.0,  0.0, 0.0,
      s.y, 0.0,  c.y, 0.0,
      0.0, 0.0,  0.0, 1.0 );


  mat4 rz = mat4( c.z, s.z, 0.0, 0.0,
      -s.z,  c.z, 0.0, 0.0,
      0.0,  0.0, 1.0, 0.0,
      0.0,  0.0, 0.0, 1.0 );

  mat4 sc = mat4(
    coeff, 0, 0, 0,
    0, coeff, 0, 0,
    0, 0, coeff, 0,
    0, 0, 0, 1
  );

  mat4 tr = mat4(
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    trCoeff.x, trCoeff.y, trCoeff.z, 1
  );

    fragColor = vColors;
    //projection * modelView *
    gl_Position =  tr * rz * ry * rx * sc * vPosition;
    }
  </script>

  <script id="fragment-shader" type="x-shader/x-fragment">
    precision mediump float;
    varying vec4 fragColor;

    void main() {
      gl_FragColor = vec4(fragColor);
    }
  </script>

  <script type="text/javascript" src="webgl-utils.js"></script>
  <script type="text/javascript" src="initShaders.js"></script>
  <script type="text/javascript" src="MV.js"></script>
  <script type="text/javascript" src="shape0.js"></script>
</head>

<body>
  <canvas id="gl-canvas" width="512" height="512">
    Oops ... your browser doesn't support the HTML5 canvas element
  </canvas>
</body>
<p> </p>
<button id="xButton">Rotate X</button>
<button id="yButton">Rotate Y</button>
<button id="zButton">Rotate Z</button>
<button id="stopButton">Stop Fucking Rotation</button>
<p> </p>

<button id="sUpButton">Scale Up</button>
<button id="sDownButton">Scale Down</button>
<p> </p>

<button id="leftButton">Left</button>
<button id="rightButton">Right</button>
<button id="upButton">Up</button>
<button id="downButton">Down</button>
<button id="closeButton">Closer</button>
<button id="furtherButton">Further</button>

<p> </p>
<button id="Button1">Increase Z</button>
<button id="Button2">Decrease Z</button>
<button id="Button3">Increase R</button>
<button id="Button4">Decrease R</button>

<p> </p>
<button id="Button5">Increase theta</button>
<button id="Button6">Decrease theta</button>
<button id="Button7">Increase phi</button>
<button id="Button8">Decrease phi</button>
<p> </p>

</html>
我希望能够添加无限多的对象，或者直到场景的内存用完，然后一次对一个对象应用变换。

WebGL只绘制像素。它没有场景和对象的概念。所有这些都完全取决于你。如何表示对象以及如何表示场景完全取决于您。一个例子

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Lab 0</title>

  <script id="vertex-shader" type="x-shader/x-vertex">

    attribute  vec4 vPosition;
    attribute  vec4 vColors;
    varying vec4 fragColor;

    uniform vec3 theta;
    uniform float coeff;
    uniform vec3 trCoeff;

    uniform mat4 modelView;
    uniform mat4 projection;

    vec3 angles = radians( theta );
    void main() {

      vec3 angles = radians( theta );
      vec3 c = cos( angles );
      vec3 s = sin( angles );

      // Remeber: thse matrices are column-major
      mat4 rx = mat4( 1.0,  0.0,  0.0, 0.0,
      0.0,  c.x,  s.x, 0.0,
      0.0, -s.x,  c.x, 0.0,
      0.0,  0.0,  0.0, 1.0 );

  mat4 ry = mat4( c.y, 0.0, -s.y, 0.0,
      0.0, 1.0,  0.0, 0.0,
      s.y, 0.0,  c.y, 0.0,
      0.0, 0.0,  0.0, 1.0 );


  mat4 rz = mat4( c.z, s.z, 0.0, 0.0,
      -s.z,  c.z, 0.0, 0.0,
      0.0,  0.0, 1.0, 0.0,
      0.0,  0.0, 0.0, 1.0 );

  mat4 sc = mat4(
    coeff, 0, 0, 0,
    0, coeff, 0, 0,
    0, 0, coeff, 0,
    0, 0, 0, 1
  );

  mat4 tr = mat4(
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    trCoeff.x, trCoeff.y, trCoeff.z, 1
  );

    fragColor = vColors;
    //projection * modelView *
    gl_Position =  tr * rz * ry * rx * sc * vPosition;
    }
  </script>

  <script id="fragment-shader" type="x-shader/x-fragment">
    precision mediump float;
    varying vec4 fragColor;

    void main() {
      gl_FragColor = vec4(fragColor);
    }
  </script>

  <script type="text/javascript" src="webgl-utils.js"></script>
  <script type="text/javascript" src="initShaders.js"></script>
  <script type="text/javascript" src="MV.js"></script>
  <script type="text/javascript" src="shape0.js"></script>
</head>

<body>
  <canvas id="gl-canvas" width="512" height="512">
    Oops ... your browser doesn't support the HTML5 canvas element
  </canvas>
</body>
<p> </p>
<button id="xButton">Rotate X</button>
<button id="yButton">Rotate Y</button>
<button id="zButton">Rotate Z</button>
<button id="stopButton">Stop Fucking Rotation</button>
<p> </p>

<button id="sUpButton">Scale Up</button>
<button id="sDownButton">Scale Down</button>
<p> </p>

<button id="leftButton">Left</button>
<button id="rightButton">Right</button>
<button id="upButton">Up</button>
<button id="downButton">Down</button>
<button id="closeButton">Closer</button>
<button id="furtherButton">Further</button>

<p> </p>
<button id="Button1">Increase Z</button>
<button id="Button2">Decrease Z</button>
<button id="Button3">Increase R</button>
<button id="Button4">Decrease R</button>

<p> </p>
<button id="Button5">Increase theta</button>
<button id="Button6">Decrease theta</button>
<button id="Button7">Increase phi</button>
<button id="Button8">Decrease phi</button>
<p> </p>

</html>

const scene = [];

function addNewObjectToScene() {
  const obj = {
     x: Math.random() * 400,
     y: Math.random() * 400,
  }; 
  scene.push(obj);
}
现在添加一个按钮或计时器或任何你想调用addNewObjectToScene的东西

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Lab 0</title>

  <script id="vertex-shader" type="x-shader/x-vertex">

    attribute  vec4 vPosition;
    attribute  vec4 vColors;
    varying vec4 fragColor;

    uniform vec3 theta;
    uniform float coeff;
    uniform vec3 trCoeff;

    uniform mat4 modelView;
    uniform mat4 projection;

    vec3 angles = radians( theta );
    void main() {

      vec3 angles = radians( theta );
      vec3 c = cos( angles );
      vec3 s = sin( angles );

      // Remeber: thse matrices are column-major
      mat4 rx = mat4( 1.0,  0.0,  0.0, 0.0,
      0.0,  c.x,  s.x, 0.0,
      0.0, -s.x,  c.x, 0.0,
      0.0,  0.0,  0.0, 1.0 );

  mat4 ry = mat4( c.y, 0.0, -s.y, 0.0,
      0.0, 1.0,  0.0, 0.0,
      s.y, 0.0,  c.y, 0.0,
      0.0, 0.0,  0.0, 1.0 );


  mat4 rz = mat4( c.z, s.z, 0.0, 0.0,
      -s.z,  c.z, 0.0, 0.0,
      0.0,  0.0, 1.0, 0.0,
      0.0,  0.0, 0.0, 1.0 );

  mat4 sc = mat4(
    coeff, 0, 0, 0,
    0, coeff, 0, 0,
    0, 0, coeff, 0,
    0, 0, 0, 1
  );

  mat4 tr = mat4(
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    trCoeff.x, trCoeff.y, trCoeff.z, 1
  );

    fragColor = vColors;
    //projection * modelView *
    gl_Position =  tr * rz * ry * rx * sc * vPosition;
    }
  </script>

  <script id="fragment-shader" type="x-shader/x-fragment">
    precision mediump float;
    varying vec4 fragColor;

    void main() {
      gl_FragColor = vec4(fragColor);
    }
  </script>

  <script type="text/javascript" src="webgl-utils.js"></script>
  <script type="text/javascript" src="initShaders.js"></script>
  <script type="text/javascript" src="MV.js"></script>
  <script type="text/javascript" src="shape0.js"></script>
</head>

<body>
  <canvas id="gl-canvas" width="512" height="512">
    Oops ... your browser doesn't support the HTML5 canvas element
  </canvas>
</body>
<p> </p>
<button id="xButton">Rotate X</button>
<button id="yButton">Rotate Y</button>
<button id="zButton">Rotate Z</button>
<button id="stopButton">Stop Fucking Rotation</button>
<p> </p>

<button id="sUpButton">Scale Up</button>
<button id="sDownButton">Scale Down</button>
<p> </p>

<button id="leftButton">Left</button>
<button id="rightButton">Right</button>
<button id="upButton">Up</button>
<button id="downButton">Down</button>
<button id="closeButton">Closer</button>
<button id="furtherButton">Further</button>

<p> </p>
<button id="Button1">Increase Z</button>
<button id="Button2">Decrease Z</button>
<button id="Button3">Increase R</button>
<button id="Button4">Decrease R</button>

<p> </p>
<button id="Button5">Increase theta</button>
<button id="Button6">Decrease theta</button>
<button id="Button7">Increase phi</button>
<button id="Button8">Decrease phi</button>
<p> </p>

</html>
在您自己的代码中，您将拥有一个渲染或drawScene函数，该函数覆盖您的场景并绘制每个对象

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Lab 0</title>

  <script id="vertex-shader" type="x-shader/x-vertex">

    attribute  vec4 vPosition;
    attribute  vec4 vColors;
    varying vec4 fragColor;

    uniform vec3 theta;
    uniform float coeff;
    uniform vec3 trCoeff;

    uniform mat4 modelView;
    uniform mat4 projection;

    vec3 angles = radians( theta );
    void main() {

      vec3 angles = radians( theta );
      vec3 c = cos( angles );
      vec3 s = sin( angles );

      // Remeber: thse matrices are column-major
      mat4 rx = mat4( 1.0,  0.0,  0.0, 0.0,
      0.0,  c.x,  s.x, 0.0,
      0.0, -s.x,  c.x, 0.0,
      0.0,  0.0,  0.0, 1.0 );

  mat4 ry = mat4( c.y, 0.0, -s.y, 0.0,
      0.0, 1.0,  0.0, 0.0,
      s.y, 0.0,  c.y, 0.0,
      0.0, 0.0,  0.0, 1.0 );


  mat4 rz = mat4( c.z, s.z, 0.0, 0.0,
      -s.z,  c.z, 0.0, 0.0,
      0.0,  0.0, 1.0, 0.0,
      0.0,  0.0, 0.0, 1.0 );

  mat4 sc = mat4(
    coeff, 0, 0, 0,
    0, coeff, 0, 0,
    0, 0, coeff, 0,
    0, 0, 0, 1
  );

  mat4 tr = mat4(
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    trCoeff.x, trCoeff.y, trCoeff.z, 1
  );

    fragColor = vColors;
    //projection * modelView *
    gl_Position =  tr * rz * ry * rx * sc * vPosition;
    }
  </script>

  <script id="fragment-shader" type="x-shader/x-fragment">
    precision mediump float;
    varying vec4 fragColor;

    void main() {
      gl_FragColor = vec4(fragColor);
    }
  </script>

  <script type="text/javascript" src="webgl-utils.js"></script>
  <script type="text/javascript" src="initShaders.js"></script>
  <script type="text/javascript" src="MV.js"></script>
  <script type="text/javascript" src="shape0.js"></script>
</head>

<body>
  <canvas id="gl-canvas" width="512" height="512">
    Oops ... your browser doesn't support the HTML5 canvas element
  </canvas>
</body>
<p> </p>
<button id="xButton">Rotate X</button>
<button id="yButton">Rotate Y</button>
<button id="zButton">Rotate Z</button>
<button id="stopButton">Stop Fucking Rotation</button>
<p> </p>

<button id="sUpButton">Scale Up</button>
<button id="sDownButton">Scale Down</button>
<p> </p>

<button id="leftButton">Left</button>
<button id="rightButton">Right</button>
<button id="upButton">Up</button>
<button id="downButton">Down</button>
<button id="closeButton">Closer</button>
<button id="furtherButton">Further</button>

<p> </p>
<button id="Button1">Increase Z</button>
<button id="Button2">Decrease Z</button>
<button id="Button3">Increase R</button>
<button id="Button4">Decrease R</button>

<p> </p>
<button id="Button5">Increase theta</button>
<button id="Button6">Decrease theta</button>
<button id="Button7">Increase phi</button>
<button id="Button8">Decrease phi</button>
<p> </p>

</html>

function render() {
   for (const object of scene) {
     gl.useProgram(whateverShaderProgramCurrentObjectNeeds);

     // setBuffersAndAttributes for object
     // for each attribute in object
     //   gl.bindBuffer(gl.ARRAY_BUFFER, bufferForThisAttribute)
     //   gl.enableVertexAttribArray(locationForThisAttrubute);
     //   gl.vertexAttribPointer(locationForThisAttibute, other settings for this attribute)

     // set any uniforms. This is probably where you'd use x and y from the code above
     // example:
     //   gl.uniform2f(offsetUniformLocation, object.x, object.y);

     // now draw
     // gl.drawArrays or gl.drawElements with how ever many vertices are in the current object.

   }
}
如何组织场景以及对象中的内容完全取决于您。Three.js从名为Three.Object3D的对象创建场景，每个对象都包含子对象数组。这将形成一个场景图

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Lab 0</title>

  <script id="vertex-shader" type="x-shader/x-vertex">

    attribute  vec4 vPosition;
    attribute  vec4 vColors;
    varying vec4 fragColor;

    uniform vec3 theta;
    uniform float coeff;
    uniform vec3 trCoeff;

    uniform mat4 modelView;
    uniform mat4 projection;

    vec3 angles = radians( theta );
    void main() {

      vec3 angles = radians( theta );
      vec3 c = cos( angles );
      vec3 s = sin( angles );

      // Remeber: thse matrices are column-major
      mat4 rx = mat4( 1.0,  0.0,  0.0, 0.0,
      0.0,  c.x,  s.x, 0.0,
      0.0, -s.x,  c.x, 0.0,
      0.0,  0.0,  0.0, 1.0 );

  mat4 ry = mat4( c.y, 0.0, -s.y, 0.0,
      0.0, 1.0,  0.0, 0.0,
      s.y, 0.0,  c.y, 0.0,
      0.0, 0.0,  0.0, 1.0 );


  mat4 rz = mat4( c.z, s.z, 0.0, 0.0,
      -s.z,  c.z, 0.0, 0.0,
      0.0,  0.0, 1.0, 0.0,
      0.0,  0.0, 0.0, 1.0 );

  mat4 sc = mat4(
    coeff, 0, 0, 0,
    0, coeff, 0, 0,
    0, 0, coeff, 0,
    0, 0, 0, 1
  );

  mat4 tr = mat4(
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    trCoeff.x, trCoeff.y, trCoeff.z, 1
  );

    fragColor = vColors;
    //projection * modelView *
    gl_Position =  tr * rz * ry * rx * sc * vPosition;
    }
  </script>

  <script id="fragment-shader" type="x-shader/x-fragment">
    precision mediump float;
    varying vec4 fragColor;

    void main() {
      gl_FragColor = vec4(fragColor);
    }
  </script>

  <script type="text/javascript" src="webgl-utils.js"></script>
  <script type="text/javascript" src="initShaders.js"></script>
  <script type="text/javascript" src="MV.js"></script>
  <script type="text/javascript" src="shape0.js"></script>
</head>

<body>
  <canvas id="gl-canvas" width="512" height="512">
    Oops ... your browser doesn't support the HTML5 canvas element
  </canvas>
</body>
<p> </p>
<button id="xButton">Rotate X</button>
<button id="yButton">Rotate Y</button>
<button id="zButton">Rotate Z</button>
<button id="stopButton">Stop Fucking Rotation</button>
<p> </p>

<button id="sUpButton">Scale Up</button>
<button id="sDownButton">Scale Down</button>
<p> </p>

<button id="leftButton">Left</button>
<button id="rightButton">Right</button>
<button id="upButton">Up</button>
<button id="downButton">Down</button>
<button id="closeButton">Closer</button>
<button id="furtherButton">Further</button>

<p> </p>
<button id="Button1">Increase Z</button>
<button id="Button2">Decrease Z</button>
<button id="Button3">Increase R</button>
<button id="Button4">Decrease R</button>

<p> </p>
<button id="Button5">Increase theta</button>
<button id="Button6">Decrease theta</button>
<button id="Button7">Increase phi</button>
<button id="Button8">Decrease phi</button>
<p> </p>

</html>
其他应用程序做不同的事情

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Lab 0</title>

  <script id="vertex-shader" type="x-shader/x-vertex">

    attribute  vec4 vPosition;
    attribute  vec4 vColors;
    varying vec4 fragColor;

    uniform vec3 theta;
    uniform float coeff;
    uniform vec3 trCoeff;

    uniform mat4 modelView;
    uniform mat4 projection;

    vec3 angles = radians( theta );
    void main() {

      vec3 angles = radians( theta );
      vec3 c = cos( angles );
      vec3 s = sin( angles );

      // Remeber: thse matrices are column-major
      mat4 rx = mat4( 1.0,  0.0,  0.0, 0.0,
      0.0,  c.x,  s.x, 0.0,
      0.0, -s.x,  c.x, 0.0,
      0.0,  0.0,  0.0, 1.0 );

  mat4 ry = mat4( c.y, 0.0, -s.y, 0.0,
      0.0, 1.0,  0.0, 0.0,
      s.y, 0.0,  c.y, 0.0,
      0.0, 0.0,  0.0, 1.0 );


  mat4 rz = mat4( c.z, s.z, 0.0, 0.0,
      -s.z,  c.z, 0.0, 0.0,
      0.0,  0.0, 1.0, 0.0,
      0.0,  0.0, 0.0, 1.0 );

  mat4 sc = mat4(
    coeff, 0, 0, 0,
    0, coeff, 0, 0,
    0, 0, coeff, 0,
    0, 0, 0, 1
  );

  mat4 tr = mat4(
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    trCoeff.x, trCoeff.y, trCoeff.z, 1
  );

    fragColor = vColors;
    //projection * modelView *
    gl_Position =  tr * rz * ry * rx * sc * vPosition;
    }
  </script>

  <script id="fragment-shader" type="x-shader/x-fragment">
    precision mediump float;
    varying vec4 fragColor;

    void main() {
      gl_FragColor = vec4(fragColor);
    }
  </script>

  <script type="text/javascript" src="webgl-utils.js"></script>
  <script type="text/javascript" src="initShaders.js"></script>
  <script type="text/javascript" src="MV.js"></script>
  <script type="text/javascript" src="shape0.js"></script>
</head>

<body>
  <canvas id="gl-canvas" width="512" height="512">
    Oops ... your browser doesn't support the HTML5 canvas element
  </canvas>
</body>
<p> </p>
<button id="xButton">Rotate X</button>
<button id="yButton">Rotate Y</button>
<button id="zButton">Rotate Z</button>
<button id="stopButton">Stop Fucking Rotation</button>
<p> </p>

<button id="sUpButton">Scale Up</button>
<button id="sDownButton">Scale Down</button>
<p> </p>

<button id="leftButton">Left</button>
<button id="rightButton">Right</button>
<button id="upButton">Up</button>
<button id="downButton">Down</button>
<button id="closeButton">Closer</button>
<button id="furtherButton">Further</button>

<p> </p>
<button id="Button1">Increase Z</button>
<button id="Button2">Decrease Z</button>
<button id="Button3">Increase R</button>
<button id="Button4">Decrease R</button>

<p> </p>
<button id="Button5">Increase theta</button>
<button id="Button6">Decrease theta</button>
<button id="Button7">Increase phi</button>
<button id="Button8">Decrease phi</button>
<p> </p>

</html>
能够选择一个主题也太大了。选择是什么意思。你可以有一个HTML表单，从下拉列表中选择你想要选择的对象吗？可能有一个元素，您可以在其中键入要选择的对象的名称

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Lab 0</title>

  <script id="vertex-shader" type="x-shader/x-vertex">

    attribute  vec4 vPosition;
    attribute  vec4 vColors;
    varying vec4 fragColor;

    uniform vec3 theta;
    uniform float coeff;
    uniform vec3 trCoeff;

    uniform mat4 modelView;
    uniform mat4 projection;

    vec3 angles = radians( theta );
    void main() {

      vec3 angles = radians( theta );
      vec3 c = cos( angles );
      vec3 s = sin( angles );

      // Remeber: thse matrices are column-major
      mat4 rx = mat4( 1.0,  0.0,  0.0, 0.0,
      0.0,  c.x,  s.x, 0.0,
      0.0, -s.x,  c.x, 0.0,
      0.0,  0.0,  0.0, 1.0 );

  mat4 ry = mat4( c.y, 0.0, -s.y, 0.0,
      0.0, 1.0,  0.0, 0.0,
      s.y, 0.0,  c.y, 0.0,
      0.0, 0.0,  0.0, 1.0 );


  mat4 rz = mat4( c.z, s.z, 0.0, 0.0,
      -s.z,  c.z, 0.0, 0.0,
      0.0,  0.0, 1.0, 0.0,
      0.0,  0.0, 0.0, 1.0 );

  mat4 sc = mat4(
    coeff, 0, 0, 0,
    0, coeff, 0, 0,
    0, 0, coeff, 0,
    0, 0, 0, 1
  );

  mat4 tr = mat4(
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    trCoeff.x, trCoeff.y, trCoeff.z, 1
  );

    fragColor = vColors;
    //projection * modelView *
    gl_Position =  tr * rz * ry * rx * sc * vPosition;
    }
  </script>

  <script id="fragment-shader" type="x-shader/x-fragment">
    precision mediump float;
    varying vec4 fragColor;

    void main() {
      gl_FragColor = vec4(fragColor);
    }
  </script>

  <script type="text/javascript" src="webgl-utils.js"></script>
  <script type="text/javascript" src="initShaders.js"></script>
  <script type="text/javascript" src="MV.js"></script>
  <script type="text/javascript" src="shape0.js"></script>
</head>

<body>
  <canvas id="gl-canvas" width="512" height="512">
    Oops ... your browser doesn't support the HTML5 canvas element
  </canvas>
</body>
<p> </p>
<button id="xButton">Rotate X</button>
<button id="yButton">Rotate Y</button>
<button id="zButton">Rotate Z</button>
<button id="stopButton">Stop Fucking Rotation</button>
<p> </p>

<button id="sUpButton">Scale Up</button>
<button id="sDownButton">Scale Down</button>
<p> </p>

<button id="leftButton">Left</button>
<button id="rightButton">Right</button>
<button id="upButton">Up</button>
<button id="downButton">Down</button>
<button id="closeButton">Closer</button>
<button id="furtherButton">Further</button>

<p> </p>
<button id="Button1">Increase Z</button>
<button id="Button2">Decrease Z</button>
<button id="Button3">Increase R</button>
<button id="Button4">Decrease R</button>

<p> </p>
<button id="Button5">Increase theta</button>
<button id="Button6">Decrease theta</button>
<button id="Button7">Increase phi</button>
<button id="Button8">Decrease phi</button>
<p> </p>

</html>
如果你想点击对象，那么现在你已经有了一个太宽泛的话题来涵盖。可以存储每个对象的碰撞数据。您可以计算数据所生成的每个三角形的位置，并查看鼠标是否击中。您可以使用GPU拾取，使用不同的着色器以不同的颜色绘制每个对象的场景，然后查看鼠标下的像素，查看它有效地告诉您要选择的对象的颜色。但所有这些都取决于您如何创建场景

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Lab 0</title>

  <script id="vertex-shader" type="x-shader/x-vertex">

    attribute  vec4 vPosition;
    attribute  vec4 vColors;
    varying vec4 fragColor;

    uniform vec3 theta;
    uniform float coeff;
    uniform vec3 trCoeff;

    uniform mat4 modelView;
    uniform mat4 projection;

    vec3 angles = radians( theta );
    void main() {

      vec3 angles = radians( theta );
      vec3 c = cos( angles );
      vec3 s = sin( angles );

      // Remeber: thse matrices are column-major
      mat4 rx = mat4( 1.0,  0.0,  0.0, 0.0,
      0.0,  c.x,  s.x, 0.0,
      0.0, -s.x,  c.x, 0.0,
      0.0,  0.0,  0.0, 1.0 );

  mat4 ry = mat4( c.y, 0.0, -s.y, 0.0,
      0.0, 1.0,  0.0, 0.0,
      s.y, 0.0,  c.y, 0.0,
      0.0, 0.0,  0.0, 1.0 );


  mat4 rz = mat4( c.z, s.z, 0.0, 0.0,
      -s.z,  c.z, 0.0, 0.0,
      0.0,  0.0, 1.0, 0.0,
      0.0,  0.0, 0.0, 1.0 );

  mat4 sc = mat4(
    coeff, 0, 0, 0,
    0, coeff, 0, 0,
    0, 0, coeff, 0,
    0, 0, 0, 1
  );

  mat4 tr = mat4(
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    trCoeff.x, trCoeff.y, trCoeff.z, 1
  );

    fragColor = vColors;
    //projection * modelView *
    gl_Position =  tr * rz * ry * rx * sc * vPosition;
    }
  </script>

  <script id="fragment-shader" type="x-shader/x-fragment">
    precision mediump float;
    varying vec4 fragColor;

    void main() {
      gl_FragColor = vec4(fragColor);
    }
  </script>

  <script type="text/javascript" src="webgl-utils.js"></script>
  <script type="text/javascript" src="initShaders.js"></script>
  <script type="text/javascript" src="MV.js"></script>
  <script type="text/javascript" src="shape0.js"></script>
</head>

<body>
  <canvas id="gl-canvas" width="512" height="512">
    Oops ... your browser doesn't support the HTML5 canvas element
  </canvas>
</body>
<p> </p>
<button id="xButton">Rotate X</button>
<button id="yButton">Rotate Y</button>
<button id="zButton">Rotate Z</button>
<button id="stopButton">Stop Fucking Rotation</button>
<p> </p>

<button id="sUpButton">Scale Up</button>
<button id="sDownButton">Scale Down</button>
<p> </p>

<button id="leftButton">Left</button>
<button id="rightButton">Right</button>
<button id="upButton">Up</button>
<button id="downButton">Down</button>
<button id="closeButton">Closer</button>
<button id="furtherButton">Further</button>

<p> </p>
<button id="Button1">Increase Z</button>
<button id="Button2">Decrease Z</button>
<button id="Button3">Increase R</button>
<button id="Button4">Decrease R</button>

<p> </p>
<button id="Button5">Increase theta</button>
<button id="Button6">Decrease theta</button>
<button id="Button7">Increase phi</button>
<button id="Button8">Decrease phi</button>
<p> </p>

</html>
建议你继续，也许

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Lab 0</title>

  <script id="vertex-shader" type="x-shader/x-vertex">

    attribute  vec4 vPosition;
    attribute  vec4 vColors;
    varying vec4 fragColor;

    uniform vec3 theta;
    uniform float coeff;
    uniform vec3 trCoeff;

    uniform mat4 modelView;
    uniform mat4 projection;

    vec3 angles = radians( theta );
    void main() {

      vec3 angles = radians( theta );
      vec3 c = cos( angles );
      vec3 s = sin( angles );

      // Remeber: thse matrices are column-major
      mat4 rx = mat4( 1.0,  0.0,  0.0, 0.0,
      0.0,  c.x,  s.x, 0.0,
      0.0, -s.x,  c.x, 0.0,
      0.0,  0.0,  0.0, 1.0 );

  mat4 ry = mat4( c.y, 0.0, -s.y, 0.0,
      0.0, 1.0,  0.0, 0.0,
      s.y, 0.0,  c.y, 0.0,
      0.0, 0.0,  0.0, 1.0 );


  mat4 rz = mat4( c.z, s.z, 0.0, 0.0,
      -s.z,  c.z, 0.0, 0.0,
      0.0,  0.0, 1.0, 0.0,
      0.0,  0.0, 0.0, 1.0 );

  mat4 sc = mat4(
    coeff, 0, 0, 0,
    0, coeff, 0, 0,
    0, 0, coeff, 0,
    0, 0, 0, 1
  );

  mat4 tr = mat4(
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    trCoeff.x, trCoeff.y, trCoeff.z, 1
  );

    fragColor = vColors;
    //projection * modelView *
    gl_Position =  tr * rz * ry * rx * sc * vPosition;
    }
  </script>

  <script id="fragment-shader" type="x-shader/x-fragment">
    precision mediump float;
    varying vec4 fragColor;

    void main() {
      gl_FragColor = vec4(fragColor);
    }
  </script>

  <script type="text/javascript" src="webgl-utils.js"></script>
  <script type="text/javascript" src="initShaders.js"></script>
  <script type="text/javascript" src="MV.js"></script>
  <script type="text/javascript" src="shape0.js"></script>
</head>

<body>
  <canvas id="gl-canvas" width="512" height="512">
    Oops ... your browser doesn't support the HTML5 canvas element
  </canvas>
</body>
<p> </p>
<button id="xButton">Rotate X</button>
<button id="yButton">Rotate Y</button>
<button id="zButton">Rotate Z</button>
<button id="stopButton">Stop Fucking Rotation</button>
<p> </p>

<button id="sUpButton">Scale Up</button>
<button id="sDownButton">Scale Down</button>
<p> </p>

<button id="leftButton">Left</button>
<button id="rightButton">Right</button>
<button id="upButton">Up</button>
<button id="downButton">Down</button>
<button id="closeButton">Closer</button>
<button id="furtherButton">Further</button>

<p> </p>
<button id="Button1">Increase Z</button>
<button id="Button2">Decrease Z</button>
<button id="Button3">Increase R</button>
<button id="Button4">Decrease R</button>

<p> </p>
<button id="Button5">Increase theta</button>
<button id="Button6">Decrease theta</button>
<button id="Button7">Increase phi</button>
<button id="Button8">Decrease phi</button>
<p> </p>

</html>