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 ...
随机推荐
- Delphi 组件渐进开发浅谈（一）——由简入繁
最近业余时间在写游戏修改器玩,对于Delphi自带的组件总觉得差强人意,需要书写大量冗余代码,如果大量使用第三方组件,在以后的移植和与他人交互时也不是很方便,因此便产生了自己封装组件的想法. 实际上这 ...
- BZOJ 1188 分裂游戏(sg函数)
如果把每堆巧克力看做一个子游戏,那么子游戏会互相影响. 如果把全部堆看做一个子游戏,那么状态又太多. 如果把每一个单独的巧克力看成一个子游戏的话,那么状态很少又不会互相影响. 令sg[i]表示一个巧克 ...
- 【bzoj4321】queue2 dp
题目描述 n 个沙茶,被编号 1~n.排完队之后,每个沙茶希望,自己的相邻的两人只要无一个人的编号和自己的编号相差为 1(+1 或-1)就行: 现在想知道,存在多少方案满足沙茶们如此不苛刻的条件. ...
- C++解析(19)：函数对象、关于赋值和string的疑问
0.目录 1.函数对象 2.重载赋值操作符 3.string类 4.小结 1.函数对象 编写一个函数: 函数可以获取斐波那契数列每项的值 每调用一次返回一个值 函数可根据需要重复使用 实现功能: #i ...
- P1407 [国家集训队]稳定婚姻
题目描述 我国的离婚率连续7年上升,今年的头两季,平均每天有近5000对夫妇离婚,大城市的离婚率上升最快,有研究婚姻问题的专家认为,是与简化离婚手续有关. 25岁的姗姗和男友谈恋爱半年就结婚,结婚不到 ...
- 后渗透提权辅助工具BeRoot详解
0x00 工具介绍 前言 BeRoot是一个后期开发工具,用于检查常见的Windows的配置错误,以方便找到提高我们提权的方法.其二进制编译地址为: https://github.com/Alessa ...
- 【bzoj3589】动态树
Portal --> bzoj3589 Description 给你一棵\(n\)个节点的树,总共有\(q\)次操作,每次操作是以下两种中的一种: 操作\((0,x,delta)\):给以\(x ...
- 孙鑫视频VC++深入详解学习笔记
孙鑫视频VC++深入详解学习笔记 VC++深入详解学习笔记 Lesson1: Windows程序运行原理及程序编写流程 Lesson2: 掌握C++基本语法 Lesson3: MFC框架程序剖析 Le ...
- Bash to check SSL cert expired
Code like this, You can send out a email to notice $ cat urls.txt www.baidu.com $ cat cert_chk.sh #! ...
- 即时通信系统Openfire分析之一：Openfire与XMPP协议
引言 目前互联网产品使用的即时通信协议有这几种:即时信息和空间协议(IMPP).空间和即时信息协议(PRIM).针对即时通讯和空间平衡扩充的进程开始协议SIP(SIMPLE)以及XMPP.PRIM与 ...