当前位置：首页 > article >正文

three.js+WebGL踩坑经验合集(5.2):THREE.Mesh和THREE.Line2在镜像处理上的区别

article 2025/1/30 4:10:25

本文紧接上篇：

(5.1):THREE.Line2又一坑：镜像后不见了

本文将解答上篇提到的3个问题，首先回答第二个问题，如何获取全局的缩放值。

scaleWorld这个玩意儿呢，three.js官方就没提供了。应该说，一般的渲染引擎都不会弄这个，而是把所有的变换都统一由matrixWorld来提供。

从矩阵提取缩放值，three.js也是提供了api，叫decompose(position:THREE.Vector3, quaternion:THREE.Quaternion, scale:THREE.Vector3)

使用者需要在外部创建好两个Vector3和一个Quaternion对象（四元数，处理旋转的，本文不展开聊），然后将其传入到对应的参数中，decompose方法将往这3个对象中写入值。

上文中的updateFace方法调整如下：

function updateFace(){
   var position = new THREE.Vector3();
   var rotation = new THREE.Quaternion();//这个我们无视，按类型要求传进去就是
   var scale = new THREE.Vector3();
   container.updateMatrixWorld();
   line2.updateMatrixWorld();
   line2.matrixWorld.decompose(position, rotation, scale);
   line2Material.side = scale.x * scale.y * scale.z > 0 ? THREE.FrontSide : THREE.BackSide;
}

这样的做法比上文提到的要优雅一些，至少它的编码没那么硬了。

在回答剩下的两个问题之前，笔者先给大家简单介绍下原生WebGL处理正反面显示的两个重要的api

1 gl.cullFace(face)

渲染时需要剔除哪个面，有效值为

gl.BACK（绘制正面，剔除背面，默认）,

gl.FRONT（绘制背面，剔除正面）

gl.FRONT_AND_BACK（正面和背面都剔除，这是画了个寂寞？本文不聊这个）

如果要开启双面，那就是什么都不剔除，此处没有一个值，而是用gl.enable(gl.CULL_FACE)和gl.disable(gl.CULL_FACE)代之。

2 gl.frontFace(clockwise)

WebGL底层通过三角面三个点在投影到屏幕上的顺逆时针顺序来定义正反面，默认设置为，顺时针代表正面，逆时针代表反面。然后可以通过该api去修改这一设置。

clockwise参数的有效值为gl.CW（顺时针，默认），gl.CCW（逆时针）

因为在上文的例子中，Mesh也是做了负缩放，也没开双面材质，按道理它镜像后是不可见的，所以three.js的底层会通过这两个处理正反面的api修复镜像后不能正确显示的问题。

笔者的摸索过程就不跟大家啰嗦了，直接告诉大家定位到代码在哪，一共3处

WebGLRenderer是渲染的核心类，但却看到了object.isMesh这样的补丁打在上面，所以架构上显得封装性不强，也不健壮（也许是性能使然？先不纠结这事）。我们可以看到，当被渲染的对象是Mesh的时候，正反面的逻辑依赖于世界矩阵的determinant函数返回值的符号。

determinant的实现代码如下：

如果你的线性代数还没完全还给老师的话，那这个式子你应该能看出来个所以然，就是矩阵M的行列式，数学概念叫秩，记为detM，det是determinant的简写。

如果你是个数学学霸，那大概还会记得正定矩阵和负定矩阵的概念。实际上，它可以准确匹配到物体的正负缩放上。其证明过程，笔者没有很轻易地通过搜索引擎获取得到，所以后面笔者会单开一篇文章给大家推导一遍。

言归正传，这里加了个补丁isMesh，那是不是再加个isLine2，问题就解决了？

很遗憾，事情没有想象中那么简单，因为Line2就是Mesh的子类：

那我们试试排除Line2？

测试发现，这样做的确可以把问题解决掉。

Line2之所以不应该跟随镜像调整正反面，是因为Line2虽然也是个矩形面片，但它的坐标值是动态计算的，先把端点的位置通过世界矩阵投影矩阵算好到屏幕的2D画布上，然后再向着固定的方向生成4个点，所以不管Line2缩放的符号是什么，4个点的绕序都是固定的。如果换成单面材质的PlaneMesh，那么你会发现相机旋转个180度之后，PlaneMesh就会看不见了，而且“线”的粗细还会随着镜头的移动而发生变化。

var line2Geometry = new THREE.PlaneGeometry(100, 5);
var line2Material = new THREE.MeshBasicMaterial({color: 0xFF6600});
var line2 = new THREE.Mesh(line2Geometry, line2Material);
line2.position.set(60, -15, 0);
line2.rotation.set(0, 0, Math.PI / 3);
container.add(line2);