glTF mat replace error

by laubeee

HTML

<script src="https://cdn.jsdelivr.net/npm/three@0.129.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.129.0/examples/js/loaders/GLTFLoader.js"></script>

JavaScript

let scene, camera, renderer;

init();
animate();

function init() {
	scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
  camera.up.set(0,0,1);
  camera.position.set(80, 400, 100);
  camera.lookAt(0,0,0);
  renderer = new THREE.WebGLRenderer();
  renderer.setClearColor(new THREE.Color(0x000000));
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  // lights
  var ambient = new THREE.AmbientLight(0xffffff, 0.2);
  scene.add(ambient);
  var sun = new THREE.DirectionalLight(0xffffff, 0.35);
  sun.position.set(0, -1, 1); // 0, 1, -1
  scene.add(sun);
  const sky = new THREE.HemisphereLight(0xffffff, 0x000000, 0.7);
  sky.position.set(0, 0, 1); // 0, 1, 0
  scene.add(sky);
  
  const url = "https://www.cs.technik.fhnw.ch/karsys/x200/2021-04-28/gwb7_vox.gltf";
  const loader =  new THREE.GLTFLoader();
  loader.loadAsync(url).then(gltf => {
  	let mesh = gltf.scene.children[0];
    
    let mat = new THREE.MeshStandardMaterial({
      color: new THREE.Color(0x0000cc),
      opacity: 0.6,
      transparent: true,
      side: THREE.DoubleSide
    });
    // mesh.material = mat; // this line breaks it!
    scene.add(mesh);
  }).catch(err => console.log(err));
}

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}