Search code examples
javascriptthree.jsvirtual-realitywebvr

VideoTexture is not playing in VR


At first the texture works fine and the video plays as expected, but when VR is entered via VRDisplay.requestPresent it stops. Why is this and how to fix it?


Solution

  • The VR display has its own render loop. Usually needsUpdate is automatically set to true on every animation frame by three.js, but this is only true for the default display.

    To fix this, get the VR display from the vrdisplayconnect event and create your own update loop. E.g.

    let display = e.display;
    
    let displayUpdateLoop = () =>
    {
        // May get a warning if getFrameData is not called.
        let frameData = new VRFrameData();
        display.getFrameData(frameData);
    
        videoTexture.needsUpdate = true;
    
        // Stop loop if no longer presenting.
        if (display.isPresenting)
            display.requestAnimationFrame(displayUpdateLoop);
    }
    display.requestAnimationFrame(displayUpdateLoop);