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：p\Q:对knot(节)状方式有效,控制曲线路径缠绕的圈数，其中p决定垂直方向的参数（可缺省）

　　　　q：水平方向的参数（可缺省）

　　　　heightScale：z轴方向上的缩放，默认值1

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

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

6.源码

 <!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

             });

               drawCircle(scene, material);        //圆形

 //            drawCylinder(scene, material);    //圆柱体

 //            drawTetra(scene, material);        //正四面体

 //            drawOcta(scene, material);        //正八面体

 //            drawIcosa(scene, material);        //正二十面体

 //            drawTorus(scene, material);        //圆环面

 //            drawTorusKnot(scene, material);    //圆环结

             // render

             renderer.render(scene, camera);

         }

         function drawCircle(scene, material) {

             var circle = new THREE.Mesh(new THREE.CircleGeometry(3, 18, Math.PI / 3, Math.PI / 3 * 4), material);

             scene.add(circle);

         }

         function drawCylinder(scene, material) {

 //          var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(2, 2, 4, 18, 3), material);

 //            var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(2, 3, 4, 18, 3), material);

               var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(2, 3, 4, 18, 3, true), material);

             scene.add(cylinder);

         }

         function drawTetra(scene, material) {

             var tetra = new THREE.Mesh(new THREE.TetrahedronGeometry(3), material);

             scene.add(tetra);

         }

         function drawOcta(scene, material) {

             var octa = new THREE.Mesh(new THREE.OctahedronGeometry(3), material);

             scene.add(octa);

         }

         function drawIcosa(scene, material) {

             var icosa = new THREE.Mesh(new THREE.IcosahedronGeometry(3), material);

             scene.add(icosa);

         }

         function drawTorus(scene, material) {

 //          var torus = new THREE.Mesh(new THREE.TorusGeometry(3, 1, 12, 18), material);

             var torus = new THREE.Mesh(new THREE.TorusGeometry(3, 1, 4, 8, Math.PI / 3 * 2), material);

             scene.add(torus);

         }

         function drawTorusKnot(scene, material) {

             var torus = new THREE.Mesh(new THREE.TorusKnotGeometry(2, 0.5, 32, 8), material);

             scene.add(torus);

         }

     </script>

 </html>

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

　　其他参考：three.js源码注释（八十三）

　　文字形状与自定义形状

Three.js基础探寻五——正二十面体、圆环面等的更多相关文章

Three.js基础探寻一
1.webGL 一种网络标准,定义了一些较底层的图形接口. 2.Three.js 一个3Djs库,webGL开源框架中比较优秀的一个.除了webGL以外,Three.js还提供了基于Canvas.SV ...
Three.js基础探寻二——正交投影照相机
本篇主要介绍照相机中的正交投影照相机. 第一篇传送门:Three.js基础探寻一 1.照相机图形学中的照相机定义了三维空间到二维屏幕的投影方式. 针对投影方式照相机分为正交投影照相机和透视投影照相机 ...
Three.js基础探寻九——网格
在学习了几何形状和材质之后,我们就能使用他们来创建物体了.最常用的一种物体就是网格(Mesh),网格是由顶点.边.面等组成的物体:其他物体包括线段(Line).骨骼(Bone).粒子系统(Partic ...
Three.js基础探寻十——动画
本篇将介绍如果使用Three.js进行动态画面的渲染.此外,将会介绍一个Three.js作者写的另外一个库stat.js,用来观测每秒帧数(FPS). 1.实现动画效果 1.1 动画原理对于Thre ...
Three.js基础探寻四——立方体、平面与球体
前面简单介绍了webGL和Three.js的背景以及照相机的设定,接下来介绍一些Three.js中的几何形状. 1.立方体虽然这一形状的名字叫立方体(CubeGeometry),但它其实是长方体,也 ...
Three.js基础探寻三——透视投影照相机
本篇主要介绍Three.js照相机中的透视投影照相机. 上一篇:正交投影照相机 5.透视投影照相机构造函数透视投影照相机(Perspective Camera)的构造函数是: THREE.Persp ...
Three.js基础探寻八——法向材质与材质的纹理贴图
4.法向材质法向材质可以将材质的颜色设置为其法向量的方向,有时候对于调试很有帮助. 法向材质的设定很简单,甚至不用设置任何参数: new THREE.MeshNormalMaterial() 材质的 ...
Three.js基础探寻七——Lamber材质与Phong材质
材质(Material)是独立于物体顶点信息之外的与渲染效果相关的属性.通过设置材质可以改变物体的颜色.纹理贴图.光照模式等. 本篇将介绍基本材质以及两种基于光照模型的材质(Lamber与Phong) ...
Three.js基础探寻六——文字形状与自定义形状
1.文字形状说起3d文字想起了早年word里的一些艺术字: 时间真快. 那么TextGeometry可以用来创建三维的文字形状. 使用文字形状需要下载和引用额外的字体库.这里,我们以 helveti ...

随机推荐

Web服务器负载均衡的几种方案 : DNS轮询
本篇主要讲一下最简单的方案——DNS轮询. DNS轮询大多域名注册商都支持多条A记录的解析,其实这就是DNS轮询 ,DNS 服务器将解析请求按照A记录的顺序,逐一分配到不同的IP上,这样就完成 ...
Hibernate 中 load() 方法导致的 noSession 异常
之所以要写这个,是因为最近碰到了一个延迟加载的 load() 导致出现 noSession 的异常. 下面第三种方式解决这个问题需要用到一个本地线程的对象,也就是 ThreadLocal 类,之前写过 ...
【linux】linux的数据流重定向
首先说一下什么是数据流重定向,所谓数据流重定向简单来说就是一个过程,这个过程捕捉一个文件,或者命令,程序,脚本,甚至脚本中的代码块(code block)的输出,然后把捕捉到的输出,作为输入发送给另外 ...
【比赛】HNOI2018 毒瘤
虚树+dp 直接看zlttttt的强大题解 zlttttt的题解看这里 #include<bits/stdc++.h> #define ui unsigned int #define ll ...
Unity3D动态加载外部MovieTexture视频
网上大家也写了很多Unity3D中播放视频的教程,关于播放外部视频的还是比较少,所以写这篇文章,不足之处,还望读者指正. 在Unity3D中,我们一般使用播放视频的方法:将*.mov,*.mp4等格式 ...
CVE-2017-16995 Ubuntu16.04本地提权漏洞复现
0x01 前言该漏洞由Google project zero发现.据悉,该漏洞存在于带有 eBPF bpf(2)系统(CONFIG_BPF_SYSCALL)编译支持的Linux内核中,是一个内存任意 ...
Linux（六）shell操作实用技巧
一.shell操作日期时间 linux 系统为我们提供了一个命令 date,专门用来显示或者设置系统日期时间的. 语法格式为: date [OPTION]... [+FORMAT] ...
javascript中的位运算，
罗浮宫群里又有讨论位运算符号|了,做过一段时间php,数据库保存布尔值数据经常用到,比如100110 就表明了六个属性的是与否,极大减少了数据量..] ECMAScript 中位运算跟其他语言一样的. ...
解题：POI 2015 Kinoman
题面发现每种电影只在两场之间产生贡献(只有$pos$的一场的就在$[pos,n]$产生贡献).那么我们针对每个位置$i$求出这场电影下一次出现的位置$nxt[i]$,然后每次更新一下,求整个区间的最 ...
【CF123E】Maze
Portal --> cf123E Solution 首先步数的话可以转化成每条边经过了几次这样来算假设现在确定了起点$S$和终点$T$,我们将$T$看成树根,那么考虑边\((u, ...

Three.js基础探寻五——正二十面体、圆环面等

Three.js基础探寻五——正二十面体、圆环面等的更多相关文章

随机推荐

热门专题