zoukankan      html  css  js  c++  java
  • Three.js基础探寻五——正二十面体、圆环面等

      除了立方体、平面、球体,Three.js还提供了很多其他几何形状。

     

    1.圆形

      CircleGeometry可以创建圆形或者扇形:

    THREE.CircleGeometry(radius, segments, thetaStart, thetaLength)

        radius:半径

        segmentsWidth:经度上的分段数

        segmentsHeight:纬度上的分段数

        thetaStart:纬度开始的弧度

        thetaLength:纬度跨过的弧度

      new THREE.CircleGeometry(3, 18, Math.PI / 3, Math.PI / 3 * 4) 创建一个在x轴和y轴所在平面的三分之二圆的扇形:

    2.圆柱体

      圆柱体(CylinderGeometry)的构造函数是:

    THREE.CylinderGeometry(radiusTop,radiusBottom,height,radiusSegments, heightSegments, openEnded)

        radiusTop:顶面半径

        radiusBottom:底面的半径

        height:圆柱体的高度

        radiusSegments:顶面与底面的分段数

        heightSegments:侧面的分段数

        openEnded:是否没有顶面和底面,布尔类型,缺省值为false,表示有顶面和底面。

      当radiusTop和radiusBottom设置为相同的值时,创建的是一个标准圆柱体:

      new THREE.CylinderGeometry(2, 2, 4, 18, 3)创建一个顶面与底面半径都为2,高度为4的圆柱体:

      当radiusTop和radiusBottom设置为不同的值时,创建的是一个圆台。new THREE.CylinderGeometry(2, 3, 4, 18, 3)将底面半径设为3:

      openEnded设置为true时创建一个没有顶面与底面的圆台,new THREE.CylinderGeometry(2, 3, 4, 18, 3, true)的效果:

    3.正四面体,正八面体,正二十面体

      正四面体(TetrahedronGeometry)、正八面体(OctahedronGeometry)、正二十面体(IcosahedronGeometry)的构造函数较为类似,分别为:

    THREE.TetrahedronGeometry(radius, detail)
    
    THREE.OctahedronGeometry(radius, detail)
    
    THREE.IcosahedronGeometry(radius, detail)

      其中,radius是半径;detail是细节层次(Level of Detail)的层数,对于大面片数模型,可以控制在视角靠近物体时,显示面片数多的精细模型,而在离物体较远时,显示面片数较少的粗略模型。这里我们不对detail多作展开,一般可以对这个值缺省。

      new THREE.TetrahedronGeometry(3)创建一个半径为3的正四面体:

      new THREE.OctahedronGeometry(3)创建一个半径为3的正八面体:

    乍一看有点像光能使者的魔法阵哈,用三维的眼光去看。

      new THREE.IcosahedronGeometry(3)创建一个半径为3的正二十面体:

    4.圆环面

      圆环面(TorusGeometry)的形状类似甜甜圈,其构造函数是:

    THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)

        radius:圆环半径

        tube:管道半径

        radialSegments:径向的分段数

        tubularSegments:管的分段数,详见下图

        arc:圆环面的弧度,缺省值为Math.PI * 2

      new THREE.TorusGeometry(3, 1, 4, 8)创建一个粗糙的圆环面:

      new THREE.TorusGeometry(3, 1, 12, 18)创建一个较为精细的圆环面:

    这个就很像甜甜圈了。

      new THREE.TorusGeometry(3, 1, 4, 8, Math.PI / 3 * 2)创建部分圆环面:

    5.圆环结

      圆环结(TorusKnotGeometry)的构造参数为:

    THREE.TorusKnotGeometry(radius,tube,radialSegments,tubularSegments, p, q, heightScale)

        radius:圆环半径

        tube:管道半径

        radialSegments:径向的分段数

        tubularSegments:管的分段数

        p:pQ:对knot(节)状方式有效,控制曲线路径缠绕的圈数,其中p决定垂直方向的参数(可缺省)

        q:水平方向的参数(可缺省)

        heightScale:z轴方向上的缩放,默认值1 

      new THREE.TorusKnotGeometry(2, 0.5, 32, 8)的效果:

      关于圆环结的详细内容可参看维基百科

     

    6.源码

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title>3.js测试五</title>
     6     </head>
     7     <body onload="init()">
     8         <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
     9     </body>
    10     <script type="text/javascript" src="js/three.min.js"></script>
    11     <script type="text/javascript">
    12         function init() {
    13             var renderer = new THREE.WebGLRenderer({
    14                 canvas: document.getElementById('mainCanvas')
    15             });
    16             renderer.setClearColor(0x000000);
    17             var scene = new THREE.Scene();
    18             
    19             // camera
    20             var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
    21             camera.position.set(25, 25, 25);
    22             camera.lookAt(new THREE.Vector3(0, 0, 0));
    23             scene.add(camera);
    24             
    25             var material = new THREE.MeshBasicMaterial({
    26                 color: 0xffff00,
    27                 wireframe: true
    28             });
    29             
    30               drawCircle(scene, material);        //圆形
    31 //            drawCylinder(scene, material);    //圆柱体
    32 //            drawTetra(scene, material);        //正四面体
    33 //            drawOcta(scene, material);        //正八面体
    34 //            drawIcosa(scene, material);        //正二十面体
    35 //            drawTorus(scene, material);        //圆环面
    36 //            drawTorusKnot(scene, material);    //圆环结
    37             
    38             // render
    39             renderer.render(scene, camera);
    40         }
    41         
    42         function drawCircle(scene, material) {
    43             var circle = new THREE.Mesh(new THREE.CircleGeometry(3, 18, Math.PI / 3, Math.PI / 3 * 4), material);
    44             scene.add(circle);
    45         }
    46         
    47         function drawCylinder(scene, material) {
    48 //          var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(2, 2, 4, 18, 3), material);
    49 //            var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(2, 3, 4, 18, 3), material);
    50               var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(2, 3, 4, 18, 3, true), material);
    51             scene.add(cylinder);
    52         }
    53         
    54         function drawTetra(scene, material) {
    55             var tetra = new THREE.Mesh(new THREE.TetrahedronGeometry(3), material);
    56             scene.add(tetra);
    57         }
    58         
    59         function drawOcta(scene, material) {
    60             var octa = new THREE.Mesh(new THREE.OctahedronGeometry(3), material);
    61             scene.add(octa);
    62         }
    63         
    64         function drawIcosa(scene, material) {
    65             var icosa = new THREE.Mesh(new THREE.IcosahedronGeometry(3), material);
    66             scene.add(icosa);
    67         }
    68         
    69         function drawTorus(scene, material) {
    70 //          var torus = new THREE.Mesh(new THREE.TorusGeometry(3, 1, 12, 18), material);
    71             var torus = new THREE.Mesh(new THREE.TorusGeometry(3, 1, 4, 8, Math.PI / 3 * 2), material);
    72             scene.add(torus);
    73         }
    74         
    75         function drawTorusKnot(scene, material) {
    76             var torus = new THREE.Mesh(new THREE.TorusKnotGeometry(2, 0.5, 32, 8), material);
    77             scene.add(torus);
    78         }
    79         
    80     </script>
    81 </html>

      整理自张雯莉《Three.js入门指南》

      其他参考:three.js源码注释(八十三)

     

      文字形状与自定义形状

  • 相关阅读:
    SpringBoot HATEOAS用法简介
    犀函
    dubbo 相关面试题 有用(转)
    想使用消息队列,先考虑下这些问题!
    appium在Mac上环境搭建
    3. SOFAJRaft源码分析— 是如何进行选举的?
    Redis相关知识
    替代微信ipad协议(转)
    c#面试题(1)(转)
    例题6-5 Boxes in a line uVa12657
  • 原文地址:https://www.cnblogs.com/xulei1992/p/5715381.html
Copyright © 2011-2022 走看看