为什么深度测试在我的代码中无法正常工作？答案

【问题标题】：Why is depth test not working correctly in my code?为什么深度测试在我的代码中无法正常工作？
【发布时间】：2020-07-11 02:30:15
【问题描述】：

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)

【问题讨论】：

标签： three.js 3d

【解决方案1】：

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

这样就解决了问题：

new THREE.PerspectiveCamera(60)

或者：

far = 1000

【讨论】：