Threejs入门之十四:Threejs中的组(Group)对象

这篇具有很好参考价值的文章主要介绍了Threejs入门之十四:Threejs中的组(Group)对象。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

组其实就是一个集合,将不同的物体添加到一个组中,就形成了一个集合;
比如我们可以创建两个物体,然后将这两个物体使用group.add方法添加到同一个组中

// 创建几何体
const geometry = new THREE.BoxGeometry(50,50,50)
// 创建材质
const material = new THREE.MeshBasicMaterial({
  color:0x00ff00
})
// 创建物体A
const cubeA = new THREE.Mesh(geometry,material)
cubeA.position.set(100,0,0)
// 创建物体B
const cubeB = new THREE.Mesh(geometry,material)
cubeB.position.set(-100,0,0)
// 创建组
const group = new THREE.Group()
// 将物体A添加到组中
group.add(cubeA)
// 将物体B添加到组中
group.add(cubeB)
// 将group添加到scene中
scene.add(group)

Threejs入门之十四:Threejs中的组(Group)对象
Group的特性
在Threejs的官方文档中介绍Group时说它几乎与Object3D相同,因此,Group的属性和Object3D的相同
.children属性
使用group.children属性可以查看所有group的子对象

console.log('group的子对象',group.children)

.name属性
使用group.name属性可以给组命名

group.name='幸福花园小区建筑'

.visible
对象的显示和隐藏

group.visible = false  //隐藏

平移缩放旋转
组的平移缩放旋转等操作会影响组里面的子对象,即子对象会跟随组对象一起变化
使用group.translate对组进行平移

group.translateX(100)

Threejs入门之十四:Threejs中的组(Group)对象
子对象的坐标跟着平移了
使用group.scale.set来设置组的缩放

group.scale.set(0.5,0.5,0.5)

Threejs入门之十四:Threejs中的组(Group)对象
注意看这里同时使用了向x轴平移和缩放,其对各个物体的位置影响是综合作用的结果。
使用group.rotate设置组的旋转
group.rotateY(Math.PI/4)
.traverse()方法 递归遍历
可以通过递归遍历的算法去遍历Threejs一个模型对象包含的所有后代

group.traverse(function(obj){
  console.log(obj);
  // 判断子对象是否是物体,如果是,更改其颜色
  if(obj.isMesh){
    obj.material.color.set(0x0000ff)
  }
})

.getObjectByName()方法 通过名称查询某个模型

const cubeANode = group.getObjectByName ("cubeA")

.remove() 移除对象
可以通过.remove() 方法删除父对象中的一个子对象

group.remove(cubeA)

可以一次移除多个子对象

group.remove(cubeA,cubeB)

本地坐标
本地坐标也叫局部坐标,任何一个模型对象的本地坐标都是其自身的position属性,通过设置position属性设置模型对象的本地坐标

cubeA.position.set(0,10,0)

世界坐标
世界坐标是模型自身position和所有父对象position累加的坐标。
这里要注意一点,改变父对象的position,其子对象也会受到影响,做相应的改变,因此,此时子对象的position应该是父对象.position和子对象.position叠加的结果。

.getWorldPosition() 获取世界坐标
可以通过.getWorldPosition()方法来获取世界坐标,要获取世界坐标,首先需要先定义一个三维向量
然后通过.getWorldPosition()方法将世界坐标传递给三维向量

// 声明一个三维向量用来表示某个坐标
const worldPosition = new THREE.Vector3()
// 获取物体的世界坐标
cubeA.getWorldPosition(worldPosition)

给子对象添加辅助坐标系
可以通过.add()方法给子对象添加一个辅助的局部坐标系,方便观察

const cubeAaxesHelper = new THREE.AxesHelper(50)
cubeA.add(cubeAaxesHelper)

好了,关于Threejs中的Group对象,就介绍到这里,更多的功能可以查看官方文档,喜欢的关注点赞哦文章来源地址https://www.toymoban.com/news/detail-462640.html

