HTML5画布与Three.js WebGL缸

时间：2022-08-16 19:38:40

创建一个WebGL Three.js文件,我们可以实例化一个CylinderGeometry对象通过定义顶部和底部半径相同的值,定义高度和水平的细节通过segmentsRadius和segmentsHeight参数。增加segmentsWidth和segmentsHeight将产生一个更加完美的汽缸但可能降低性能。减少segmentsWidth segmentsHeight将产生一个不太完美的汽缸和可能有助于性能。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://www.html5canvastutorials.com/libraries/three.min.js"></script>
    <script defer="defer">
      // revolutions per second
      var angularSpeed = 0.2; 
      var lastTime = 0;

      // this function is executed on each animation frame
      function animate(){
        // update
        var time = (new Date()).getTime();
        var timeDiff = time - lastTime;
        var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
        cylinder.rotation.x += angleChange;
        lastTime = time;

        // render
        renderer.render(scene, camera);

        // request new frame
        requestAnimationFrame(function(){
            animate();
        });
      }

      // renderer
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      // camera
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
      camera.position.z = 700;

      // scene
      var scene = new THREE.Scene();

      // cylinder
      // API: THREE.CylinderGeometry(bottomRadius, topRadius, height, segmentsRadius, segmentsHeight)
      var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(100, 100, 400, 50, 50, false), new THREE.MeshNormalMaterial());
      cylinder.overdraw = true;
      scene.add(cylinder);

      // start animation
      animate();
    </script>
  </body>
</html>


标签：

相关文章