diff --git a/examples/webxr_vr_layers.html b/examples/webxr_vr_layers.html
index 0ca1d7eaf998e3..5f20da9bfd2c82 100644
--- a/examples/webxr_vr_layers.html
+++ b/examples/webxr_vr_layers.html
@@ -144,6 +144,10 @@
 				] );
 				const line = new THREE.Line( lineGeometry, new THREE.LineBasicMaterial( { color: 0x5555ff } ) );
 
+				// The invisible dummyMesh quads and the guiMesh need to be rendered before the controller lines so that they
+				// leave a hole in the depth buffer that the lines can intersect.
+				line.renderOrder = 1;
+
 				const controllerModelFactory = new XRControllerModelFactory();
 				const handModelFactory = new XRHandModelFactory().setPath( './models/fbx/' );
 
@@ -202,7 +206,7 @@
 				// projection layer is rendered.
 				const dummyMeshLeft = new THREE.Mesh(
 					new THREE.PlaneGeometry( snellenConfig.widthMeters, snellenConfig.heightMeters ),
-					new THREE.MeshBasicMaterial( { opacity: 0 } ) );
+					new THREE.MeshBasicMaterial( { colorWrite: false } ) );
 				dummyMeshLeft.position.x = snellenConfig.x - snellenConfig.widthMeters;
 				dummyMeshLeft.position.y = snellenConfig.y + snellenConfig.heightMeters;
 				eyeCharts.add( dummyMeshLeft );
@@ -255,7 +259,8 @@
 				guiMesh.position.set( 1.0, 1.5, - 1.0 );
 				guiMesh.rotation.y = - Math.PI / 4;
 				guiMesh.scale.setScalar( 2 );
-				guiMesh.material.opacity = 0;
+				guiMesh.material.colorWrite = false;
+				guiMesh.material.transparent = false;
 				group.add( guiMesh );
 
 				// Error message if layer initialization fails.