CODEWITHSUNDEEP
three.js3d
s0up
s0up

Reputation: 422

Why is depth test not working correctly in my code?

depthTest and depthWrite are true on both materials, I don't know what else could be wrong.

I'm using three-bas for the mesh with tetrahedrons

Here is codepen

(Use mouse to rotate the camera)

Red tetrahedrons:

    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)

Green box:

    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)

Upvotes: 0

Views: 479

Answers (1)

s0up
s0up

Reputation: 422

Turns out the far setting of the camera caused the issue, it should be high enough

This solves the problem:

new THREE.PerspectiveCamera(60)

Or:

far = 1000

Upvotes: 2

Related Questions