瀏覽代碼

Fix WebXR Layers example. (#24691)

* Fix WebXR Layers example.

    Invisible dummy meshes relied on old alphaWrite logic so they became
    opaque after dfca2bd4748b00245225c9e4d8ba0ef7374c9b36 on Jan 27 and
    obscured the quad layers. This switches to using colorWrite=false
    logic to properly create holes in the 3D scene and let the dummy
    meshes interect the controller ray without obscuring the quad
    layers.

    Tested:
      * https://raw.githack.com/sigmaxipi/three.js/webXrLayersFix/examples/index.html?q=webxr#webxr_vr_layers
        Properly shows the charts on the top two quads on a Quest 2 with
        chrome://flags/#webxr-layers enabled and ray intersection works
        properly with the quad layers and GUI.

* Update webxr_vr_layers.html

Co-authored-by: Michael Herzog <[email protected]>
SxP 2 年之前
父節點
當前提交
9926bd60b6
共有 1 個文件被更改,包括 7 次插入2 次删除
  1. 7 2
      examples/webxr_vr_layers.html

+ 7 - 2
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.