THREE.WebGPURenderer is not a constructor

Questions
1

Hello,

I’m trying to run webgpu_compute_particles_fluid example locally, I’m using Vite.
HTML code:

<body>
  <script type="importmap">
			{
				"imports": {
					"three": "../build/three.webgpu.js",
					"three/webgpu": "../build/three.webgpu.js",
					"three/tsl": "../build/three.tsl.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>
  <script type="module" src="./src/main.js"></script>
</body>

./src/main.js:

import './style.css'
import * as THREE from 'three';
import { Fn, If, Return, instancedArray, instanceIndex, uniform, attribute, uint, float, clamp, struct, atomicStore, int, ivec3, array, vec3, atomicAdd, Loop, atomicLoad, max, pow, mat3, vec4, cross, step } from 'three/tsl';
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js';
import WebGPU from 'three/examples/jsm/capabilities/WebGPU.js';
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// ..........
// ..........
// ..........
// .......... same code as example
// ..........
// ..........
// ..........

if (WebGPU.isAvailable() === false) {
  document.body.appendChild(WebGPU.getErrorMessage());
  throw new Error('No WebGPU support');
}

const gui = new GUI();

const params = {
  particleCount: 8192 * 4,
};

init();
async function init() {
  renderer = new THREE.WebGPURenderer({ antialias: true });
  // rest of the code as is from the github example page ...
}

When npm run dev error pops up in browser says:
Uncaught (in promise) TypeError: THREE.WebGPURenderer is not a constructor
at line:
renderer = new THREE.WebGPURenderer({ antialias: true });
I didn’t change any of the code from the example, running threejs "version": "0.177.0"

Thanks.

2

Change your line

import * as THREE from 'three';

to

import * as THREE from 'three/webgpu'
2 Likes
3

@seanwasere Yep, the error is gone. Thanks for the help.

Though I didn’t understand why that is the case, especially were in the example it is written like this
import * as THREE from 'three';

I need to do some research, thanks for help!

4

three.js official examples use Import Maps (like yours above) and are aliasing ‘three’ and ‘three/webgpu’ both to the same three.webgpu.js file for convenience. But the published three.js packages don’t do that, ‘three’ is the classic WebGL build and ‘three/webgpu’ is the newer WebGPU build, different builds.

If you’re using Vite then the Import Map should be removed entirely — that’s only necessary when using vendored (copy/pasted) or CDN dependencies, not with Vite or other build tools. And then for any WebGPU-specific features, you’d need to import them from three/webgpu.

2 Likes
5

@donmccurdy oooo I see, I understand … I really appreciate the clarification, thanks.