- 综合排序
- 最热优先
- 最新优先
- 来自专栏郭先生的博客
three.js 几何体（三）
上一篇介绍了几何体的构造体参数，这篇郭先生就接着上一篇说。 1. ExtrudeGeometry挤压几何体 image.png 挤压几何体允许我们从一条形状路径中，挤压出一个Geometry。 默认值为6 bevelSize: 0.5, //斜角与原始形状轮廓之间的延伸距离 bevelSegments: 2, //斜角的分段层数，默认值为3 curveSegments: 12 LatheGeometry车削几何体 image.png 车削几何体创建具有轴对称性的网格，它将一条线绕着Y轴来进行旋转。 每个点的X坐标必须大于0，第二个参数是要生成的车削几何体圆周分段的数量，默认值是12 3. ParametricGeometry参数化几何体 image.png 参数化几何体生成由参数表示其表面的几何体。
1.2K20发布于 2020-08-31 - 来自专栏每日一篇技术文章
SceneKit_入门07_几何体
02_如何创建工程 SceneKit_入门03_节点 SceneKit_入门04_灯光 SceneKit_入门05_照相机 SceneKit_入门06_行为动画 SceneKit_入门07_几何体 08_天空盒子制作 SceneKit_高级09_雾效果 SceneKit_大神01_掉落的文字 SceneKit_大神02_弹幕来袭 SceneKit_大神03_navigationbar上的3D 1.PNG"]; SCNNode *pyramidNode = [SCNNode nodeWithGeometry:pyramid]; pyramidNode.position = SCNVector3Make SCNNode *cylinderNode =[SCNNode nodeWithGeometry:cylinder]; cylinderNode.position = SCNVector3Make (0, -5, 0); [scnView.scene.rootNode addChildNode:floorNode]; 立体文字 6CD7CE98-3CCE-41EA-A9AE-1C60F96EB2ED.png
1.1K20编辑于 2022-05-13 - 来自专栏郭先生的博客
three.js 几何体（一）
| |CircleGeometry（圆形几何体）|radius — 圆形的半径，默认值为1segments — 分段（三角面）的数量，最小值为3，默认值为8。 | |SphereGeometry（球几何体）|radius — 球体半径，默认为1。widthSegments — 水平分段数（沿着经线分段），最小值为3，默认值为8。 默认值为3。| |TetrahedronGeometry（四面几何体）|radius — 四面体的半径，默认值为1。detail — 默认值为0。 p — 这个值决定了几何体将绕着其旋转对称轴旋转多少次，默认值是2。q — 这个值决定了几何体将绕着其内部圆环旋转多少次，默认值是3。 3. 认识几何体 先上图 image.png 图片对应的就是这些几何体，如果你想更加细致的认识这些几何体请看demo。接下来的几篇我将详细的介绍这些几何体的使用以及注意事项。
1.9K10发布于 2020-08-31 - 来自专栏郭先生的博客
three.js 几何体（二）
上一篇简单的介绍了几何体的构造体参数，这一篇郭先生就更加详细的说一说（十分简单的几何体我就不说了） 1. ShapeGeometry形状几何体 image.png 形状几何体方便我们从一个或多个路径形状中创建一个单面多边形几何体，和canvas一样都是二维图形。 TextGeometry文本几何体 image.png 文本几何体是一个用于将文本生成为单一的几何体的类。 PolyhedronGeometry多面几何体 image.png 这个几何体其实和Geometry非常相似，通过传递点和面的数组构建几何体，不过他还有两个参数，一个是半径，一个是细分数，简单的说半径越大几何体就越大 TubeGeometry管道几何体 image.png 管道几何体顾名思义就是可以非常方便的制作出类似管道的几何体。
1.3K10发布于 2020-08-31 - 来自专栏郭先生的博客
three.js 几何体-组合网格
名称 描述 intersect（相交） 使用该函数可以在两个几何体的交集上创建新的几何体。 两个几何体相互交叠的部分就是新的几何体 union（联合） union函数可以将两个几何体联合在一起创建出新的几何体。 subtract（相减） subtract与union函数相反。 通过这个函数你可以在第一个几何体中减去两个几何体交叠的部分，从而创建出新的几何体 1. = new THREE.CylinderGeometry(20, 20, 22, 50) var cylinMesh3 = new THREE.Mesh(cylinGeom3, material); / , 66], [20, 11, 66], [-20, -1, 66], [-20, 11, 66]]; var points = pointsArr.map(d => new THREE.Vector3(
2.2K20发布于 2020-08-31 - 来自专栏橙光笔记
Three.js教程（6）：几何体
之前的章节中我们使用了平地、方块、球体等几何体（Geometry），今天我们探讨更多的几何体。 先说一个事实，在WebGL中只能绘制3种东西，分别是点、线和三角形。什么？ 4圆，你可以设置segments，你会发现当小于3的时候也会按照3个来绘制的，如果是小数，Three.js也会转化为整数（向下取整）来处理，但是最好还是传入的就是整数，因为有的几何体传入小数的段数会报错 BoxGeometry 上面我们说的都是平面几何体，现在看看三维几何体，首先来看的是BoxGeometry，这个几何体我们前面见得挺多的，就是一个长方体。 更多几何体 我们上面讲了5种几何体，估计你也知道了创建几何体的套路了，其他几何体的创建方式和上面的基本一致，这里就不做更多的叙述了。 当然Three.js不仅仅可以使用给出的几何体，甚至还可以自定义几何体，最重要的是还可以导入其他建模软件做出来的模型，这一点是非常厉害的。
2.2K61发布于 2020-10-17 - 来自专栏前端漫步
Threejs入门之十:认识缓冲几何体BufferGeometry（三）
100, 100, 0, //顶点3坐标 0, 0, 0, //顶点4坐标 和顶点1位置相同 100, 100, 0, //顶点5坐标 和顶点3位置相同 0, 100, 0, / /顶点6坐标])在这组数据中，顶点1坐标和顶点4坐标是重合的，顶点3坐标和顶点5坐标是重合的，这时，我们就可以使用几何体的顶点索引geometry.index，把重复的顶点位置坐标删除const vertices const attribute = new THREE.BufferAttribute(vertices, 3); // 设置几何体attributes属性的位置属性geometry.attributes.position // 设置几何体的顶点法线属性.attributes.normalgeometry.attributes.normal = new THREE.BufferAttribute(normals, 3)这样设置后 (normals, 3)看效果 3.缓冲几何体的旋转、缩放、平移等操作 BufferGeometry通过.scale()、.translate()、.rotateX()、.rotateY()等方法可以对几何体本身进行缩放
1.7K20编辑于 2023-05-19 - 来自专栏浅探ARKit
AR的平面检测和利用SceneKit构建几何体
renderer:(id<SCNSceneRenderer>)renderer didRemoveNode:(SCNNode *)node forAnchor:(ARAnchor *)anchor ; 构建几何体的主要代码如下 chamferRadius:0]; SCNNode * jpNode = [SCNNode nodeWithGeometry:jpBox]; jpNode.position = SCNVector3Make planeNode = [SCNNode nodeWithGeometry:_planeGeometry]; planeNode.position = SCNVector3Make
1.4K140发布于 2018-05-04 - 来自专栏前端漫步
Threejs入门之八：认识缓冲几何体BufferGeometry（一）
前面一节我们介绍了Threejs中常用的几何体，这些几何体都是基于BufferGeometry (opens new window)类构建的，Threejs官方文档中对BufferGeometry 的解释是 ：BufferGeometry 是面片、线或点几何体的有效表述。 4.设置几何体的坐标，BufferAttribute创建并传参后，我们可以通过geometry.attributes.position设置几何体顶点位置属性的值BufferAttribute。 // 设置几何体attributes属性的位置属性geometry.attributes.position = attribute;5.通过上面的设置以后，我们就已经定义了一个几何体形状，在Threejs 入门之二:引用Threejs并创建第一个3D图形中我们讲过，一个物体由几何形状和材质组成，现在我们已经在上面定义了几何体形状，下面我们利用之前的MeshBasicMaterial对象创建一个材质const
2.6K21编辑于 2023-05-19 - 来自专栏前端漫步
Threejs入门之七:Threejs中的几何体
前面的代码中我们一直使用立体缓冲几何体BoxGeometry来构造物体，这样构造出来的是一个长方体或正方体，Threejs提供了很多几何体的API，如圆形缓冲几何体、圆锥缓冲几何体、圆柱缓冲几何体等，下面一一进行介绍 如果设置为3，则在宽度方向上被一分为三 2.圆形缓冲几何体（CircleGeometry）:CircleGeometry由围绕着一个中心点的三角分段的数量所构造，由给定的半径来延展。 CircleGeometry接收四个参数，各参数定义如下 radius — 圆形的半径，默认值为1 segments — 分段（三角面）的数量，最小值为3，默认值为8。 ({ color:0x00ffff,//设置颜色 wireframe:true, }) const mesh = new THREE.Mesh(geometry,material) 3.圆锥缓冲几何体 widthSegments — 水平分段数（沿着经线分段），最小值为3，默认值为32。 heightSegments — 垂直分段数（沿着纬线分段），最小值为2，默认值为16。
2.3K30编辑于 2023-05-19 - 来自专栏前端漫步
Threejs入门之九:认识缓冲几何体BufferGeometry（二）
这里我们依然使用上节定义的类型数组作为各个顶点的数据//创建顶点数据const vertices = new Float32Array([ 0, 0, 0, //顶点1坐标 100, 0, 0, //顶点2坐标 0, 100, 0, //顶点3坐标 //顶点4坐标 0, 0, 100, //顶点5坐标 60, 0, 20, //顶点6坐标])创建缓冲区对象BufferAttribute (opens new window)表示threejs几何体顶点数据 const attribute = new THREE.BufferAttribute(vertices, 3)设置几何体attributes属性的位置属性geometry.attributes.position 点模型材质const material = new THREE.PointsMaterial({ color: 0xffff00, size: 10.0 //点对象像素尺寸})创建点模型，并将几何体和材质作为参数传递给 pointsconst points = new THREE.Points(geometry, material);刷新浏览器，发现原来的面已经变成了几个点 3.线模型对象 我们使用BufferGeometry
2K20编辑于 2023-05-19 - 来自专栏全栈程序员必看
利用元素法简单解答空间几何体问题——高等数学
相信很多人初学的时候和我一样对这种三维空间的几何体计算方面有困难。我也曾百度过关于几何体体积/表面积的求法，但是始终不是很明白百度上的那种方法。 文章目录 元素法的思想（三步走） 一、求平面图形的面积 二、求旋转体的体积 2.1 绕x轴旋转 2.2 绕y轴旋转 2.3 绕z轴旋转 2.4 截口面积已知的几何体体积 三、弧长 四、空间曲面的面积(表面积 2.3 绕z轴旋转 2.4 截口面积已知的几何体体积 如图所示，切面是一个几乎没有高度的圆柱体 几何体体积的切片法是同样的思想，只不过是取的一层一层的体积叠起来。
1.1K50编辑于 2022-06-26 - 来自专栏壹种念头
进阶渲染系列（一）——平坦和线框着色（导数和几何体）
定义额外的插值器2.3 分割 My Lighting2.4 重写反照率2.5 创建线框2.6 修复线宽度2.7 配置线 本文重点： 1、使用屏幕空间导数查找三角形法线 2、通过几何着色器找出三角形法线 3、 通过将maxvertexcount属性添加到我们的函数中（以3作为参数）来指定。 ? 下一步是定义输入。当我们在插值之前使用顶点程序的输出时，数据类型为InterpolatorsVertex。 使用第十个插值器语义为它提供一个float3 barycentricCoordinators向量。 ? 给每个顶点一个重心坐标。哪个顶点获得什么坐标都没有关系，只要它们是有效的即可。 ?
3.2K21发布于 2020-07-10 - 来自专栏历史专栏
【愚公系列】2023年08月 Three.js专题-几何体
一、几何体 1.几何体类型 1.1 二维几何体 Three.js中的二维几何体包括： 二维点（THREE.Points）：表示一个点或一组点。 这些模型文件可以使用3D软件（如Blender、3ds Max等）或在线模型平台（如Sketchfab）创建或下载。 3.几何体属性和方法 在Three.js中，每个几何体都有一些默认的属性和方法，也可以自定义添加属性和方法。 shape.lineTo(3, 3) shape.lineTo(3, 0) shape.lineTo(0, 0) const geometry = new THREE.ShapeGeometry document.body.appendChild(renderer.domElement); // 添加一个立方体 // 定义了一个立方体的对象 const geometry = new THREE.BoxGeometry(3,3,3,1,1,1
29000编辑于 2025-05-28 - 来自专栏壹种念头
Unity可编程渲染管线系列（十）细节层次（交叉淡化几何体）
（3个LOD级别 球体） 现在，你可以通过移动摄像机或调整LOD偏置来查看正在选择的LOD。 ? （调整LOD偏差） LOD组可以与光照贴图一起使用吗？ 是。 该模式专门用于SpeedTree树，该树使用其自己的LOD系统折叠树并在3D模型和广告牌表示之间进行转换。 这适用于不透明和透明几何体。但是对于为对象渲染的所有片段，淡入度因子都是相同的，因此仅将其用作剪切的阈值仍会产生突然的过渡。因此，我们必须为每个片段的裁切阈值添加变化。 核心库包含LODDitheringTransition函数，该函数根据3D种子值和淡入淡出因子进行裁剪。它使用种子生成哈希值，然后将其用于剪切。 3 着色器变体裁剪 将所有这些功能添加到着色器的不利之处在于，最终会生成许多着色器变体。当使用shader-feature编译器指令时，这是可管理的，因为构建中仅包含已为废料启用的关键字。
4.8K31发布于 2020-08-17 - 来自专栏ABAQUS二次开发
【Q&A-1】ABAQUS中通过Python完整选取几何体并建立Set
图1 图2 图3 地层建模 卫同学你好： 你的问题解决的方式并非只有findAt()这一种方法，实际上对于你的的意图而言findAt()这种方法其实稍显繁琐，这里阿信提供另外一个选择。 ，那么这个语句要很长，也不利于参数化建模的实现，再看下面的代码： p = mdb.models['Model-1'].parts['Part-1'] c = p.cells cells = c[0:3] p.Set(cells=cells, name='Set-index') 这个代码没按照findAt（）的方式进行几何体的选取，而是对于几何体的序列进行了切片，稍作修改就可以对你的发来的问题模型所有的 parts['Part-1'] c = p.cells cells = c[0:] p.Set(cells=cells, name='Set-index') 实际上ABAQUS提供了多种的几何体的选取方式
3.3K20编辑于 2022-05-17 - 来自专栏前端漫步
Threejs进阶之十八:使用ExtrudeGeometry从二维图形创建三维几何体
上一节我们介绍了Threejs中二维图形相关的类，这一节我们来聊一聊如何通过创建的二维图形来生成三维图形 ExtrudeGeometry类 ExtrudeGeometry类（挤压缓冲几何体） 它的构造函数如下所示： 构造函数 ExtrudeGeometry(shape, options) 该对象将一个二维形状挤出为一个三维几何体 ExtrudeGeometry的参数 shape：ExtrudeGeometry 斜角的分段层数，默认值为3。 extrudePath — THREE.Curve对象。一条沿着被挤出形状的三维样条线。路径拉伸不支持斜面。 UVGenerator — Object。 3.创建材质和网格对象 创建材质和网格对象Mesh，并将上面的geometry 和材质作为参数传入 var material = new THREE.MeshPhongMaterial( { color
2.9K31编辑于 2023-10-14 - 来自专栏前端博客
GIS拓扑讲解点线面几何体的拓扑关系判断及运算分析_turf案例
Turf的数据标准是WGS84经度、纬度坐标，大多数Turf函数使用GeoJSON功能，如点Point、线LineString、面PolygonTurfTurf.js库应用：点线面几何体的拓扑关系判断及运算分析 OL4结合turf.js实现等值线使用leafletjs、turfjs前端绘制点线面缓冲区参考资料：利用Turf.js实现点线面几何体的拓扑关系判断 https://blog.csdn.net/u013240519 duanxingxing/p/5150487.htmlarcgis js 几种拓扑关系详解 https://www.cnblogs.com/sguozeng/p/10250135.html转载本站文章《GIS拓扑讲解点线面几何体的拓扑关系判断及运算分析
3.5K10编辑于 2023-04-09 - 来自专栏叶子的开发者社区
【GAMES101】Lecture 10 几何表示
f的结果就可以知道这个点是在几何体内部还是外部，如果f的值小于0，我们就把它当作在几何体内部，如果大于0，就当作在几何体外面，当然如果等于0那就是在几何体表面 但是这个隐式表示有一个它的缺点就是很难知道有哪些点在这个几何体上 CSG（Constructive solid geometry） 这个CSG就是用一些基本的几何体通过一些基本的布尔操作组合出来几何体，简单的通过这个并、交、差来形成不同的几何体 距离函数（Distance Functions） 所谓距离函数，指的是这样一个东西，对于空间中的点，我都给他计算出一个值，这个值是这个点到这个几何体表面的最短距离，并且如果这个点在几何体表面外，这个距离为正，在几何体表面内，这个距离为负 ，这是最常用的方法 模型文件Object File (.obj) 存储模型的文件，obj文件，比方说一个正方体物体，有8个顶点，那么会存储下8个顶点的位置，如3-10行的v，然后会有六个面，会记录下每个面的法线 ，如27-43行的vn，这里不止6行是因为有冗余，存在数据重复，还有每个三角形顶点的纹理12-25行，剩下的f行是记录渲染的三角形的三个顶点，例如1/2/3，说的是第1个顶点，用的第2个纹理，用的第3个法线
28210编辑于 2024-01-29 Three.js可视化企业实战WEBGL网-2024入门指南
它的丰富 API 和模块化设计使得开发者可以轻松构建复杂的 3D 场景和动画效果。本文将详细介绍 Three.js 中的一些重要组件和模块，包括场景、相机、几何体、材质、光源、渲染器和控制器等。1. 场景 (Scene)场景是 Three.js 的核心组件之一，用于容纳和管理 3D 对象、光源和相机。所有的 3D 对象都必须添加到场景中，才能被渲染器绘制。 2.1 透视相机透视相机模仿了人眼的视角，适合大多数 3D 场景。 几何体 (Geometry)几何体定义了 3D 对象的形状和结构。Three.js 提供了多种内置几何体，如立方体、球体、平面、圆柱体等。 材质 (Material)材质定义了几何体的表面属性，如颜色、光泽、纹理等。
1.1K00编辑于 2024-05-31
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号