Three.js 如何显示坐标系、碰撞体和质心

前面几篇讲交互。这一篇回到模型本身 —— URDF 里除了 <visual> 描述的外观,还有三样渲染用不到、调模型时离不开的东西:关节坐标系、碰撞体、<inertial>。

它们默认都不显示,需要时再打开。

阅读更多

Three.js 如何实现悬停高亮与提示框

上一篇讲拖动关节时屏幕上那条辅助线。这一篇讲鼠标还没按下时的两件事:亮起来的那个零件,和跟着指针走的那个小框。

命中检测在拖动关节那篇里讲过 —— pointermove 发一条射线,从命中的 Mesh 往上找出 link 和 joint。这一篇从命中之后开始。

难点不在显示,在信息怎么从三维场景里出去:命中的结果在控制器手里,提示框却是画布外面一个普通的 DOM 节点。

阅读更多

Three.js 如何生成关节的运动轨迹

上一篇讲鼠标怎么拖着关节动。这一篇讲拖动时屏幕上那条辅助线 —— 它告诉用户”这个关节还能往两边走多远”。

这条线是拖拽开始时才出现的,一松手就消失。

阅读更多

Three.js 如何用鼠标拖动关节

上一篇讲了怎么给关节一个角度。但那套方法是给程序用的 —— 滑条、动画数据、算法,都能算出一个确定的数。这篇文章讲的是把这个数交给鼠标:按住机器人的某一截拖一下,关节跟着转。

难点在坐标系。鼠标是二维的,关节是三维的,中间要换三次。

阅读更多

Three.js 如何旋转和推拉关节

机器人模型加载进来之后,下一步是让它动。这篇不讲 URDF 怎么解析,只讲一件事:手上有一个关节角度、或者一段推拉距离,怎么在 Three.js 里让对应那截模型动起来。

阅读更多

Three.js 如何解析 URDF 机器人模型

机器人可视化的第一步,是把一个 URDF 文件变成 Three.js 场景里能渲染、能动的东西。

这件事听起来像是「加载一个模型」,但 URDF 根本不是模型文件。它里面没有顶点、没有法线、没有材质贴图,只有一个 XML 骨架,描述机器人由哪些刚体组成、这些刚体怎么连起来。真正的几何体(STL、DAE)是另外的文件。

所以 Three.js 要做的,是把这套「关系描述」翻译成一棵 Object3D 树。这篇分两部分:先讲 URDF 到底描述了什么,再逐段拆 URDFLoader 的源码,看它每一步在干什么。

阅读更多

光栅化

光栅化

前边的部分我们学习了MVP矩阵,如何把一个物体投影到一个规则立方体内([-1,1]3),如何把这个规则立方体内点的物体投影在屏幕上,转变为二维图像,这就是光栅化的过程、

屏幕 把东西画在屏幕上

当进行完 MVP 变换之后,所有需要绘制的点都变换到

的立方体空间中了。

阅读更多