HTML5画布与Three.js WebGL缸

来源：互联网发布：手机linux模拟器编辑：程序博客网时间：2024/04/27 15:04

创建一个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>

0 0