Render transparent bottle in threejs - three.js

Question

I have created bottle in blender. If i test it on threejs editor it is giving right results.
But when I render it on my site it is giving
This as output. I am but new to threejs
import './style.css'
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
const updateAllMaterials = () =>
{
scene.traverse((child) =>
{
if(child instanceof THREE.Mesh)
{
child.material.envMap = environmentMap
child.material.transparent = true
child.material.opacity = 0.1
child.material.envMapIntensity = 5
const material = new THREE.MeshPhysicalMaterial( {
transmission: 1, // use material.transmission for glass materials
opacity: 0.2,
color:"blue",
transparent: true
} );
child.material = material
}
})
}
// Canvas
const canvas = document.querySelector('canvas.webgl')
const gltfLoader = new GLTFLoader()
gltfLoader.load('/models/wine5.glb',(bottle)=>{
bottle.scene.scale.set(0.5,0.45,0.5)
bottle.scene.rotation.set(-0.5,1,0.3)
bottle.scene.position.set(-1,-1.5,2)
updateAllMaterials()
scene.add(bottle.scene)
})
// Scene
const scene = new THREE.Scene()
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
const directionalLights = new THREE.PointLight('#fff',4)
directionalLights.position.set(-0.4,2,5)
scene.add(directionalLights)
/**
* Sizes
*/
const sizes = {
width: window.innerWidth,
height: window.innerHeight
}
/**
* Camera
*/
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
scene.add(camera)
// ENV MAPS
const singleTextureLoader = new THREE.TextureLoader()
singleTextureLoader.load('/BG/tree.jpg',(img)=>{
scene.background = img
})
/**
* Renderer
*/
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.physicallyCorrectLights = true
renderer.outputEncoding = THREE.sRGBEncoding
renderer.toneMapping = THREE.ACESFilmicToneMapping
renderer.toneMappingExposure = 1
renderer.depth = false

Answer 1

Your updateAllMaterials() is traversing an empty scene, thus not applying the material to anything. Just swap the calls like this:
scene.add(bottle.scene)
updateAllMaterials()
Also, inside the updateAllMaterials() function, you are changing some parameters of the child's material, and then you overwrite the material itself, losing all the changes.
It should be something like this:
const material = new THREE.MeshPhysicalMaterial({
transmission: 1,
opacity: 0.2,
color:"blue",
transparent: true,
envMap: environmentMap,
transparent: true,
opacity: 0.1,
envMapIntensity: 5
});
child.material = material