当前位置：首页 > 资讯 > 技术文档

Three.js学习之几何形状

时间：2020-08-13 20:52 编辑：来源：阅读：
扫一扫，手机访问

摘要：Three.js学习之几何形状

[b]1.立方体[/b] 　　虽然这一形状的名字叫立方体（CubeGeometry），但它其实是长方体，也就是长宽高可以设置为不同的值。其构造函数是： [code]THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments)[/code] 　　[b]width：[/b]x方向上的长度　　[b]height：[/b]y方向上的长度　　[b]depth：[/b]z方向上的长度　　[b]widthSegments：[/b]x方向上的分段数（可选，缺省值1）　　[b]heightSegments：[/b]y方向上的分段数（同上）　　[b]depthSegments：[/b]z方向上的分段数（同上）　　[b]未分段：[/b]

var material = new THREE.MeshBasicMaterial({

　　color: 0xffff00,

　　wireframe: true

});

drawCube(scene, material);

function drawCube(scene, material) {

　　var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3), material);

　　scene.add(cube);

}

[img]http://files.jb51.net/file_images/article/201608/201681105801686.png?201671105815[/img] 　　物体的默认位置是原点，对于立方体而言，是其几何中心在原点的位置。　　[b]分段：[/b]

var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3, 2, 2, 3), material);

[img]http://files.jb51.net/file_images/article/201608/201681105919002.png?201671105928[/img] 　　为什么会有这么多邪线呢？版本问题。R73版本： [img]http://files.jb51.net/file_images/article/201608/201681110002239.png?20167111011[/img] 　　注意这个[b]分段是对六个面进行分段[/b]，而不是对立方体的体素分段，因此在立方体的中间是不分段的，只有六个侧面被分段。 [b]2.平面[/b] 　　这里的平面（PlaneGeometry）其实是一个长方形，而不是数学意义上无限大小的平面。其构造函数为： [code]THREE.PlaneGeometry(width, height, widthSegments, heightSegments) [/code] 　　[b]width：[/b]x方向上的长度　　[b]height：[/b]y方向上的长度　　[b]widthSegments：[/b]x方向上的分段数（可选，缺省值1）　　[b]heightSegments：[/b]y方向上的分段数（同上）　　[b]new THREE.PlaneGeometry(2, 4);[/b]创建的平面在x轴和y轴所在平面内，效果如下： [img]http://files.jb51.net/file_images/article/201608/201681110112421.png?20167111122[/img] [b]3.球体[/b] 　　球体（SphereGeometry）的构造函数是：

THREE.SphereGeometry(radius,segmentsWidth,segmentsHeight,phiStart, phiLength, thetaStart, thetaLength)

// radius：半径

// segmentsWidth：经度上的分段数

// segmentsHeight：纬度上的分段数

// phiStart：经度开始的弧度

// phiLength：经度跨过的弧度

// thetaStart：纬度开始的弧度

// thetaLength：纬度跨过的弧度

　　[b]3.1 经纬度分段数[/b] 　　首先，我们来理解下segmentsWidth和segmentsHeight。使用var sphere = new THREE.SphereGeometry(3, 8, 6)可以创建一个半径为3，经度划分成8份，纬度划分成6份的球体，如下图所示。 [img]http://files.jb51.net/file_images/article/201608/201681110212850.png?20167111221[/img] 　　segmentsWidth相当于经度被切成了几瓣，而segmentsHeight相当于纬度被切成了几层。　　new THREE.SphereGeometry(3, 5, 4)的效果： [img]http://files.jb51.net/file_images/article/201608/201681110252224.png?2016711132[/img] 　　new THREE.SphereGeometry(3, 8, 6)的效果： [img]http://files.jb51.net/file_images/article/201608/201681110319543.png?20167111328[/img] 　　new THREE.SphereGeometry(3, 18, 12)的效果： [img]http://files.jb51.net/file_images/article/201608/201681110343081.png?20167111353[/img] 　　在图形底层的实现中，并没有曲线的概念，曲线都是由多个折线近似构成的。对于球体而言，当这两个值较大的时候，形成的多面体就可以近似看做是球体了。　　[b]3.2 经度弧度[/b] 　　[code]new THREE.SphereGeometry(3, 8, 6, Math.PI / 6, Math.PI / 3)[/code]表示起始经度为Math.PI / 6，经度跨度为Math.PI / 3。效果如下： [img]http://files.jb51.net/file_images/article/201608/201681110409313.png?20167111422[/img] 　　注意，这里segmentsWidth为8意味着对于经度从Math.PI / 6跨过Math.PI / 3的区域内划分为8块，而不是整个球体的经度划分成8块后再判断在此经度范围内的部分。　　[b]3.3 纬度弧度[/b] 　　纬度弧度同理。[code]new THREE.SphereGeometry(3, 8, 6, 0, Math.PI * 2, Math.PI / 6, Math.PI / 3)[/code]表示纬度从Math.PI / 6跨过Math.PI / 3。效果如下： [img]http://files.jb51.net/file_images/article/201608/201681110504402.png?20167111513[/img] 　　[code]new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2)[/code]的效果： [img]http://files.jb51.net/file_images/article/201608/201681110533728.png?20167111546[/img] [b]4.源码[/b]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>3.js测试四</title>
  </head>
  <body onload="init()">
    <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
  </body>
  <script type="text/javascript" src="js/three.min.js"></script>
  <script type="text/javascript">
    function init() {
      var renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById('mainCanvas')
      });
      renderer.setClearColor(0x000000);
      var scene = new THREE.Scene();
      
      // camera
      var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
      camera.position.set(25, 25, 25);
      camera.lookAt(new THREE.Vector3(0, 0, 0));
      scene.add(camera);
      
      // 材质
      var material = new THREE.MeshBasicMaterial({
        color: 0xffff00,
        wireframe: true
      });
      
      drawCube(scene, material);    //立方体
//     drawPlane(scene, material);    //平面
//     drawSphere(scene, material);  //球体
      
      // render
      renderer.render(scene, camera);
    }
    
    function drawCube(scene, material) {
      var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3, 2, 2, 3), material);
      scene.add(cube);
    }
    
    function drawPlane(scene, material) {
      var plane = new THREE.Mesh(new THREE.PlaneGeometry(2, 4), material);
      scene.add(plane);
    }
    
    function drawSphere(scene, material) {
      var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 18, 12), material);
//     var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6, Math.PI / 6, Math.PI / 3), material);
//     var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6, 0, Math.PI * 2, Math.PI / 6, Math.PI / 3), material);
//      var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2), material);
      scene.add(sphere);
    }
  </script>
</html>

以上就是Three.js学习之几何形状的全部内容，小编陆续还会更新关于Three.js的文章，请大家继续关注编程素材网。

全部评论(0)

上一篇：我的文档和QQ聊天记录备份与恢复技巧
下一篇：Three.js学习之文字形状及自定义形状

资讯排行榜
更多>>