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)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）