我在使用 WebXR API 时遇到了非常奇怪的体验。当我重新进入 VR 时，WebXR API 会更改 VR 相机属性。当我第二次、第三次或第 n 次重新进入 VR 模式时，相机会以某种方式切割我的对象（如下所示）。
当我第一次进入 VR 时，它总是能正常工作（如下所示）。
我想知道为什么对象在第二次/第三次/第 n 次 VR 尝试中被剪切，以及如何调试 WebXR 沉浸式 VR 相机属性。
我正在使用非常基本的 WebXR API 代码，如下所示：
window.onload=function()
{
init();
animate();
}
function init()
{
canvas = document.getElementById( 'vw_canvas' );
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
canvasCssWidth = canvas.style.width;
canvasCssHeight = canvas.style.height;
group = new THREE.Object3D();//we create this to make it a parent of camera object.
camera = new THREE.PerspectiveCamera( 75, canvas.width / canvas.height, 1, 10000 );
group.rotation.order = 'XZY';//default is XYZ..we change this to XZY. because in case of XYZ when we rotate the object around its Y axis even the X and Z axis changes. so to avoid that we give higher priority to Z axis.
scene = new THREE.Scene();
group.add(camera);
scene.add(group);
//add more 3D objects to scene
renderer = new THREE.WebGLRenderer({antialias:true, powerPreference: "high-performance"});
renderer.setPixelRatio( canvas.devicePixelRatio );
renderer.setSize( canvas.width, canvas.height );
renderer.xr.enabled = true;
renderer.xr.setReferenceSpaceType( 'local' );
canvas.appendChild(renderer.domElement);
var WEBVR =
{
createButton: function ( renderer )
{
function showEnterXR( /*device*/ ) {
var currentSession = null;
function onSessionStarted( session )
{
session.addEventListener( 'end', onSessionEnded );
renderer.xr.setSession( session );
vrButton.style.backgroundImage="url('icons/noVR.svg')";
document.getElementById("vr-button-tooltip").setAttribute("tooltip","Exit VR");
currentSession = session;
isVRpresenting=true;
openVRMenu();
}
function onSessionEnded( event )
{
currentSession.removeEventListener( 'end', onSessionEnded );
renderer.xr.setSession( null );
vrButton.style.backgroundImage="url('icons/yesVR.svg')";
document.getElementById("vr-button-tooltip").setAttribute("tooltip","Enter VR");
currentSession = null;
isVRpresenting=false;
closeVRMenu();
}
vrButton.style.backgroundImage="url('icons/yesVR.svg')";
document.getElementById("vr-button-tooltip").setAttribute("tooltip","Enter VR");
isVRpresenting=false;
vrButton.onclick = function ()
{
if (runOnlyOnce)
{
makeVRMenuItems();
runOnlyOnce=false;
}
if ( currentSession === null )
{
var sessionInit = { optionalFeatures: [ 'local-floor', 'bounded-floor' ] };
navigator.xr.requestSession( 'immersive-vr', sessionInit ).then( onSessionStarted );
}
else
{
currentSession.end();
}
};
}
function showVRNotFound()
{
vrButton.onclick = function ()
{
//open VR popup that shows devices to use in order to exp VR
};
isVRavailable=false;
vrButton.style.backgroundImage="url('icons/noVR.svg')";
document.getElementById("vr-button-tooltip").setAttribute("tooltip","VR is not supported on your device");
vrButton.onclick = null;
// renderer.xr.setDevice( null );
isVRpresenting=false;
}
if ( 'xr' in navigator )
{
isVRavailable=true;
navigator.xr.isSessionSupported( 'immersive-vr' ).then( function ( supported ) {
supported ? showEnterXR() : showVRNotFound();
} );
}
else
{
vrButton.onclick = function ()
{
//open VR popup that shows devices to use in order to exp VR
};
isVRavailable=false;
vrButton.style.backgroundImage="url('icons/noVR.svg')";
document.getElementById("vr-button-tooltip").setAttribute("tooltip","VR is not supported on you device");
isVRpresenting=false;
}
},
};
WEBVR.createButton( renderer );
}
function animate()
{
renderer.setAnimationLoop( animate );
update();
}
function update()
{
renderer.render( scene, camera );
}