Cannot find module 'three/webgpu' or its corresponding type declarations.

Questions
1

I wanted to add a GLB model into my angular 16 project, and getting this error

Error: node_modules/@types/three/examples/jsm/loaders/KTX2Loader.d.ts:2:42 - error TS2307: Cannot find module 'three/webgpu' or its 
corresponding type declarations.

2 import { Renderer, WebGPURenderer } from "three/webgpu";

Angular Three is not an option for me, because I am working on an Angular 16 application with my team, and it requires Angular version between 18> and <19. Please help me out with this one… and is there any other way to import GLB files?

import { AfterViewInit, Component } from '@angular/core';
import { Router } from '@angular/router';
import { LoadingService } from './services/loading.service';
import { Observable } from 'rxjs';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [
    { provide: Window, useValue: window }
  ]
})
export class AppComponent implements AfterViewInit {

  showNavbar: boolean = true;
  isLoading$: Observable<boolean>;

  constructor(private router: Router, private loadingService: LoadingService, private window: Window) {
    this.isLoading$ = this.loadingService.isLoading;
  }
  ngOnInit() {
    this.router.events.subscribe(() => {
      if (this.router.url !== '/') {
        this.showNavbar = true
      } else {
        this.showNavbar = false;
      }
    });
  }
  ngAfterViewInit(): void {
    const width = window.innerWidth, height = window.innerHeight;
    const canvas = document.getElementById('canvas') as HTMLCanvasElement
    const renderer = new THREE.WebGLRenderer({ canvas : canvas, antialias : true, alpha: true})
    renderer.setSize(400,200)
    

    const loader = new GLTFLoader()
    loader.load('src/assets/models/Mona.glb', function(gltf){
      scene.add(gltf.scene);
    }, undefined, function(err){
      console.log(err);      
    })

    const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10);
    camera.position.z = 1;

    const scene = new THREE.Scene();

    const geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
    const material = new THREE.MeshNormalMaterial();

    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // const renderer = new THREE.WebGLRenderer({ antialias: true });
    // renderer.setSize(width, height);
    renderer.setAnimationLoop(animate);
    document.body.appendChild(renderer.domElement);

    // animation

    function animate(time: number) {

      mesh.rotation.x = time / 2000;
      mesh.rotation.y = time / 1000;

      renderer.render(scene, camera);

    }
  }
}

and HTML is:

<canvas id="canvas"></canvas>
2

Are you certain that those types exist? Those are two completely different projects.

3

The types are kept in sync pretty well, including up to WebGPU and r170:

That said, there were a number of difficulties with importing three/webgpu (regardless of the types) requiring config changes and aliases, which have only just been fixed … I might recommend waiting for r171 (coming out very soon) and trying again then if you can.

2 Likes
4

Fair. I meant to say “are you sure your versions are in sync” but had a brain fart.