为什么深度测试在我的代码中不能正常工作？

Question

depthTest 和 depthWrite 在两种材料上都是 true ，我不知道是什么否则可能是错误的。

我使用 three-bas 作为四面体网格

这里是codepen

（使用鼠标旋转相机）

红色四面体：

    let config = {
            color: 'rgb(0,234,253)',
            emissive: 'rgb(0,167,233)',
            emissiveIntensity: .4,
            size: 0.5,
            count: 10
        },
        prefab = new THREE.TetrahedronGeometry(config.size),
        geometry = new BAS.PrefabBufferGeometry(prefab, config.count),
        positionBuffer = geometry.createAttribute('pPosition', 3)
    
    let range = 10,
        prefabData = []
    
    for (let i = 0; i < config.count; i++) {
        prefabData[0] = THREE.Math.randFloatSpread(range)
        prefabData[1] = THREE.Math.randFloatSpread(range)
        prefabData[2] = 0
        
        geometry.setPrefabData(positionBuffer, i, prefabData)
    }
    
    geometry.computeVertexNormals()
    
    let material = new BAS.PhongAnimationMaterial({
        uniformValues: {
            specular: new THREE.Color(0xffffff),
            shininess: 100,
            diffuse: new THREE.Color('red')
        },
        vertexParameters: [
            'attribute vec3 pPosition;'
        ],
        vertexPosition: [
            'transformed += pPosition;'
        ]
    })
    
    let particles = new THREE.Mesh(geometry, material)
    scene.add(particles)

绿框：

    let planeGeo = new THREE.BoxGeometry(2, 2, 0.1),
        planeMat = new THREE.MeshPhongMaterial({
                color: 'green',
                shininess: 100
            })
        planeObj = new THREE.Mesh(
            planeGeo, 
            planeMat
        )
    
    planeGeo.computeVertexNormals()
    planeObj.position.set(-3,4,3)
    scene.add(planeObj)

Answer 1

原来是相机的远设置导致了这个问题，它应该足够高

这解决了问题：

new THREE.PerspectiveCamera(60)

或者：

far = 1000

为什么深度测试在我的代码中不能正常工作？

Why is depth test not working correctly in my code?

3d

three.js