HTML5画布WebGL Three.js球体

时间：2022-08-16 19:39:10

创建一个WebGL Three.js文件,我们可以实例化一个SphereGeometry对象通过定义它的半径,segmentsWidth,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">
      // 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 = 500;

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

      // sphere
      // the first argument of THREE.SphereGeometry is the radius, the second argument is
      // the segmentsWidth, and the third argument is the segmentsHeight.  Increasing the 
      // segmentsWidth and segmentsHeight will yield a more perfect circle, but will degrade
      // rendering performance
      var sphere = new THREE.Mesh(new THREE.SphereGeometry(150, 100, 100), new THREE.MeshNormalMaterial());
      sphere.overdraw = true;
      scene.add(sphere);

      renderer.render(scene, camera);
    </script>
  </body>
</html>



标签：

相关文章