HTML5画布WebGL，文件Three.js控制的锥

最新推荐文章于 2019-12-20 15:14:05 发布

limeiyans

最新推荐文章于 2019-12-20 15:14:05 发布

阅读量986

点赞数 1

分类专栏：文件Three.js控制的锥文章标签：文件Three.js控制的锥

本文链接：https://blog.csdn.net/limeiyans/article/details/18039351

版权

本文介绍如何利用Three.js库在HTML5画布上创建锥体。通过设置CylinderGeometry对象的参数，如顶部半径、底部半径、高度以及细分级别，可以定制锥体的形状。增加细分参数将提升图形细节，但可能影响性能；减少细分则能提高性能，但图形可能不那么平滑。

摘要由CSDN通过智能技术生成

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