Transparency issue

by orion_prime

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

// Simple three.js example

var mesh, renderer, scene, camera, controls;

const img_link = 'https://cdn3.struffelproductions.com/file/ambientCG/media/maps/SheetMetal002/SheetMetal002_Opacity.jpg?45428'

const texLoader = new THREE.TextureLoader()
const gltfLoader = new THREE.GLTFLoader()
init();
animate();

function init() {

  // renderer
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // scene
  scene = new THREE.Scene();
  scene.background = new THREE.Color('grey')

  // camera
  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(20, 20, 20);

  // controls
  controls = new THREE.OrbitControls(camera, renderer.domElement);

  // ambient
  scene.add(new THREE.AmbientLight(0x222222));

  // light
  var light = new THREE.DirectionalLight(0xffffff, 1);
  light.position.set(20, 20, 0);
  scene.add(light);

  // axes
  scene.add(new THREE.AxesHelper(10));

  /* addPlanes() */
  gltfPlanes()
}

function animate() {

  requestAnimationFrame(animate);

  //controls.update();

  renderer.render(scene, camera);

}

async function addPlanes() {
  const texture = await texLoader.loadAsync(img_link)
  const geo = new THREE.PlaneGeometry(1, 1)
  const mat = new THREE.MeshStandardMaterial({
    map: texture
  })
  const mesh = new THREE.Mesh(geo, mat)
  scene.add(mesh)
  console.log(mesh)
}

 var url = "https://rawcdn.githack.com/KhronosGroup/glTF-Sample-Models/0c1ffd876136b824a50e584b9158a3199fead935/2.0/AnimatedMorphCube/glTF-Binary/AnimatedMorphCube.glb";

async function gltfPlanes() {
	console.log("Loading gltf" )
 /*  const gltf =await gltfLoader.loadAsync("https://github.com/optimus007/react-project/blob/main/public/planes_transparent.glb?raw=true",(v)=>{console.log(v)}) */
  const gltf =await gltfLoader.loadAsync(url)
  scene.add(gltf.scene)
  console.log(gltf.scene)
}