Loading 3D models


3D models are available in hundreds of file formats, each with different purposes, assorted features, and varying complexity. Although Verge3D provides many loaders, choosing the right format and workflow will save time and frustration later on. Some formats are difficult to work with, inefficient for realtime experiences, or simply not fully supported at this time.

This guide provides a workflow recommended for most users, and suggestions for what to try if things don't go as expected.

Before we start

If you're new to running a local server, begin with how to run things locally first. Many common errors viewing 3D models can be avoided by hosting files correctly.

Recommended workflow

Where possible, we recommend using glTF (GL Transmission Format). Both .GLB and .GLTF versions of the format are well supported. Because glTF is focused on runtime asset delivery, it is compact to transmit and fast to load. Features include meshes, materials, textures, skins, skeletons, morph targets, animations, lights, and cameras.

Public-domain glTF files are available on sites like Sketchfab, or various tools include glTF export:

If your preferred tools do not support glTF, consider requesting glTF export from the authors, or posting on the glTF roadmap thread.

When glTF is not an option, popular formats such as FBX, OBJ, or COLLADA are also available and regularly maintained.

Loading

Only a few loaders (ObjectLoader and JSONLoader) are included by default with Verge3D — others should be added to your page individually. Depending on your preference and comfort with build tools, choose one of the following:

// global script <script src="GLTFLoader.js"></script> // commonjs var v3d = window.v3d = require('three'); require('three/examples/js/loaders/GLTFLoader');

Currently Verge3D examples are not available as ES modules (import … from '…'). Several workarounds are discussed in #9562.

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, basic usage would be:

var loader = new v3d.GLTFLoader(); loader.load('path/to/model.glb', function(gltf) { scene.add(gltf.scene); }, undefined, function(error) { console.error(error); });

See GLTFLoader documentation for further details.

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 Verge3D and babylon.js. If the model appears correctly in one or more applications, file a bug against Verge3D. 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. 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.

Asking for help

If you've gone through the troubleshooting process above and your model still isn't working, the right approach to asking for help will get you to a solution faster. Post a question on the Verge3D forum and, whenever possible, include your model (or a simpler model with the same problem) in any formats you have available. Include enough information for someone else to reproduce the issue quickly — ideally, a live demo.