Issue with Identical Layers in ArrayCamera in VR Scenes Using three.js v0.170.0

[ethanguo770]

Description

When using the @react-three/fiber, @react-three/xr, and three.js packages, if the three.js version is v0.170.0, an issue arises in VR scenes where the cameras in ArrayCamera have identical Layers. This prevents implementing the logic to control rendering layers (I expect to control left and right eye content through layers). However, this issue does not occur with three.js version v0.169.0.

Reproduction steps

You can directly use the code from this repository for testing: https://github.com/ethanguo770/web-xr-test. Just change the three.js version to reproduce the issue.

You can also create a project from scratch. Sure, here are the steps:

1. Use @react-three/fiber, @react-three/xr, and three.js to create a VR scene.
2. Then, add two objects to the VR scene and set their layers to 1 and 2, respectively.
3. Run the app, enter the VR scene, and ensure that you can see both left and right views. Testing in Chrome is recommended.

Code

import React, { useEffect, useRef } from "react"
import { Vector3 } from "three"
import { useFrame, useThree } from "@react-three/fiber"

function Plane() {
  const leftRef = useRef()
  const rightRef = useRef()

  const { camera } = useThree()

  useEffect(() => {
    if (leftRef.current) {
      leftRef.current.layers.set(1)
      rightRef.current.layers.set(2)
    }
  }, [camera])

  // 每帧更新矩形的位置和旋转，使其面朝相机
  useFrame(() => {
    if (leftRef.current) {
      // 计算相机前方的方向
      const direction = new Vector3()

      camera.getWorldDirection(direction)
      // 将矩形位置设置为相机位置并向前移动一定距离
      leftRef.current.position.copy(camera.position)
      leftRef.current.position.add(direction.multiplyScalar(2)) // 向前方向
      leftRef.current.quaternion.copy(camera.quaternion)

      camera.getWorldDirection(direction)
      rightRef.current.position.copy(camera.position)
      rightRef.current.position.add(direction.multiplyScalar(2)) // 向前方向
      rightRef.current.quaternion.copy(camera.quaternion)
    }
  })

  return (
    <>
      <mesh ref={leftRef}>
        <planeGeometry args={[1, 1]} />
        <meshBasicMaterial color="blue" />
      </mesh>
      <mesh ref={rightRef}>
        <planeGeometry args={[1, 1]} />
        <meshBasicMaterial color="red" />
      </mesh>
    </>
  )
}
export default Plane

Live example

• jsfiddle-latest-release WebGLRenderer
• jsfiddle-dev WebGLRenderer
• jsfiddle-latest-release WebGPURenderer
• jsfiddle-dev WebGPURenderer

Screenshots

Version

r0.170.0

Device

Desktop, Headset

Browser

Chrome

OS

Windows, Linux

[Mugen87]

This is probably due to #29742. The change is noted in the migration guide for r170:

https://github.com/mrdoob/three.js/wiki/Migration-Guide#169--170

[Mugen87]

If there are any issue with @react-three/xr, please report the issue in the respective GitHub repo.