ThreeJs学习笔记【day6】图元【6】

203 阅读3分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第6天,点击查看活动详情 >>

四面缓冲几何体(四面体) TetrahedronGeometry

const radius = 7;  // ui: radius
const geometry = new THREE.TetrahedronGeometry(radius);

参数比较简单,一个radius半径指定大小,一个detail指定面的数量,默认是0,越大面越多

文本缓冲几何体(文字) TextGeometry

第一篇就是用文字举例的,代码就不上了,相关的构造参数在第一篇也说明过了

圆环缓冲几何体(圆环)TorusGeometry

很像游泳圈的环

const geometry1 = new THREE.TorusGeometry( 10, 3, 16, 100 );
const material1 = new THREE.MeshPhongMaterial( { color: 0xffff00 } );
const torus = new THREE.Mesh( geometry1, material1 );
torus.position.x = -40
scene.add( torus );

TorusGeometry(radius : Float, tube : Float, radialSegments : Integer, tubularSegments : Integer, arc : Float)

参数说明

  • radius 环面的半径,从环面的中心到管道横截面的中心。默认值是1,注意,半径是内径圆心到外环的中心点

  • tube 管道的半径,默认值为0.4。外面环的半径

  • radialSegments 管道横截面的分段数,默认值为8。为0时会变成平面圆环,越大圆环越饱满

  • tubularSegments 管道的分段数,默认值为6。决定了圆环像不像一个圆。为3时是一个镂空三角体

  • arc — 圆环的圆心角(单位是弧度),默认值为Math.PI * 2。决定是否是闭合立方体

image.png

圆环缓冲扭结几何体(环形结)TorusKnotGeometry

创建一个圆环扭结,其特殊形状由一对互质的整数,p和q所定义。如果p和q不互质,创建出来的几何体将是一个环面链接。

互质的整数:互质是公约数只有1的两个整数,叫做互质整数

公约数: 一个能被若干个整数同时均整除的整数

也就是说,p,q 除了1以外,不存在一个数能同时被p,q整除

const geometry2 = new THREE.TorusKnotGeometry( 10, 3, 100, 16, 11,9 );
const material2 = new THREE.MeshPhongMaterial( { color: 0xff11cc } );
const torusKnot = new THREE.Mesh( geometry2, material2 );
torusKnot.position.x = 40
scene.add( torusKnot );

TorusKnotGeometry(radius : Float, tube : Float, tubularSegments : Integer, radialSegments : Integer, p : Integer, q : Integer)

参数说明

  • radius 圆环的半径,默认值为1。决定了整个立方体的大小

  • tube 管道的半径,默认值为0.4。决定了圆环的粗细

  • tubularSegments 管道的分段数量,默认值为64。这个值决定了 形成的结的多少

  • radialSegments 横截面分段数量,默认值为8。这个值决定了 圆环的饱满程度

  • p 这个值决定了几何体将绕着其旋转对称轴旋转多少次,默认值是2。比较抽象,可以理解为,打多少个旋儿可

  • P为2的情况

image.png

  • p为3的情况

image.png

  • q 这个值决定了几何体将绕着其内部圆环旋转多少次,默认值是3。以理解为,一个圆环,扭曲多少次

  • q为1的情况 image.png

  • q为4的情况

image.png

老惯例,本文代码依旧以代码片段的方式引入