Add displacement map in the loaded 3D mode

Questions
, ,
1

Hi
I have a 3d model and i have displacement map as well.

I tried to add displacement-texture in it but it is not rendering anything and not throwing any error.

const displacementMap = new THREE.TextureLoader().load('./models/DNA/displacement-texture.jpg')
    let _material = new THREE.MeshStandardMaterial({
        color: 0x880000,
        aoMapIntensity: 1,
        displacementMap: displacementMap,
        displacementBias: -0.428408, // from original model
        side: THREE.DoubleSide,
    })
    async function load_model() {
        const gltfLoader = new GLTFLoader()
        gltfLoader.setDRACOLoader(dracoLoader)
        await gltfLoader.setPath('./models/DNA/').load('model.glb', function (gltf) {
            gltf.scene.traverse(function (child) {
                if (child instanceof THREE.Mesh) {
                    const _child = child as THREE.Mesh
                    let geometry = _child.geometry
                    console.log(_child.material)
                    let mesh = new THREE.Mesh(geometry, _material)
                    mesh.scale.multiplyScalar(10)
                    scene.add(mesh)
                    sceneObjects.push(child)
                }
                if (child instanceof THREE.Light) {
                    const _light = child as THREE.Light
                    _light.castShadow = true
                    _light.shadow.bias = 0.0008 // to reduce artifact in shadow
                    _light.shadow.mapSize.width = 1024
                    _light.shadow.mapSize.height = 1024
                }
            })
      })
    }

my console of _child.material is:
image

This is my displacement map

displacement-texture
displacement-texture1023×1023 19.6 KB

and this is my model:

model.glb (280.3 KB)

Any help please thank you !!!