018-场景遍历和世界坐标系

该系类文章主要用于记录学习three.js的过程,包括做的一些demo,笔记,以及个人思考;主要学习的课程是 神光的小册《three.js通关秘籍》,感兴趣的可以购买学习,质量还是可以的

坐标系

坐标系的分类的详细解释

坐标系一般分为世界坐标系 和局部坐标系 ,还有group坐标系

局部坐标系:就是某个物体相对所在group中的坐标

自身坐标系:就是某个物体自身的坐标

世界坐标系:全局坐标系就是把局部坐标系与group坐标系进行合并,所得到的坐标系

坐标系的操作方法

  • 如何获取坐标
ini 复制代码
# 获取全局坐标
const pos = new THREE.Vector3();
mesh.getWorldPosition(pos);
#  获取group坐标
console.log(group.position);
# 获取局部坐标(自身坐标)
console.log(mesh.position);

遍历场景

通常情况下,我们的场景非常的复杂,可能包括很多的分组,分组里面又包含了很多物体,很多时候我们需要获取某一个物体,然后再进行操作,那么如何获取呢?

遍历场景这棵树结构

ini 复制代码
scene.traverse((obj) => {
    if(obj.isMesh) {
        obj.material.color = new THREE.Color('pink');
    }
});

找到某个物体

ini 复制代码
# 通过取名字获取
# 给mesh设置名字
mesh.name = 'abc';
mesh.name = 'eeee';
# 通过名字获取(当然也可以用 id  来获取,设置的时候也用id)
const target1 = scene.getObjectByName('abc');
const target2 = scene.getObjectById('eeee');
相关推荐
Java后端的Ai之路10 小时前
06-React-Props
前端·react.js·前端框架
Flynt10 小时前
开源"间谍卫星"说数据全是真的,我把它的免key数据源挨个试了一遍
前端·开源·数据可视化
Csvn11 小时前
渲染管线
前端
程序员大阳11 小时前
副队长CSS教程(33)–圆角与透明
前端·css·透明·圆角
志尊宝11 小时前
Vue3 零基础每日笔记(082):文件上传实战——el-upload 校验、自定义上传、头像预览
前端·javascript·vue.js·笔记·#javascript·#vue.js
鬼手点金12 小时前
opencode-rules 插件
java·开发语言·前端·人工智能·chrome·git·github
柳杉12 小时前
借助 Codex 和可视化工作流,从调研到完整实现,3D 大屏竟然可以这么简单
前端·ai编程·数据可视化
IMPYLH12 小时前
HTML 的 <wbr> 元素
前端·html
Dovis(誓平步青云)13 小时前
常用命令藏得太深?怎么做一个快捷命令坞
运维·前端·自动化·音视频·prometheus
IT_陈寒13 小时前
Vite的这个问题坑了我三天,原来如此解决!
前端·人工智能·后端