three.js 延迟更新本地剪裁平面答案

【问题标题】：three.js delay in updating local clipping planesthree.js 延迟更新本地剪裁平面
【发布时间】：2017-06-07 22:57:17
【问题描述】：

为了实现一个可滚动的文本容器（使用自己的位图字体，基本上是小的精灵网格），我使用了本地剪切平面。当我的文本容器移动时，剪切平面会根据容器的全局边界进行更新。除了快速移动之外，这非常有效。在这种情况下，裁剪平面会稍微延迟到容器后面，从而使文本在不应该出现的地方发光。

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

可能是因为在threejs框架中实际的裁剪是如何应用的？

这是一个小代码 sn-p，它显示了我如何使用两个辅助网格计算我的上剪切平面。一个是垂直放置在我的文本对象上的平面（图中的红色平面）。另一个是 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

【问题讨论】：

一些代码怎么样？
@pailhead 我添加了一个短代码 sn-p 并带有一张展示我的概念的图片

标签： three.js

【解决方案1】：

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

【讨论】：