图形化开发（五）011 |
您所在的位置：网站首页 › 圆锥形怎么画展开图形 › 图形化开发（五）011 |
图形化开发（五）011
|
图形化开发（五）011-Three.js之Geometry几何体——立方体、圆形、圆锥
Geometry几何体
一个模型是由几何体Geometry和材质material组成。Three.js内置了很多的几何体种类，如：立方体、三棱锥、球、八面体、十二面体、二十面体等等，这一节我们将介绍一下这些类型几何体的模型创建和几何体的通用方法。 Geometry和BufferGeometry当前Three.js内置了这两种几何体类型Geometry和BufferGeometry，这两个几何体类型都是用于存储模型的顶点位置、面的索引、法向量、颜色、uv纹理以及一些自定义的属性。 它们两个的区别是： Geometry 使用了Three.js提供的THREE.Vector3或者THREE.Color这样的对象来存储数据易与阅读和编辑性能弱一些适合动画场景 BufferGeometry 存储数据原始不易阅读和编辑性能好适合存储一些放入场景内不需要再额外操作的模型 互转两种几何体类型可以互转，所以，不要害怕现在使用的是那种。 BufferGeometry转换成Geometry //实例化一个Geometry对象 var geo = new THREE.Geometry(); //调用对象的fromBufferGeometry方法，并将需要转换的bufferGeometry传入 geo.fromBufferGeometry(bufferGeometry); //geo为转换转换成的GeometryGeometry转换成BufferGeometry //实例化一个BufferGeometry对象 var bufferGeo = new THREE.BufferGeometry(); //调用对象的fromGeometry方法，并将需要转换的geometry传入 bufferGeo.fromGeometry(geometry); //bufferGeo为geometry转换成的BufferGeometry 立方体在WebGL里面，所有的模型都是通过三角形面组成。 创建 var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); 构造函数 BoxGeometry(width : 浮点类型, height : 浮点类型, depth : 浮点类型, widthSegments : 整数类型, heightSegments : 整数类型, depthSegments : 整数类型)width — 沿x轴的宽度，默认值为1 height — 沿y轴的高度，默认值为1 depth — 沿z轴的深度，默认值为1 widthSegments — 可选，沿着边的宽度的分割面的数量。默认值为1 heightSegments — 可选，沿着边的高度的分割面的数量。默认值为1 depthSegments — 可选，沿着边的深度的分割面的数量。缺省值是1 widthSegments，heightSegments，depthSegments这三个参数有点类似切西瓜，分别朝3个方向将几何体切成一块一块。 在线示意：https://threejs.org/docs/scenes/geometry-browser.html#BoxGeometry 比如我们要将西瓜切成小块，必须朝三个方向切才行。
圆形是由多个三角形分段构成，这些三角形分段围绕一个中心点延伸并且延伸到给定半径以外。 创建 var geometry = new THREE.CircleGeometry( 5, 32 ); var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } ); var circle = new THREE.Mesh( geometry, material ); scene.add( circle ); 构造函数 CircleGeometry(radius : 浮点类型, segments : 整数类型, thetaStart : 浮点类型, thetaLength : 浮点类型)radius — 圆的半径，默认值为1 segments — 段数（三角形），最小值为3，默认值为8 thetaStart — 第一段的起始角度，默认值为0 thetaLength — 圆形扇形的中心角，通常称为theta。默认值是2 * Pi，画出一个整圆 在线示意https://threejs.org/docs/scenes/geometry-browser.html#CircleGeometry 圆锥 创建 var geometry = new THREE.ConeGeometry( 5, 20, 32 ); var material = new THREE.MeshBasicMaterial( {color: 0xffff00} ); var cone = new THREE.Mesh( geometry, material ); scene.add( cone ); 构造函数 ConeGeometry(radius : 浮点类型, height : 浮点类型, radialSegments : 整数类型, heightSegments : 整数类型, openEnded : 布尔类型, thetaStart : 浮点类型, thetaLength : 浮点类型)radius — 底部圆锥的半径，默认值为1。 height — 圆锥体的高度，默认值为1。 radialSegments — 圆锥周围的分段面数，默认值为8。 heightSegments — 沿圆锥体高度的面的行数，默认值为1。 openEnded — 圆锥体底部是是隐藏还是显示，默认值为false，显示。 thetaStart — 第一段的起始角度，默认值是0（Three.js的0度位置）。 thetaLength — 圆形扇形的中心角，通常称为theta。默认值是2 * Pi，画出一个整圆 在线示意— 圆锥体底部是是隐藏还是显示，默认值为false，显示。 thetaStart — 第一段的起始角度，默认值是0（Three.js的0度位置）。 thetaLength — 圆形扇形的中心角，通常称为theta。默认值是2 * Pi，画出一个整圆 在线示意https://threejs.org/docs/scenes/geometry-browser.html#ConeGeometry |
【本文地址】