loadGlbModel() {
  const loader = new GLTFLoader();
  loader.load(
    `/three/eiffel-tower.gltf`,
    (gltf) => {
      const geometry = gltf.scene.children[0].geometry;
      const positions = geometry.attributes.position;
      const count = positions.count;
      geometry.setAttribute(
        "color",
        new THREE.BufferAttribute(new Float32Array(count * 3), 3)
      const color = new THREE.Color();
      const colors = geometry.attributes.color;
      const radius = 200;
      debugger;
      for (let i = 0; i < count; i++) {
        color.setHSL(positions.getY(i) / radius / 2, 1.0, 0.5);
        colors.setXYZ(i, 1, 0, 0);
      const material = new THREE.MeshPhongMaterial({
        color: 0xffffff,
        flatShading: true,
        vertexColors: true,
        shininess: 0,
      const wireframeMaterial = new THREE.MeshBasicMaterial({
        color: 0x000000,
        wireframe: true,
        transparent: true,
      let mesh = new THREE.Mesh(geometry, material);
      let wireframe = new THREE.Mesh(geometry, wireframeMaterial);
      mesh.add(wireframe);
      mesh.scale.set(0.1, 0.1, 0.1);
      const redColor = new THREE.Color(1, 0, 0);
      console.log(mesh);
      // mesh.children[0].material.color = redColor;
      const light = new THREE.DirectionalLight(0xffffff);
      light.position.set(0, 0, 1);
      this.scene.add(light);
      this.scene.add(mesh);
    (xhr) => {
      console.log((xhr.loaded / xhr.total) * 100 + "% loaded");