Question

为了实现一个可滚动的文本容器（使用自己的位图字体，基本上是小的精灵网格）我使用局部剪切平面。当我的文本容器移动时，剪切平面会根据容器的全局边界进行更新。除快速移动外，这种方法效果很好。在这种情况下，剪裁平面在容器后面稍微延迟，使文本在不应该的位置闪耀。

我的第一个想法是更新剪裁平面的必要代码可能会导致延迟..但是当我使用时应用此顺序： 1.更新文本框位置 2.更新剪裁平面 3. render（）延迟仍然存在

理由是否可以在threejs框架中找到实际剪裁的应用方式？

这是一个小代码片段，展示了如何使用两个辅助网格计算我的上层clippin平面。一个是在我的文本对象上正交定位的平面（图中的红色平面）。另一个是THREE.Object3D，它位于上边缘的中间，用于计算正确的平面常数。

//  get the world direction of a helper plane mesh that is located orthogonally on my text plane
var upperClippingPlaneRotationProxyMeshWordDirection = _this.upperClippingPlaneRotationProxyMesh.getWorldDirection();

//  get the world position of a helper 3d object that is located in the middle of the upper edge of my text plane
var upperClippingPlanePositionProxyObjPosition = _this.upperClippingPlanePositionProxyObj.getWorldPosition();

//  a plane through origin which makes it easier for computing the plane constant
var upperPlaneInOrigin = new THREE.Plane(upperClippingPlaneRotationProxyMeshWordDirection, 0);

var dist = upperPlaneInOrigin.distanceToPoint(upperClippingPlanePositionProxyObjPosition);
var upperClippingPlane = new THREE.Plane(upperClippingPlaneRotationProxyMeshWordDirection, dist*-1);

//  clipping plane update
_this.myUpperClippingPlane.copy(upperClippingPlane);

picture showing the text object with clipping plane helpers

Answer 1

我找到了延迟的原因。在我的矩阵更新代码中，我只在文本对象移动时使用了updateMatrix（）。为了确保其子对象（包括辅助网格物体）立即更新，我必须调用updateMatrixWorld（true），这样可以确保正确计算剪切平面

three.js延迟更新局部剪裁平面

1 个答案: