# How to load a 3D Model

{% embed url="<https://threejs.org/examples/#webgl_loader_gltf>" %}
ThreeJS gltf loader demo
{% endembed %}

Only a few loaders (e.g. ObjectLoader) are included by default with three.js — others should be added to your app individually.

```typescript
import { GLTFLoader } from '/jsm/loaders/GLTFLoader.js';

//Model loader
const manager = new LoadingManager();
const loader = new GLTFLoader(manager).setPath("/assets/models/AyaSofia/");
let modelLoaded = false;
```

Once you've imported a loader, you're ready to add a model to your scene. Syntax varies among different loaders — when using another format, check the examples and documentation for that loader. For glTF, usage with global scripts would be:

Change the onSelect function to load and place the model, instead of the Sphere mesh we were placing previously.

```typescript
function onSelect() {
	if (reticle.visible && !modelLoaded) {
		loader.load(
			"GM_poly.gltf",
			function (gltf) {
				gltf.scene.children[0].position.setFromMatrixPosition(reticle.matrix);
				scene.add(gltf.scene);
				modelLoaded = true;
			},
			undefined,
			function (error) {
				console.error(error);
			}
		);
	}
}
```

We can add event callbacks for loading manager.

```typescript
manager.onStart = function (url, itemsLoaded, itemsTotal) {
	console.log("Started loading file: " + url + ".\nLoaded " + itemsLoaded + " of " + itemsTotal + " files.");
};

manager.onLoad = function () {
	console.log("Loading complete!");
};

manager.onProgress = function (url, itemsLoaded, itemsTotal) {
	console.log("Loading file: " + url + ".\nLoaded " + itemsLoaded + " of " + itemsTotal + " files.");
};

manager.onError = function (url) {
	console.log("There was an error loading " + url);
};

```

See [GLTFLoader documentation](https://threejs.org/docs/index.html#examples/en/loaders/GLTFLoader) for further details.

### Exercise

* [ ] Try other object types and loaders to add different models to your scene. You can find more models under three.js/examples/models.

### Troubleshooting

You've spent hours modeling an artisanal masterpiece, you load it into the webpage, and — oh no! 😭 It's distorted, miscolored, or missing entirely. Start with these troubleshooting steps:

1. Check the JavaScript console for errors, and make sure you've used an *onError* callback when calling *.load()* to log the result.
2. View the model in another application. For glTF, drag-and-drop viewers are available for [three.js](https://gltf-viewer.donmccurdy.com/) and [babylon.js](http://sandbox.babylonjs.com/). If the model appears correctly in one or more applications, [file a bug against three.js](https://github.com/mrdoob/three.js/issues/new). If the model cannot be shown in any application, we strongly encourage filing a bug with the application used to create the model.
3. Try scaling the model up or down by a factor of 1000. Many models are scaled differently, and large models may not appear if the camera is inside the model.
4. Try to add and position a light source. The model may be hidden in the dark.
5. Look for failed texture requests in the network tab, like *C:\\\Path\To\Model\texture.jpg*. Use paths relative to your model instead, such as *images/texture.jpg* — this may require editing the model file in a text editor.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.xrdev.app/mixed-reality-docs/webxr-lessons/introduction-to-webxr-device-apis/project/3d-model-loaders.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.