javascript - 光线转换器的三个 js 性能不好

Question

所以我一直在尝试在三个 js 中进行光线转换，但我在 Firefox 和 chrome 中遇到了可怕的性能问题(但其他原因导致 chrome 相机出现橡皮筋，即使它是一个小型本地游戏)无论如何当我添加这段代码时到动画循环

                var intersects = raycaster.intersectObjects(sceneObjects);

                if (intersects.length > 0) {
                       var firstIntersectedObject  = intersects[0];
                       console.log(intersects[0].object.userData)
                       console.log(intersects[0].object.userData.glow )
                       if (intersects[0].object.userData.glow === 'true'){
                           console.log("GLOW")
                       }else{
                           console.log("NO!")
                       }
                       //intersects[0].object.material.wireframe = true
                       // this will give you the first intersected Object if there are multiple.
                    }

我的游戏开始变得卡顿，我不知道为什么有任何指示

Answer 1

不要在每一 帧上进行光线转换，而应该在一定时间间隔内进行光线转换。您可以使用 setTimeout 或 setInterval 或检查更新循环中的时间。

onUpdate() {
    // Code that runs once per frame

    // Check that we've waited long enough to raycast
    if (Date.now() - this.lastRaycast > this.raycastInterval && this.qRaycast) {
        this.handleRaycast();
        this.lastRaycast = Date.now();
        this.qRaycast = false;
    }
    requestAnimationFrame( () => this.onUpdate() );
}

我也只在鼠标移动时排队光线转换(如果鼠标不移动则没有理由继续光线转换)并且因为我在我的项目中有平移，我在平移移动期间禁用光线转换以防止移动期间的任何抖动。

// Event Handlers
// Record mouse position for raycast
onMouseMove(e) {
    this.mouse.x = (e.clientX / window.innerWidth ) * 2 - 1;
    this.mouse.y = -((e.clientY - 50) / window.innerHeight ) * 2 + 1;

    // If we are panning, don't queue a raycast
    this.qRaycast = !this.mouseState.held;
}

// My app has panning, and we don't wanna keep raycasting during pan
onMouseDown(e) {
    this.mouseState.lastClick = Date.now();
    this.mouseState.clicked = false;
    this.mouseState.held = true;
}

onMouseUp(e) {
    this.mouseState.held = false;
}

然后我们处理光线转换:

// Like lasers, but virtual.
handleRaycast() {
    let hits = null;
    let hitcount = 0;
    if (UI.raycast && meshObj) {
        this.raygun.setFromCamera(this.mouse, this.camera);
        hits = this.raygun.intersectObject(meshObj, false);
        hitcount = hits.length;
    }

    if (hitcount > 0) {
        // Do stuff with the raycast here
    }
}

如果您仍然遇到性能问题，那么您可能想要分解该循环函数，以便在 XXms 后它会中断以让 UI 更新，然后在下一帧继续更新:

例如，我对所有命中进行排序，找到离鼠标最近的点:

// Optimization
let startTime = 0;
let maxTime = 75; // max time in ms
let dist = 1;
let hitIndex;
let i = 0;

function findClosest() {
    return new Promise((resolve) => {
        function loop() {
            startTime = performance.now();
            while (i < hitcount) {
                // Break loop after maxTime
                let currentTime = performance.now();
                if ((currentTime - startTime) > maxTime) {
                    console.log('Loop exceeded max time: ' + 
                        (currentTime - startTime).toFixed(3) );
                    startTime = currentTime;
                    break;
                }

                // I am finding the raycast point that is closest to the cursor
                dist = hits[i].distanceToRay;
                if (dist < smallestDist) {
                    smallestDist = dist;
                    smallestPointIndex = hits[i].index;
                }
                i++;
            }

            if (i < hitcount) {
                // Allow the UI to update, then loop
                setTimeout(loop, 1);
            } else {
                resolve(smallestPointIndex);
            }
        }
        loop();
    });
}

findClosest().then(result => {
    // do something with the result here
}

此外，这些评论也是减少光线转换到的对象数量的好建议。