Three.js 地板网格未在移动设备上显示iphone safari

如何解决Three.js 地板网格未在移动设备上显示iphone safari

我在渲染器中使用了 logarithmicDepthBuffer，并且在桌面上运行良好。

但是，在我的 iPhone 上，地板网格的显示效果不如阴影。

我的地板有两个网格。一个是不可见的，另一个有自定义着色器。

iphone safari 上的圆形是在地板下延伸的 3D 模型。由于地板网格，它应该被隐藏。

// Renderer
const renderer = new THREE.Webglrenderer({
    canvas: canvas,logarithmicDepthBuffer: true,antialias: true,alpha: true,powerPreference: 'default',})
renderer.shadowMap.enabled = true
renderer.shadowMapSoft = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap
renderer.outputEncoding = THREE.sRGBEncoding
renderer.setSize(sizes.width,sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio,2))
renderer.setClearColor(prop.background.color,1)


// Floor
const floor = new THREE.Mesh(
    new THREE.CircleGeometry(1,32,32),new THREE.MeshStandardMaterial({
        color: prop.floor.color,visible: false,})
)
floor.rotateOnAxis(
    new THREE.Vector3(-1,0),Math.PI / 2
)
floor.scale.set(prop.floor.size * 0.7,prop.floor.size * 0.7,prop.floor.size * 0.7)
floor.position.set(0,0.002,0)
scene.add(floor)

const gradientFloor = new THREE.Mesh(
    new THREE.CircleGeometry(1,new THREE.ShaderMaterial({
        vertexShader: floorVertex,fragmentShader: floorFragment,transparent: true,blending: THREE.normalBlending,alphaTest: 0,})
)
gradientFloor.rotateOnAxis(
    new THREE.Vector3(-1,Math.PI / 2
)
gradientFloor.receiveShadow = true
gradientFloor.scale.set(prop.floor.size,prop.floor.size,prop.floor.size)
gradientFloor.position.set(0,0.001,0)
scene.add(gradientFloor)