three.js学习（6）：Geometry Objects

最新推荐文章于 2024-06-21 17:40:53 发布
最新推荐文章于 2024-06-21 17:40:53 发布
阅读量545 收藏 2
点赞数 2
分类专栏： 前端 文章标签： js threejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31976161/article/details/84373089
版权

threejs scene能够放置的Geometry Object（对象）包括：
2D的曲线（curve)，文字（font），形状（shape），路径（path）等。
3D的各种几何体（Geometry），以及通过加载器（Loader）加载的模型等。
其他。

Curve
CurvePath
Font
Interpolations
Path
Shape
ShapePath

曲线类型
ArcCurve
CatmullRomCurve3
CubicBezierCurve
CubicBezierCurve3
EllipseCurveLineCurve
LineCurve3
QuadraticBezierCurve
QuadraticBezierCurve3
SplineCurve

几何体
BoxBufferGeometry
BoxGeometry
CircleBufferGeometry
CircleGeometry
ConeBufferGeometry
ConeGeometry
CylinderBufferGeometry
CylinderGeometry
DodecahedronBufferGeometry
DodecahedronGeometry
EdgesGeometry
ExtrudeBufferGeometry
ExtrudeGeometry
IcosahedronBufferGeometry
IcosahedronGeometry
LatheBufferGeometry
LatheGeometry
OctahedronBufferGeometry
OctahedronGeometry
ParametricBufferGeometry
ParametricGeometry
PlaneBufferGeometry
PlaneGeometry
PolyhedronBufferGeometry
PolyhedronGeometry
RingBufferGeometry
RingGeometry
ShapeBufferGeometry
ShapeGeometry
SphereBufferGeometry
SphereGeometry
TetrahedronBufferGeometry
TetrahedronGeometry
TextBufferGeometry
TextGeometry
TorusBufferGeometry
TorusGeometry
TorusKnotBufferGeometry
TorusKnotGeometry
TubeBufferGeometry
TubeGeometry
WireframeGeometry