到了这里,关于Threejs入门之十四:Threejs中的组(Group)对象的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Threejs入门之四:Threejs中的光

    前面我们用Threejs创建了一个3D立方体到浏览器,并使其跟随鼠标旋转和缩放,但是,上帝说要有光,于是就有了光~~~额,好吧,这一节我们来认识下Threejs中的灯光,Threejs提供了很多灯光的API,这里我们主要了解下环境光(AmbientLight)、点光(PointLight)、平行光(DirectionalLight)、和聚

    2024年02月12日
    浏览(41)
  • Threejs进阶之十:让模型移动到鼠标点击的指定位置

    上一节中我们实现了物体沿指定轨迹移动的动画效果,这一节我们来实现让模型移动到鼠标点击的制定位置的动画效果。 先看下实现后的最终效果 要实现上面的动画效果,我们需要通过以下步骤来实现 我们需要监听鼠标的点击事件,获取鼠标点击点相对浏览器可视区域左上

    2024年02月09日
    浏览(53)
  • Threejs进阶之十五:在Thereejs 使用自定义shader

    先看下这次代码最终要实现的效果, 效果分析: 要实现上述效果,我们需要两张图片,作为纹理贴图,使其图案产生明暗效果;然后通过定义ShaderMaterial对象通过自定义Shader实现上述效果;后面代码中会进行详细分析; 这里我们先介绍下基础知识 Shader(着色器)是一种在图

    2024年02月05日
    浏览(40)
  • Threejs进阶之十一:使用FontLoader和TextGeometry创建三维文字

    在Threejs中我们可以通过FontLoader和TextGeometry结合使用来创建三维文字,FontLoader用于加载JSON格式的字体,FontLoader返回值是表示字体的Shape类型的数组;TextGeometry用于将文本生成为单一的几何体。下面我们先来了解下这两个类 用于加载JSON格式的字体的类。返回font, 返回值是表示

    2024年02月06日
    浏览(44)
  • Verilog基础之十四、FIFO实现

    目录 一、FIFO 1.1 定义 1.2 实现方式 1.3 实现原理   二、代码实现 三、仿真结果 3.1 复位阶段 3.2 写入阶段 3.3 读取阶段 3.4 同时读写或不读不写 四、参考资料     FIFO(First in First out)为先进先出队列,具有存储功能,可用于不同时钟域间传输数据以及不同的数据宽度进行数据

    2024年02月13日
    浏览(30)
  • 软件设计模式系列之十四——代理模式

    代理模式是一种结构型设计模式,它允许一个对象(代理)充当另一个对象的接口,以控制对该对象的访问。代理模式通常用于控制对真实对象的访问,以实现一些额外的功能,例如延迟加载、权限控制、日志记录等。这种模式属于结构型设计模式,因为它关注对象之间的组

    2024年02月08日
    浏览(35)
  • Threejs进阶之十三:CSS3DRenderer与Tween.js实现粒子小球按规律变化

    今天我们使用CSS3DRenderer+Tween.js实现Threejs官方示例中的粒子小球按规律变化的效果,先看下最终实现的效果 先来分析下,这个页面的动画效果是由512个小球组合起来的四种不同变化,分别是曲面、立方体、随机和圆球四种变化;下面我们来实现下这个效果 老套路,要实现上面

    2024年02月03日
    浏览(53)
  • JavaCV的摄像头实战之十四:口罩检测

    这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本文是《JavaCV的摄像头实战》系列的第十四篇,如标题所说,今天的功能是检测摄像头内的人是否带了口罩,把检测结果实时标注在预览窗口,如下图所示: 整个处理流程如下,实现口罩检测的关键

    2024年02月12日
    浏览(45)
  • Windows server 2016:无法打开此计算机上的组策略对象。你可能没有相应的权限。

    使用服务器管理器打开本地安全策略,或使用win+R快捷键,输入gpedit.msc打开系统组策略时, 出现报错: 无法打开此计算机上的组策略对象。你可能没有相应的权限。 1、使用win+E快捷键打开资源管理器,点击”查看“,勾选”隐藏的项目“,因为C:WindowsSystem32GroupPolicy是一个

    2024年02月08日
    浏览(44)
  • Linux ALSA 之十四:ASOC DAPM 之 Widget & Path & Route 分析

    在前面文章已经介绍了 DAPM 基本知识,了解了代表音频控件的 widget,并且系统中注册的各种 widget 需要互相连接在一起才能协调工作,故对于 ASOC Driver 中当使用到 DAPM 时需要定义 Widget 以及连接路径的 routes(ASOC DAPM Core 注册 Route 时会对连接的两个 widget 建立 path)。在本节中

    2024年02月06日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包