Javascript 如何在用户可见three.js渲染时启动计时器

我正在构建一个用于执行心理测量视觉搜索测试的应用程序。例如，我将在屏幕上渲染一组“L”，并可选地渲染一个“T”。挑战在于测量从图像被绘制到监视器的那一刻起到用户按键指示图像中是否存在“目标”的决定为止的时间

我使用Three.js（而不是2D库），因为我想在场景以正交方式渲染（传统的pyschometric 2D视觉搜索）和以透视方式渲染（例如，教育游戏）时评估搜索性能。目标/干扰物将是3D立方体、多面体或文本（即L和T），最多可能有50个，因此根本不是一个非常复杂的场景

我确实发现了之前的一个Q/a，目标是确定渲染何时完成，以便保存图像。适合我的需要可能看起来像这样

function init() {...

    mesh = new THREE.Mesh (...  //build the targets and distractors
    scene.add (mesh);
    requestAnimationFrame(startTimerWaitForKeyDown);
    render ();
}

我的理解正确吗？在场景的初始渲染（）已同步到屏幕后，将调用startTimerWaitForKeyDown函数，作为浏览器准备渲染第二帧的指示，准备好渲染第二帧是第一帧已完成并已同步到监视器的隐含证据

我从不渲染第二帧。只是尝试在测试对象（或其最佳代理）可以看到第一帧渲染时启动计时器

精确到一两毫秒是可以的…我只是想避免16.66ms的渲染/帧同步不确定性

谢谢

法学博士

附：前面的问答在这里