.无聊de热水
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
二、飞线或者路线的实现（TubeBufferGeometry：管道缓冲几何体）
张先森的博客
09-21 244
在做three大屏的时候我们经常会遇到绘制发光路线和指向的情况，那么就需要使用到管道（TubeBufferGeometry）这个API。。
three.js 源码注释（八十二）extras/geometries/RingGeometry.js
omni360的专栏
02-01 1874
RingGeometry用来在三维空间内创建一个二维圆环面对象. 用法: var geometry = new THREE.RingGeometry(1,5,32); var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); var Ring = new THREE.Mesh(geometry,material); scene.add(Ring); <summary>TorusGeometry</summar
Revit API 几何专题 1：几何类库概述 GeometryObject
极客BIM工作室
03-21 2483
几何类库 Revit API 提供了一套完整的几何库。既然是几何库，那就逃不过这些概念：点、线、面、体。 那么，对于任意的几何库，实际上，你要关系的东西逃不过下面的表格，（点 / 线 / 面 / 体）与（点 / 线 / 面 / 体）之间的关系。 这些类的基类都是 GeometryObject。对应的点、线、面、体： 点： Point 线： Curve、 Edge、PolyLine、Profil...
`THREE.BufferGeometry` 是 three.js 中的一个核心类，用于创建和处理几何体。它使用缓冲区数组存储几何数据，如顶点、法线和颜色，从而提高了性能。
最新发布
qq_37030315的博客
06-21 658
demo案例 是 three.js 中的一个核心类，用于创建和处理几何体。它使用缓冲区数组存储几何数据，如顶点、法线和颜色，从而提高了性能。以下是 的详细说明，包括其构造函数、属性和方法。 属性 attributes: index: morphAttributes: groups: boundingBox: boundingSphere: drawRange: userData: setAttribute(name, attribute): getAttribute(name):
three.js 内置的几何体Geometry
淋雨一直走~
12-23 1975
three.js学习笔记目录 案例效果 基本案例效果地址（上一次笔记已经演示了） 所有案例效果地址 前言 前面我们了解了，一个three.js三大基础renderer，camera，scene和响应式three.js 现在我们来学习一下three.js内置的geometry。three.js提供了很多的几何体给我们直接使用， 我就不多说了直接看代码(有点多)： <!DOCTYPE html> <html lang="en"> <head> <meta cha
three.js中绘制RingGeometry不显示
paradoxaaa_的博客
06-01 319
在项目中想要实现圆弧绕立方体旋转的效果 结果绘制出来的圆弧不显示 多次调整位置 圆弧终于显示出来了 但只有一个角度能观察到。查看了官方文档发现原来是少了个配置项side: THREE.DoubleSide。加上之后运行就可以显示了。
小程序使用threejs第三篇—介绍几种几何模型
WeiHan_Seven的博客
02-26 5815
在上一篇[小程序使用threejs第二篇—立方体展示并自动旋转与手势旋转](https://blog.csdn.net/WeiHan_Seven/article/details/104493821)中，我们还遗留了一个小问题，就是展示的立方体如何随手势旋转缩放，当我们处理了这个问题，接下来介绍几种几何模型，大家可以试着把他们添加到场景下再渲染出来...
Threejs学习：裁剪( clip编 )
太古时代的专栏
05-23 4389
参考：webgl_clipping_intersection.html // 裁剪点 var clipPlanes = [ new THREE.Plane( new THREE.Vector3( 1, 0.5, 0 ), 0 ), new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), 0 ), new THREE.Plane( new THR...
threejs 场景中模型部分剖切
weixin_45815569的博客
07-29 1336
threejs 模型部分裁剪
Threejs系列--2几何体
小猴子喝牛奶的博客
07-07 1152
Threejs系列--案例一（掌握场景设置）序言Treejs简介 随着上章基本知识的了解，相信你应该对Treejs基本流程及一些常见术语等有了基本的认识，本章将对场景设置进行详细讲解。 Treejs简介 treejs是基于原生WebGL封装运行的三维引擎。可以使用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。 ...
解析GitHub首页3D动画
iamlegendary的博客
03-17 2689
一.前言 GitHub是世界上最大的代码托管平台,超5千万开发者正在使用。GitHub中文社区,是国内领先的开源社区,是一个帮您发现GitHub上优质开源项目的地方。 它的首页动画很有意思,如下： 动画主要展示了世界各地都在用github,闪光点和发出的射线表达了各地的pull,merge,push等操作，比较生动并且科技感十足。 这边我们将代码扒了下来，并去掉了多余不关心的部分，方便我们进行解析。 本文主要对如下三点进行解析： 1.地球的制作,世界地图的描点 2.射线和冒尖闪光点的制作 3.鼠标hove
无限灯光(1)
qq_21476953的博客
12-24 510
翻译自: https://tympanus.net/codrops/2019/11/13/high-speed-light-trails-in-three-js/ 代码: https://github.com/dslming/learningComputerGraphics/tree/master/ThreejsLearning/017-InfiniteLights 无限灯光 灵感来自 海...
Three.js基础之图元
weixin_55696461的博客
10-22 679
Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。 先创建一个立方体几何对象 Geometry
WebGL/ThreeJS几何体、材质、纹理贴图，给几何体披上好看的外衣
xyphf的博客
11-29 3291
1、ThreeJS的常见几何体 BufferGeometry和Geometry有什么不同？ 如果你想简单理解BufferGeometry和Geometry有什么不同,就是两者的数据结构不同，缓冲类型几何体BufferGeometry相比普通几何体Geometry性能更好。Three.js渲染器在解析几何体对象的时候，如果几何体对象是普通几何体对象Geometry, Three.js的WebGL渲染器 会把普通几何体对象Geometry转化为缓冲类型几何体对象BufferGeometry,然后再提取Buf
threejs之常见几何形状使用
qq_29335275的博客
12-20 1357
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;threejs之常见几何形状使用&lt;/title&gt; &lt;script src="../js/three.js"&gt;&lt;/script
three.js 源码注释（八十）extras/geometries/OctahedronGeometry.js
omni360的专栏
02-01 1296
OctahedronGeometry用来在三维空间内创建一个八面体对象. 用法: var geometry = new THREE.OctahedronGeometry(70); var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); var icos = new THREE.Mesh(geometry,material); scene.add(icos); <summary>OctahedronGeome
Three.js中的几何体
yinge0508的博客
12-08 661
1，CylinderGeometry 一个用来创建圆柱几何体模型的类 var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 ); var material = new THREE.MeshBasicMaterial( {color: 0xffff00} ); var cylinder = new THREE.Mesh( geometry, material ); scene.add( cylinder ); 构造器（Constructor）.
关于THREE.js中ParametricGeometry画不出来的原因
unirrrrr的博客
06-10 1561
因为计图项目是海底世界创建，所以虽然画出了个竹子，但是还是想画海草。 由于海草也是波浪形的，想起之前在一个博客里看到了波浪平面的生成是利用ParametricGeometry生成的，于是也想试一试，就写出了如下代码： //海草形状 var radialWave = function (u, v) { var r = 150; var z = Math.s...
three.js 06-04 之 TubeGeometry 高级几何体
zhulx_sz 的博客
12-28 3514
今天将要介绍的是 three.js 库中的 TubeGeometry 高级几何体。它将沿着一条三维样条曲线拉伸出一根管子。你可以通过顶点来定义路径，然后利用 TubeGeometry 来创建这根管子。    我们接下来的例子中，将会随机生成一些点，然后利用这些点来生成一根管道。大概思路就如下：我们首先生成一组类型为 THREE.Vector3 的顶点。然后再使用这些点创建管道之前，我们先要把这些点
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值