three.js学习（6）：Geometry Objects

最新推荐文章于 2025-07-03 16:54:11 发布
原创 最新推荐文章于 2025-07-03 16:54:11 发布 · 610 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js #threejs

本文详细介绍了Three.js中可放置于场景的各种2D和3D对象，包括曲线、文字、几何体及通过加载器导入的模型。覆盖了从基本的BoxGeometry到复杂的SplineCurve，以及TextGeometry等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

Three.js引擎开发：Three.js控制器开发_（3）.Three.js中 OrbitControls 的使用
chenlz2007的博客
06-06 710
提供了一些事件，可以用来监听用户的操作。change：每当控制器状态改变时触发。start：用户开始操作时触发。end：用户结束操作时触发。可以通过设置的和zoomSpeed来调整旋转和缩放的速度。默认情况下，的目标点是(0, 0, 0)，可以通过设置来改变目标点。是 Three.js 中一个非常强大的控制器，可以帮助开发者实现复杂的相机控制效果。通过合理配置和使用，可以在虚拟现实游戏中提供更好的用户体验。本节详细介绍了的原理、基本使用、高级用法、性能优化和常见问题的解决方案，希望对您的开发工作有所帮助。
Three.js引擎开发：Three.js输入与交互系统_（12）.Three.js事件处理机制
chenlz2007的博客
06-12 923
在虚拟现实游戏中，事件处理机制是实现用户与游戏世界交互的关键部分。Three.js 提供了多种方式来处理用户输入和场景中的事件，使得开发者可以轻松地创建交互式3D应用。本节将详细介绍Three.js中的事件处理机制，包括如何处理鼠标事件、键盘事件、触摸事件以及如何使用Raycaster实现更复杂的交互。鼠标事件是最常见的用户输入方式之一。在Three.js中，可以通过监听HTML元素的事件来处理鼠标操作。以下是一些常见的鼠标事件及其处理方法：首先，我们需要在HTML元素上监听鼠标事件。通常，我们会监听元素，
从族实例（FamilyInstance）中取得几何对象（GeometryObject）（Revit二次开发）
weixin_46433786的博客
01-13 3398
几何对象（GeometryObject） 根据Revit API 文档，我们可以得到下面的结构图。 既然是几何，那就逃不过点、线、面、体、这些概念。 对应的点、线、面、体： 点： Point 线： Curve、 Edge、PolyLine、Profile 面： Face、Mesh 体： Solid GeometryElement 和 GeometryInstance 是GeometryObject的集合。 GeometryObject也是这些类的基类。 几何实例（GeometryInstance） 几何实
Revit API 几何专题 1：几何类库概述 GeometryObject
极客BIM工作室
03-21 2729
几何类库 Revit API 提供了一套完整的几何库。既然是几何库，那就逃不过这些概念：点、线、面、体。 那么，对于任意的几何库，实际上，你要关系的东西逃不过下面的表格，（点 / 线 / 面 / 体）与（点 / 线 / 面 / 体）之间的关系。 这些类的基类都是 GeometryObject。对应的点、线、面、体： 点： Point 线： Curve、 Edge、PolyLine、Profil...
Three.js开发必备：几何体BufferGeometry顶点详解
前端开发工程师
06-12 984
threejs的而长方体BoxGeometyr、球体SphereGeometry等几何体都是基于BufferGeometry类构建的，BufferGeomerty是一个没有任何形状的空几何体，你可以通过BufferGeomerty自定义任何几何形状，具体一点说就是定义顶点数据。
three.js 内置的几何体Geometry
淋雨一直走~
12-23 2132
three.js学习笔记目录 案例效果 基本案例效果地址（上一次笔记已经演示了） 所有案例效果地址 前言 前面我们了解了，一个three.js三大基础renderer，camera，scene和响应式three.js 现在我们来学习一下three.js内置的geometry。three.js提供了很多的几何体给我们直接使用， 我就不多说了直接看代码(有点多)： <!DOCTYPE html> <html lang="en"> <head> <meta cha
three.js 源码注释（八十二）extras/geometries/RingGeometry.js
omni360的专栏
02-01 1925
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
three.js中绘制RingGeometry不显示
paradoxaaa_的博客
06-01 411
在项目中想要实现圆弧绕立方体旋转的效果 结果绘制出来的圆弧不显示 多次调整位置 圆弧终于显示出来了 但只有一个角度能观察到。查看了官方文档发现原来是少了个配置项side: THREE.DoubleSide。加上之后运行就可以显示了。
Three.js开发必备：射线拾取模型包含拾取gltf模型案例
最新发布
前端开发工程师
07-03 923
本文详细介绍了Three.js中射线拾取模型的应用。首先讲解了射线Ray的基本概念，包括起点.origin和方向.direction的设置方法，以及如何使用.intersectTriangle()方法检测射线与三角形的交叉点。接着介绍了射线投射器Raycaster，它通过.intersectObjects()方法实现模型拾取，返回交叉点坐标、距离和对象信息。
Three.js引擎开发：Three.js控制器开发_（5）.Three.js中 FirstPersonControls 的使用
chenlz2007的博客
06-06 677
在虚拟现实游戏中，FirstPersonControls 是一种常用的控制器，它允许玩家以第一人称视角进行游戏。这种控制器模拟了玩家在游戏世界中的移动和视角变化，提供了沉浸式的游戏体验。在本节中，我们将详细介绍如何在 Three.js 中使用 FirstPersonControls 控制器，包括其基本原理、配置方法和实际应用。
Three.js引擎开发：Three.js粒子系统与特效_（19）.Three.js特效在不同平台的应用
chenlz2007的博客
06-11 674
在上一节中，我们已经学习了如何在Three.js中创建和配置基本的粒子系统。接下来，我们将探讨如何将这些粒子系统和特效应用到不同的平台，包括Web、移动设备和虚拟现实（VR）环境。不同的平台对性能和用户体验的要求不同，因此在实际开发中需要根据目标平台的特点进行优化和调整。Three.js粒子系统在Web平台上的应用非常广泛，可以用于创建各种视觉效果，如雨、雪、烟花、火花等。这些效果能够显著提升网站的互动性和视觉吸引力。让我们通过一个具体的例子来创建一个雨滴效果。这个例子将展示如何使用Three.js粒子系统
学习threejs，THREE.RingGeometry 二维平面圆环几何体
我哎GIS博客
12-26 2965
本文详细介绍如何基于threejs在三维场景中创建THREE.RingGeometry 二维平面圆环几何体，亲测可用。希望能帮助到您。一起学习，加油！加油！
ThreeJS入门（049）：THREE.LatheGeometry 知识详解，示例代码
大剑师兰特的GIS世界
09-29 702
`THREE.LatheGeometry` 是 Three.js 中用于创建回转几何体的一个类。回转几何体是指通过对一个二维轮廓沿某一轴（通常是 Y 轴）进行旋转而形成的三维几何体。这种方法非常适合创建各种对称的三维模型，如瓶子、杯子、碗等。
小程序使用threejs第三篇—介绍几种几何模型
WeiHan_Seven的博客
02-26 6075
在上一篇[小程序使用threejs第二篇—立方体展示并自动旋转与手势旋转](https://blog.csdn.net/WeiHan_Seven/article/details/104493821)中，我们还遗留了一个小问题，就是展示的立方体如何随手势旋转缩放，当我们处理了这个问题，接下来介绍几种几何模型，大家可以试着把他们添加到场景下再渲染出来...
Threejs学习：裁剪( clip编 )
太古时代的专栏
05-23 4670
参考：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 1625
threejs 模型部分裁剪
二、飞线或者路线的实现（TubeBufferGeometry：管道缓冲几何体）
张先森的博客
09-21 367
在做three大屏的时候我们经常会遇到绘制发光路线和指向的情况，那么就需要使用到管道（TubeBufferGeometry）这个API。。
（二十八）THREE.IcosahedronGeometry 知识详解
mad970906的博客
12-10 520
是 Three.js 中用于创建二十面体几何体的一个类。二十面体是一个由二十个等边三角形面组成的多面体，是五个柏拉图立体之一。在 Three.js 中，THREE.IcosahedronGeometry 允许用户通过参数来调整二十面体的大小和细分程度。构造函数接受两个参数来定义二十面体的大小和细分程度。
Threejs系列--2几何体
小猴子喝牛奶的博客
07-07 1369
Threejs系列--案例一（掌握场景设置）序言Treejs简介 随着上章基本知识的了解，相信你应该对Treejs基本流程及一些常见术语等有了基本的认识，本章将对场景设置进行详细讲解。 Treejs简介 treejs是基于原生WebGL封装运行的三维引擎。可以使用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。 ...
三.js 面包屑：Three.js图形与动画教程详解
在"threejs-crumbs"中，我们看到了对Three.js知识的模块化处理，每一个模块都是一块"面包屑"，指引着学习者逐步掌握Three.js的核心概念和功能。下面将详细解释这些面包屑所代表的知识点： 1. 定向光（Directional ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值