# Cannot use three-gpu-pathtracer importing js

**URL:** <https://discourse.threejs.org/t/cannot-use-three-gpu-pathtracer-importing-js/65333>\
**Category:** Questions\
**Created:** [May 9, 2024, 8:24pm UTC](https://discourse.threejs.org/t/cannot-use-three-gpu-pathtracer-importing-js/65333 "2024-05-09T20:24:31Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Luca\_Galiano](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/luca_galiano/32/47669_2.png) [@Luca\_Galiano](https://discourse.threejs.org/u/Luca_Galiano)\
**Post date:** [May 9, 2024, 8:24pm UTC](https://discourse.threejs.org/t/cannot-use-three-gpu-pathtracer-importing-js/65333/1 "2024-05-09T20:24:31Z")

</div>

Hello,  
I’m trying to use the sample made here: [three.js examples (threejs.org)](https://threejs.org/examples/?q=gpu#webgl_renderer_pathtracer)

It doen’t work and the error (from the console) is: “Impossible to import json map”.

I didn’t installed three-gpu via npm but I want to import map or… please help me!

my code is:

```javascript
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';

const scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);

const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 1;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
renderer.toneMapping = THREE.LinearToneMapping;
renderer.toneMappingExposure = 0.5; // influenza molto la resa
document.body.appendChild(renderer.domElement);

const params = {
    enable: true,
    toneMapping: true,
    pause: false,
    tiles: 3,
    transparentBackground: false,
    resolutionScale: 1,
    download: () => {

        const link = document.createElement( 'a' );
        link.download = 'pathtraced-render.png';
        link.href = renderer.domElement.toDataURL().replace( 'image/png', 'image/octet-stream' );
        link.click();

    },
    roughness: 0.15,
    metalness: 0.9,
};

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

var light = new THREE.DirectionalLight(0xffffff, 1); // colore + intensità (ora a 5, dafault è 1)
light.position.set(0, 10, 5);
let mapSize = 1024;
light.shadow.mapSize.width = mapSize;
light.shadow.mapSize.height = mapSize;
scene.add(light);

new RGBELoader().load('https://modelviewer.dev/shared-assets/environments/neutral.hdr', function (texture) {
    texture.mapping = THREE.EquirectangularReflectionMapping;
    texture.encoding = THREE.RGBEEncoding;
    scene.environment = texture;
});

let model;

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('./draco/');
dracoLoader.setDecoderConfig({ type: 'js' });
const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);
loader.load(
    './model/Digityze - T-Shirt/Digityze - T-Shirt.gltf',
    function (gltf) {
        model = gltf.scene;
        model.position.set(0, 0, 0);
        model.traverse(function (child) {
            if (child.isMesh) {
                child.castShadow = true;
                child.receiveShadow = true;
                child.material.shadowIntensity = 1;
                child.material.originalMap = child.material.map;
            }
        });

        const bbox = new THREE.Box3().setFromObject(model);
        const objectSize = new THREE.Vector3();
        bbox.getSize(objectSize);
        const center = bbox.getCenter(new THREE.Vector3());
        // Imposta la posizione della fotocamera in modo che l'oggetto sia centrato
        camera.position.set(center.x, center.y, center.z + 1);
        // Imposta la posizione dell'oggetto al centro della scena
        model.position.set(-center.x, -center.y, -center.z);

        scene.add(model);
    },
    undefined,
    function (error) {
        console.error(error);
    }
);

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

animate();

window.addEventListener('resize', () => {
    const newWidth = window.innerWidth;
    const newHeight = window.innerHeight;

    camera.aspect = newWidth / newHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(newWidth, newHeight);
});

```

and I want just to create a switcher in order to switch between webgl renderer mode and pathtracer…

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [May 10, 2024, 7:04am UTC](https://discourse.threejs.org/t/cannot-use-three-gpu-pathtracer-importing-js/65333/2 "2024-05-10T07:04:10Z")

</div>

You code doesn’t seem to mention path tracer?  
In any way, use npm and vite. What you do is a thousand times more complicated and it simply won’t allow you to consume many if not most npm packages. Not to mention that you’re serving megabytes of data to the end user since you don’t bundle, minify and tree shake. With vite all of that is trivial.

---

<div class="post-metadata">

**Author:** ![Luca\_Galiano](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/luca_galiano/32/47669_2.png) [@Luca\_Galiano](https://discourse.threejs.org/u/Luca_Galiano)\
**Post date:** [May 10, 2024, 9:52am UTC](https://discourse.threejs.org/t/cannot-use-three-gpu-pathtracer-importing-js/65333/3 "2024-05-10T09:52:18Z")

</div>

I dont’t know how to proceed because for each step I have a problem.

For example this is my code:

and I would like to see it in my browser but when I run it…

the console: Uncaught TypeError: Failed to resolve module specifier “three/examples/jsm/postprocessing/Pass.js”. Relative references must start with either “/”, “./”, or “…/”.

but it was never called into my code…

---

<div class="post-metadata">

**Author:** ![Luca\_Galiano](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/luca_galiano/32/47669_2.png) [@Luca\_Galiano](https://discourse.threejs.org/u/Luca_Galiano)\
**Post date:** [May 10, 2024, 9:54am UTC](https://discourse.threejs.org/t/cannot-use-three-gpu-pathtracer-importing-js/65333/5 "2024-05-10T09:54:58Z")

</div>

I attached the code here

```javascript
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
	<script type="importmap">
		{
		  "imports": {
			"three": "https://cdn.jsdelivr.net/npm/three@0.164/build/three.module.js",
			"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164/examples/jsm/",
			"three-gpu-pathtracer": "https://cdn.jsdelivr.net/npm/three-gpu-pathtracer@0.0.20/build/index.module.js",
			"three-mesh-bvh": "https://cdn.jsdelivr.net/npm/three-mesh-bvh@0.7.3/build/index.module.js"
		}
		}
	</script>
</head>

<body>

<script type="module">
	import { Scene, SphereGeometry, MeshStandardMaterial, Mesh, BoxGeometry, PerspectiveCamera, ACESFilmicToneMapping, WebGLRenderer } from 'three';
import { WebGLPathTracer, GradientEquirectTexture } from 'three-gpu-pathtracer';
import { getScaledSettings } from './utils/getScaledSettings.js';

// init scene, renderer, camera, controls, etc
const scene = new Scene();
const sphereGeom = new SphereGeometry( 0.49, 64, 32 );
const ball1 = new Mesh(
	sphereGeom,
	new MeshStandardMaterial( {
		color: '#e91e63',
		roughness: 0.25,
		metalness: 1,
	} )
);
const ball2 = new Mesh(
	sphereGeom,
	new MeshStandardMaterial( {
		color: '#ff9800',
		roughness: 0.1,
		metalness: 1,
	} )
);
const ball3 = new Mesh(
	sphereGeom,
	new MeshStandardMaterial( {
		color: '#2196f3',
		roughness: 0.2,
		metalness: 1,
	} )
);
const ground = new Mesh(
	new BoxGeometry( 3.5, 0.1, 1.5 ),
	new MeshStandardMaterial(),
);

ball1.position.x = - 1;
ball3.position.x = 1;
ground.position.y = - 0.54;
scene.add( ball1, ball2, ball3, ground );

// set the environment map
const texture = new GradientEquirectTexture();
texture.bottomColor.set( 0xffffff );
texture.bottomColor.set( 0x666666 );
texture.update();
scene.environment = texture;
scene.background = texture;

const camera = new PerspectiveCamera();
camera.position.set( 0, 1, - 5 );
camera.lookAt( 0, 0, 0 );

const renderer = new WebGLRenderer( { antialias: true } );
renderer.toneMapping = ACESFilmicToneMapping;
document.body.appendChild( renderer.domElement );

const settings = getScaledSettings();
const pathTracer = new WebGLPathTracer( renderer );
pathTracer.renderScale = settings.renderScale;
pathTracer.tiles.setScalar( settings.tiles );
pathTracer.setScene( scene, camera );

onResize();

animate();

window.addEventListener( 'resize', onResize );

function animate() {

	// if the camera position changes call "ptRenderer.reset()"
	requestAnimationFrame( animate );

	// update the camera and render one sample
	pathTracer.renderSample();

}

function onResize() {

	// update rendering resolution
	const w = window.innerWidth;
	const h = window.innerHeight;

	renderer.setSize( w, h );
	renderer.setPixelRatio( window.devicePixelRatio );

	const aspect = w / h;
	camera.aspect = aspect;
	camera.updateProjectionMatrix();

	pathTracer.setScene( scene, camera );

}
</script>

</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [May 10, 2024, 10:43am UTC](https://discourse.threejs.org/t/cannot-use-three-gpu-pathtracer-importing-js/65333/6 "2024-05-10T10:43:04Z")

</div>

here is a slightly reworked version of your code that uses importmaps.

> **[three-gpu-pathtracer test](https://editor.sbcode.net/309486abc5726c5cc23c6f7cfac07878d0921648)**
>
> https://editor.sbcode.net/309486abc5726c5cc23c6f7cfac07878d0921648

I didnt have `./utils/getScaledSettings.js` so i guessed some values.

Beware that the path tracer code uses a lot of CPU when starting up.

---

<div class="post-metadata">

**Author:** ![Luca\_Galiano](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/luca_galiano/32/47669_2.png) [@Luca\_Galiano](https://discourse.threejs.org/u/Luca_Galiano)\
**Post date:** [May 10, 2024, 11:33am UTC](https://discourse.threejs.org/t/cannot-use-three-gpu-pathtracer-importing-js/65333/7 "2024-05-10T11:33:48Z")

</div>

This is awesome! But what was the issue? import map?

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [May 10, 2024, 11:44am UTC](https://discourse.threejs.org/t/cannot-use-three-gpu-pathtracer-importing-js/65333/8 "2024-05-10T11:44:08Z")

</div>

yes, the problem was described in your error message.

Essentially, your browser didn’t know how to resolve `three/examples/jsm/`. One of the dependencies you were loading was internally prefixing another import with `three/examples/jsm/`

I added the importmap for it, but then refactored it a little further, it’s a long story.

You can read all about import maps at [Using Import Maps - Three.js Tutorials](https://sbcode.net/threejs/importmap/)

---

<div class="post-metadata">

**Author:** ![Luca\_Galiano](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/luca_galiano/32/47669_2.png) [@Luca\_Galiano](https://discourse.threejs.org/u/Luca_Galiano)\
**Post date:** [May 10, 2024, 1:34pm UTC](https://discourse.threejs.org/t/cannot-use-three-gpu-pathtracer-importing-js/65333/9 "2024-05-10T13:34:03Z")

</div>

Thanks again for your support. Best community!