【three.js学习笔记】几何体

dendoink 发布于2019-08-22 16:04 / 446人阅读

摘要：构造函数分别是长宽高是对应长宽高的分段，在使用线模式进行渲染的时候，可以看到效果如下。长宽高分别被截为段，段，段。球体构造函数球体半径水平方向和垂直方向上分段数。最小值为，默认值为。构造函数形状数组可选的参数对象，可配置参数。

Geometry api Geometry

var geometry = new THREE.Geometry();

立方体（BoxGeometry）

老版本里面貌似是CubeGeometry，在r76版本的文档中，使用的是BoxGeometry。

构造函数

BoxGeometry(width, height, dept, widthSegments, heightSegments, depthSegments)

width,height,dept分别是长宽高

widthSegments, heightSegments, deptSegments是对应长宽高的分段，在使用线模式({wireframe:true})进行渲染的时候，可以看到效果如下。

var cubeGeometry = new THREE.BoxGeometry(6, 6, 6, 2, 3, 1);
var cubeMaterial = new THREE.MeshBasicMaterial({
    wireframe : true
});
cubeMaterial.color = new THREE.Color("red");
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

长宽高分别被截为2段，3段，1段。

球体（SphereGeometry） 构造函数

SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)

radius：球体半径

widthSegments, heightSegments：水平方向和垂直方向上分段数。widthSegments最小值为3，默认值为8。heightSegments最小值为2，默认值为6。

phiStart：水平方向上的起始角,默认值0

phiLenght：水平方向上球体曲面覆盖的弧度，默认Math.PI * 2

thetaStart : 垂直方向上的起始角，默认0

thetaLength: 垂直方向是球体曲面覆盖的弧度，默认值为Math.PI

多边形（ShapeGeometry）

前面都是一些立体的图形，多边形(ShapeGeometry)用来创建一个平面多边形。

构造函数

ShapeGeometry(shapes, options)

shapes形状数组

可选的参数对象，可配置参数curveSegments, meterial, UVGenerator。

实例方法

addShapeList(shapes, options) 添加图形（Shape实例）列表到多边形中

addShape(shape, options)添加单个图形（Shape实例）到多边形中。

例子

var rectShape= new THREE.Shape();
rectShape.moveTo(1,4);
rectShape.lineTo(1, 8);
rectShape.lineTo(5, 8);
rectShape.lineTo(5, 4);
rectShape.lineTo(3, -4);
rectShape.lineTo(1, 4);
var rectGeom = new THREE.ShapeGeometry( rectShape );
var rectMesh = new THREE.Mesh( rectGeom, new THREE.MeshBasicMaterial( { color: 0xff0000 } ) ) ;

PolyhedronGeometry/多面体

PolyhedronGeometry(vertices, faces, radius, detail)

vertices:顶点的数组，如[1,1,1, -1,-1,-1,…]，则第一个顶点的坐标是（1,1,1），第二个顶点的坐标是（-1，-1，-1）

faces:面的顶点坐标的索引，应用vertices的顶点，如[0,1,2， 3,4,5，…],则第一个面由顶点0,1,2构成,第二个面由顶点3,4,5构成

radius(Float): 多面体的半径

detail(Integer): 设置为n时，多面体的面的数量增加基础面的n倍.

var verticesOfCube = [
  -1,-1,-1,    1,-1,-1,    1, 1,-1,    -1, 1,-1,
    -1,-1, 1,    1,-1, 1,    1, 1, 1,    -1, 1, 1,
];

var indicesOfFaces = [
    2,1,0,    0,3,2,
    0,4,7,    7,3,0,
    0,1,5,    5,4,0,
    1,2,6,    6,5,1,
    2,3,7,    7,6,2,
    4,5,6,    6,7,4
];

var polyhedron = new THREE.Mesh( new THREE.PolyhedronGeometry( verticesOfCube, indicesOfFaces, 50, 1),material);
    scene.add(polyhedron);

参考文档：https://blog.csdn.net/u011135...

海外云主机私有云 three.js three.js极客 three.js教程 three.js cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94013.html

WebGL three.js学习笔记自定义顶点建立几何体

摘要：自定义顶点建立几何体与克隆本身已经有很多的网格模型，基本已经够我们的使用，但是如果我们还是想自己根据顶点坐标来建立几何模型的话，也是可以的。并且不仅要更新顶点，还要更新线条的连接方式，否则是没有效果的。自定义顶点建立几何体与克隆 Three.js本身已经有很多的网格模型，基本已经够我们的使用，但是如果我们还是想自己根据顶点坐标来建立几何模型的话，Three.js也是可以的。基本效果...

joyvw 2019-08-23 17:06 评论0 收藏0
WebGL three.js学习笔记使用粒子系统模拟时空隧道（虫洞）

摘要：学习笔记使用粒子系统模拟时空隧道本例的运行结果如图时空隧道演示地址的粒子系统的粒子系统主要是依靠精灵体来创建的，要实现中的粒子系统创建，一般有两种方式。 WebGL three.js学习笔记使用粒子系统模拟时空隧道本例的运行结果如图：showImg(https://img-blog.csdnimg.cn/20190426222855492.png?x-oss-process=ima...

Guakin_Huang 2019-08-23 17:10 评论0 收藏0
【three.js学习笔记】网孔（Mesh）

摘要：缺省是一个启用线框模式和随机颜色的基础网孔材料。一个权重值数组，取值从到，指定变形程度。指定该索引处的为基础变形。更新使其不对对象产生影响。得到光线投射和网孔之间的交叉点。返回这个网孔对象及其子对象的克隆。 MESH 网孔对象的基类MESH就是一系列的多边形组成的，三角形或者四边形，网格一般由顶点来描绘，我们看见的三维开发的模型就是由一系列的点组成的。 var geometry = n...

zhangke3016 2019-08-22 16:21 评论0 收藏0