tQuery 选择器完全教程：像操作 DOM 一样操作 3D 场景
tQuery 选择器完全教程像操作 DOM 一样操作 3D 场景【免费下载链接】tqueryextension system for three.js项目地址: https://gitcode.com/gh_mirrors/tq/tquerytQuery 是 three.js 的扩展系统extension system for three.js它最令人惊艳的特性之一就是这套tQuery 选择器你不需要再像原生 three.js 那样手动遍历场景树、层层比较节点类型只需一行字符串就能像 jQuery 操作 DOM 一样精确定位 3D 场景里的任意物体。本文是一份面向新手的 tQuery 选择器完全教程带你从零掌握 id、class、几何体等选择器的用法并配合真实示例与性能基准让你的 3D 开发效率立刻翻倍。为什么你需要 tQuery 选择器在原生 three.js 中想找出场景里所有 torus 几何体的物体往往要写十几行递归遍历代码还要小心处理instanceof判断。而 tQuery 把这一整套逻辑封装成了选择器引擎源码位于 js/tquery.object3d.js你只需要var world tQuery.createWorld().boilerplate().start(); tQuery(torus).each(function(torus){ /* 处理每个圆环 */ });是的就是这么简单。tQuery 选择器直接复用开发者熟悉的 CSS 选择器语法学习成本几乎为零——会写 jQuery 就会用 tQuery。tQuery 选择器快速上手3 步完成第一个选择从零开始体验选择器的完整流程可以参照项目里的官方示例 tips/ala-jquery/01-add-a-class/index-dst.html第 1 步创建世界并添加物体var world tQuery.createWorld().boilerplate().start(); tQuery.createTorusKnot().addTo(world);第 2 步给物体打上标签tQuery(torusKnot).addClass(foobar);第 3 步用选择器定位并操作tQuery(.foobar).scaleXBy(2); // 所有带 foobar 类的物体横向放大 2 倍整个过程不超过 10 行代码。物体的创建 API 统一位于 js/tquery.core.create.jscreateCube、createTorus、createSphere等工厂方法一应俱全。五大 tQuery 选择器类型详解tQuery 选择器引擎支持以下类型全部由tQuery.Object3D._select()与_selectItemMatch()解析实现tquery.object3d.js。1. id 选择器#精准定位唯一物体给物体设置唯一 id再通过#前缀查找和 DOM 里的getElementById异曲同工tQuery.createTorus().id(myId).addTo(world); var obj tQuery(#myId); obj.id(); // 返回 myId示例见 tips/ala-jquery/02-add-an-id/index-dst.html。id 选择器适合场景里只有一个的对象比如玩家、主摄像机。2. class 选择器.批量管理同组物体class 选择器是批量操作的利器配合addClass、removeClass、hasClass三个方法使用tQuery(sphere).addClass(enemy).addTo(world); tQuery(.enemy).scaleXBy(2); // 所有敌机同时放大 tQuery(.enemy).hasClass(enemy); // true tQuery(.enemy).removeClass(enemy); // 移除标签3. 几何体选择器按形状筛选这是 tQuery 独有的杀手锏——直接输入几何体类型名小写、去掉 Geometry 后缀引擎自动匹配tQuery(cube); // 所有立方体 tQuery(torus); // 所有圆环 tQuery(sphere); // 所有球体它的实现原理很有意思引擎运行时扫描THREE命名空间里所有*Geometry类并生成可匹配关键词列表tquery.object3d.js所以你用的 three.js 版本里新增的任何几何体都能立即被选择器支持。4. 灯光选择器按光照类型筛选灯光也可以被选择方便统一调整场景光照tQuery.createPointLight().addTo(world); tQuery(pointlight).position.set(1, 2, 3);同样支持directionallight、spotlight、ambientlight、hemispherelight等还提供了light这个通用关键词匹配所有灯光。5. 属性选择器与通配符更灵活的匹配tQuery([namemyChar]); // 按 name 属性精确匹配 tQuery(*); // 匹配场景中所有物体属性选择器当前支持name键与运算符通配符*则适用于全场景扫描。组合与层级选择像 CSS 后代选择器一样用真正强大的是组合选择用空格连接多个条件实现层级/叠加筛选语法与 CSS 后代选择器完全一致// 筛选 torus 中带 enemy 类的 tQuery(torus.enemy); // 先筛 cube再在其中找带 power 类的子物体 tQuery(cube .power);选择器解析时会递归遍历节点树_crawls方法tquery.object3d.js默认从tQuery.world的场景根节点开始搜索也可以传入第二个参数指定搜索根节点。选择结果操作链式 API 与实用方法选择器返回的是一个 tQuery 对象tQuery.Node它封装了底层 THREE 对象数组支持丰富的链式操作方法作用源码位置each(cb)/get(i)/length遍历 / 取值 / 数量tquery.node.jsaddTo(world)/removeFrom(world)加入 / 移出场景tquery.object3d.jsadd(obj)/remove(obj)/detach()父子节点操作tquery.object3d.jstraverse(cb)递归遍历子树tquery.object3d.jsdata(key, val)自定义数据存取tquery.node.js几乎每个方法都会返回this因此可以放心地写出tQuery(.enemy).scaleXBy(2).position.set(0,1,0).addTo(world)这样一气呵成的链式代码。性能如何官方基准测试告诉你tQuery 官方在 bench/bench-tquery.selector.js 中内置了三组选择器基准tQuery(torus)几何体选择、tQuery(#myId)id 选择、tQuery(.myClass)class 选择。选择器底层全部基于原生循环与正则匹配没有多余的 DOM 开销在普通场景几百个物体下性能完全不用担心配合 bench/ 目录下的 benchmark.js 跑一遍即可得到你机器上的真实对比数据。tQuery 选择器实战场景推荐游戏开发用tQuery(.enemy)批量控制敌方单位用tQuery(#player)精准操控主角角色示例见 plugins/minecraft/交互设计给物体挂addClass(clickable)再统一筛选绑定点击事件交互示例见 plugins/domevent/场景调试tQuery(*).each(console.log)一条命令导出整个场景树结构动画批量处理组合tQuery(cube.enemy)一次选中、一次动画配合 plugins/tween/ 实现流畅的批量运动结语tQuery 选择器把 CSS/jQuery 的成熟心智模型带入了 3D 开发让 three.js 场景管理从手写遍历进化成一句话搞定。无论你是刚接触 three.js 的初学者还是想提升开发效率的老手这套选择器都值得放进你的工具箱。想深入源码核心实现集中在 js/tquery.object3d.js 与 js/tquery.node.js 两个文件clone 仓库https://gitcode.com/gh_mirrors/tq/tquery后即可边读边跑示例祝你玩得开心【免费下载链接】tqueryextension system for three.js项目地址: https://gitcode.com/gh_mirrors/tq/tquery创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
