Question

所以我一直在用光线投射试验在三个JS，但我遇到了在Firefox和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() );
}

我也只在鼠标移动时排队光线投射（如果鼠标不移动，没有理由继续进行光线投射），并且因为我在项目中进行平移，我在平移动作期间禁用光线投射，以防止在移动过程中出现任何抖动。 / p>

// 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
}

此外，评论也是很好的建议，也是为了减少光线投射对象的数量。

与射线队员一起糟糕的三场比赛

1 个答案: