ThreeJS入门（116）：THREE.Group 知识详解，示例代码

最新推荐文章于 2025-01-15 00:00:00 发布
最新推荐文章于 2025-01-15 00:00:00 发布
阅读量971 收藏 16
点赞数 9
CC 4.0 BY-SA版权
分类专栏： # ThreeJS综合教程500+ 文章标签： 大剑师 threejs教程 threejs示例 threejs入门
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/142147114

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，优快云知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

在这里插入图片描述

查看本专栏目录 - 本文是第 116篇入门文章

文章目录


THREE.Group 是 Three.js 中用于组织多个对象的一种方式。它类似于一个容器，可以包含多个 THREE.Object3D 子对象，如几何体、灯光、相机等。使用 THREE.Group 可以方便地管理和操作一组对象，比如同时改变它们的位置、旋转或缩放。

构造函数

构造函数 new THREE.Group() 不接受任何参数。它创建了一个新的 <

了解本专栏 订阅专栏 解锁全文 超级会员免费看
ThreeJS入门（219）：THREE.GLTFExporter 知识详解，示例代码
大剑师兰特的GIS世界
01-12 759
`THREE.GLTFExporter` 是 Three.js 中的一个导出器，用于将 Three.js 场景中的内容导出为 GLTF（GL Transmission Format）格式。GLTF 是一种高效的文件格式，用于在不同的应用程序和平台之间交换 3D 场景和模型。它支持各种 3D 内容，包括几何体、纹理、动画和光照等。
ThreeJS入门（204）：THREE.GLTFLoader 知识详解，示例代码
大剑师兰特的GIS世界
12-27 1170
`THREE.GLTFLoader` 是 Three.js 中的一个加载器，用于加载 `.gltf` 或 `.glb` 文件格式的 3D 模型。GLTF（GL Transmission Format）是一种高效的文件格式，用于存储和传输 3D 模型及其元数据。`.gltf` 是一个 JSON 文本格式，而 `.glb` 是二进制格式，两者都可以包含完整的 3D 场景、模型、纹理、材料等信息。
Threejs入门之十四：Threejs中的组(Group)对象
九仞山的专栏
04-05 4142
详细介绍了Threejs中组Group的属性与方法，本地坐标系(局部坐标系)和世界坐标系
Three.js（七）—— 组对象Group、层级对象
summer_du的博客
01-27 5983
文章目录7.1 组对象Group、层级对象Group案例查看子对象.children场景对象结构.add() 方法.remove()方法7.2 对象节点命名、查找、遍历模型命名(.name属性)树结构层级模型递归遍历方法.traverse()查找某个具体的模型7.3 本地位置坐标、世界位置坐标.getWorldPosition()方法建立世界坐标系概念本地缩放系数.scale本地矩阵.materix和世界矩阵.matrixWorld 7.1 组对象Group、层级对象 Group案例 //创建两个网格模型m
Three.js——七、Group层级模型
NanChen的博客
05-30 2265
通过 THREE.Group 类创建一个组对象 group,然后通过 add 方法把网格模型 mesh1、mesh2 作为设置为组对象 group 的子对象，然后在通过执行 scene.add(group)把组对象 group 作为场景对象的 scene 的子对象。也就是说场景对象是 scene 是 group 的父对象，group 是 mesh1、mesh2 的父对象。我们在开发的时候，会优先加载外部的模型，之后要对模型上添加标签锕，标点啊等等，就需要批量给子对象设置节点名称。
Three.js组对象Group、层级模型
u014291990的博客
12-01 4615
组对象Group、层级模型 本文是Three.js电子书的6.1节 本节课的目的是为了大家建立层级模型的概念，所谓层级模型，比如一个机器人，人头、胳膊都是人的一部分，眼睛是头的一部分，手是个胳膊的一部分，手指是手的一部分…这样的话就构成一个一个层级结构或者说树结构。 Group案例 在详细讲解层级模型之前先通过Threejs的类Group实现一个网格模型简单的案例。 下面代码代码创建了两个网格模型...
Three.js - 使用 THREE.Group 对象组合
热门推荐
ithanmang
08-20 1万+
THREE.Group前面已经介绍过，加载外部模型的时候，基本上都是一个组合对象，因为外部模型都是比较大的，把零散的模型组合到一块便于操作，可以使用THREE.Group来操作一组对象，包括旋转，缩放，移动等，里面的子对象都会受到影响。 示例：http://ithanmang.com/threeJs/home/201808/20180820/01-group.html THREE.Group继...
ThreeJS入门（222）：THREE.STLExporter 知识详解，示例代码
最新发布
大剑师兰特的GIS世界
01-15 981
`THREE.STLExporter` 是 Three.js 中的一个导出器，用于将 Three.js 场景中的几何体导出为 STL（STereoLithography）格式。STL 是一种广泛使用的文件格式，主要用于快速原型制作、3D 打印和 CAD（计算机辅助设计）领域。STL 文件主要包含三维模型的三角网格信息，即面片（facet）的顶点位置和法线。
ThreeJS入门（139）：THREE.PropertyMixer 知识详解，示例代码
大剑师兰特的GIS世界
10-26 445
THREE.PropertyMixer 是一个用于处理动画的类，它可以将多个属性（如位置、旋转、缩放等）混合在一起，以便在动画过程中平滑地过渡。这个类主要用于 Three.js 中的骨骼动画和形状动画。
threejs 组-层级模型 | 本地坐标和世界坐标 | 局部坐标系和世界坐标系 | 本地矩阵.materix和世界矩阵.matrixWorld
好好学习天天向上
04-08 2396
①会更新该三维物体的本地矩阵属性，②本地矩阵与父对象的世界矩阵做乘积，③依次更新该三维物体后代的世界矩阵（迭代①②③）。同一个三维物体拥有本地坐标与世界坐标两个坐标，在页面看见的位置是世界坐标的位置。这里的本地坐标和世界坐标是相对于有无父元素来说，坐标都是基于世界坐标系的位置。可以类比本地坐标与世界坐标，物体的运动参考坐标系永远是世界坐标系。1.可以看见本地坐标变了，但本地坐标系位置是没有变化的。2.打印世界坐标与本地坐标，可以发现都是一样的。，现在是将所有模型先进行分组，然后将分组后的分组模型。
Three.js层级模型Group
u014291990的博客
11-09 3306
Three.js层级模型Group 本文通过Three.js的一个类Group来介绍Threejs层级模型的概念，如果你对WebGL层级模型已经有一定的概念，直接把重点放在Group的了解上，如果没有层级模型的概念，就借着对Three.js APIGroup的介绍了解下该概念。 这里以一个机器人三维模型来说下层级模型的概念，比如一整个机器人通过一个组对象Group表示，然后一条腿用一个组对象Gro...
Three.js入门学习笔记11：Three.js-Group组合对象
基本无害的博客
03-17 2081
参考学习 http://www.yanhuangxueyuan.com/doc/Three.js/Group.html https://blog.csdn.net/ithanmang/article/details/80965712 http://www.yanhuangxueyuan.com/Three.js/ https://www.cnblogs.com/guxingy/p/11956390...
three.js 08-01 之 Group 组合对象
zhulx_sz 的博客
02-01 7623
在前面的一些分享中，你会发现有用到过对象组合。例如前面一些分享示例中提到的用THREE.SceneUtils.createMultiMaterialObject(geometry, materials) 函数创建的物体对象，其实就是创建了一个 THREE.Group 组。这个函数创建的组包含多个副本，即针对 materials 材质数组参数的每一个材质，都会创建一个对应的网格并添加到组中，这样的组
three.js组对象Group、层级模型
yinge0508的博客
02-16 1132
创建两个模型对象添加到组对象中，效果如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&..
three.js使用Group对象进行对象组合(vue中使用three.js48)
点燃火柴的博客
01-06 1051
对象组合1.demo效果2.实现要点2.1 创建立方体和球体2.2 创建组合对象2.3 创建旋转动画3.demo代码 1.demo效果 如上图，该demo支持以下功能： 可以通过cubePosX、cubePosY、cubePosZ属性单独控制立方体的位置，通过cubeScale属性单独控制立方体的缩放比例。 可以通过spherePosX、spherePosY、spherePosZ属性单独控制球体体的位置，通过sphereScale属性单独控制球体体的缩放比例 可以通过groupPosX、groupPos
【Three.js】八、three.js几何体的组合与合并
MAXLZ的博客
09-17 4910
【Three.js】七、three.js粒子、精灵、点云
[webGL学习]基于three.js构建WebGL实例第三讲
图解AI
10-07 8961
大多程序员在刚开始理解3D(webGL)的知识时,通常对三维空间可能理解的比较困难,你也可能有困难理解不同的光线是如何工作的，或轴甚至如何位于空间。 今天，我会帮你处理这些问题。three.js所拥有一切必要的手段来为这个 - 帮手。在今天的例子中，我已经准备好为你工作的所有现有佣工示范：ArrowHelper，AxisHelper，BoundingBoxHelper，CameraHelp
Threejs 快速入门
dukai392的博客
04-09 2400
现在什么都是3D，看电影3D，打游戏3D，估计3D打车，很快就会面世。那么作为前端开发的标准语言，JS和3D能不能也搞出点大新闻呢？刚好最近在做一个活动时，就遇到了需要播放3D全景视频的需求，顺便就研究了一下Threejs，一个用于在浏览器中绘制3D图像的JS库（https://github.com/mrdoob/three.js），这篇文章算是做个笔记，也希望能帮助到那些想快速入门的同学。最小环...
three.js基础笔记
new_rike的博客
08-18 387
渲染器对象、场景对象、摄像机、三维坐标轴、全局光源、几何体、材质对象、网格对象、组容器（Group对象）新建渲染器对象、场景对象、摄像机、全局光源、Group对象/网格对象。// 创建组容器 （group对象)（非必须）// 将网格对象或组容器添加到场景对象中。// 新建一个光源 该光源作用于全局对象。//几何体和材质组合 新的网格对象。//将网格对象添加到组容器。// 将全局光源添加到场景中。// 新建三维坐标轴。// 将坐标添加到场景中。// 新建渲染器对象。three.js基础对象。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还是大剑师兰特

打赏一杯可口可乐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值