Three.js基础探寻五——正二十面体、圆环面等
2016-07-29 08:43
330 查看
除了立方体、平面、球体,Three.js还提供了很多其他几何形状。
1.圆形
CircleGeometry可以创建圆形或者扇形:
radius:半径
segmentsWidth:经度上的分段数
segmentsHeight:纬度上的分段数
thetaStart:纬度开始的弧度
thetaLength:纬度跨过的弧度
new THREE.CircleGeometry(3, 18, Math.PI / 3, Math.PI / 3 * 4) 创建一个在x轴和y轴所在平面的三分之二圆的扇形:
2.圆柱体
圆柱体(CylinderGeometry)的构造函数是:
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)的构造函数较为类似,分别为:
其中,radius是半径;detail是细节层次(Level of Detail)的层数,对于大面片数模型,可以控制在视角靠近物体时,显示面片数多的精细模型,而在离物体较远时,显示面片数较少的粗略模型。这里我们不对detail多作展开,一般可以对这个值缺省。
new THREE.TetrahedronGeometry(3)创建一个半径为3的正四面体:
new THREE.OctahedronGeometry(3)创建一个半径为3的正八面体:
乍一看有点像光能使者的魔法阵哈,用三维的眼光去看。
new THREE.IcosahedronGeometry(3)创建一个半径为3的正二十面体:
4.圆环面
圆环面(TorusGeometry)的形状类似甜甜圈,其构造函数是:
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)的构造参数为:
radius:圆环半径
tube:管道半径
radialSegments:径向的分段数
tubularSegments:管的分段数
p:p\Q:对knot(节)状方式有效,控制曲线路径缠绕的圈数,其中p决定垂直方向的参数(可缺省)
q:水平方向的参数(可缺省)
heightScale:z轴方向上的缩放,默认值1
new THREE.TorusKnotGeometry(2, 0.5, 32, 8)的效果:
关于圆环结的详细内容可参看维基百科。
6.源码
整理自张雯莉《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基础探寻九——网格
- Three.js基础探寻三——透视投影照相机
- Three.js基础探寻六——文字形状与自定义形状
- Three.js基础探寻十——动画
- Three.js基础探寻四——立方体、平面与球体
- Three.js 开发基础知识 - 绘制3D对象
- three.js学习笔记(二)-基础知识①
- Three.js源码阅读笔记(基础的核心Core对象)
- linaCharts开发笔记:Three.js基础
- three.js基础杂物
- Three基础探寻二
- 【Three.js探寻八】——法向材质与材质的纹理贴图
- Three.js基础学习之场景对象
- Three.js基础部分学习
- three.js学习笔记 基础1_1
- three.js自学之旅(5)—— 辅助对象的使用、扩展一个新的基础方法调整对象参数
- Three.js的使用及绘制基础3D图形详解
- Three.js基础学习教程
- Three.js基础