Vi3W
LOG INGet Access
Skip to content

Integration · Three.js

Put Vi3W models on the web with Three.js and GLB

Export the model from Vi3W as GLB and load it with Three.js's GLTFLoader, then add the loaded scene to your own.

Export-compatibleNo plugin: export a file from Vi3W and import it here.

  • .glb
  • .recommended)
  • .fbx
  • .obj

Quick answer

How do you use Vi3W models in Three.js?

Export the model from Vi3W as GLB and load it with Three.js's GLTFLoader, then add the loaded scene to your own. Because the materials are physically based, the model also needs light: an environment map such as RoomEnvironment, or real lights. Compress the GLB's textures before shipping, since they dominate download size.

Setup

From Vi3W to Three.js, step by step.

Steps checked against the three.js documentation, October 2026.

  1. Export from Vi3W as GLB. glTF is the web's native 3D format, and GLB loads in one request.
  2. Load it with GLTFLoader from three/addons/loaders/GLTFLoader.js, and add gltf.scene to your scene in the load callback.
  3. Light it. The model uses MeshStandardMaterial, which reflects its surroundings. Without lights or an environment map it renders dark or black. A quick fix is RoomEnvironment passed through a PMREMGenerator into scene.environment.
  4. Optimise before shipping. Resize textures to 2K or less, then compress them, for example with glTF Transform (KTX2 or WebP textures, Draco or meshopt geometry). Add the matching decoders to your loader.
  5. Frame the model. Compute its bounding box and fit the camera, so models of any size appear correctly.

For a no-code alternative, Google's <model-viewer> web component displays a GLB with lighting, orbit controls and AR built in.

Example: Load with GLTFLoader (JavaScript)

You can also import from a script.

JavaScript · three.js
import * as THREE from "three";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";

const loader = new GLTFLoader();
loader.load("/models/your-model.glb", (gltf) => {
  scene.add(gltf.scene);
});

Formats that work with Three.js

File formats

Formats that work with Three.js, in order of preference.

  • GLBGLB / glTF 2.0 (GLTFLoader
  • RECOMMENDED)recommended)
  • FBXFBXFBXLoader
  • OBJOBJOBJLoader

What doesn’t carry across

  • No Three.js package or SDK. Vi3W exports standard GLB files. Loading, lighting and interaction are your code.
  • Static meshes only. There are no animations to play from a Vi3W export. Interaction such as rotation, configuration or click-to-swap is written in JavaScript.
  • Texture size is the main performance cost. Generated textures are detailed. Resize and compress them for mobile visitors. See 3D file formats.

Common issues

Questions Three.js users actually ask.

How to load glb format file in my code?

Use GLTFLoader: import it from three/addons/loaders/GLTFLoader.js, call loader.load('model.glb', (gltf) => scene.add(gltf.scene)), and serve the page from a local web server rather than opening the HTML file directly, because browsers block loading files from disk. The same loader handles .glb and .gltf.

Is my .glb file too big for Three js?

If it takes seconds to appear, probably yes, and textures are usually the reason. Geometry is often a tiny fraction of a GLB's size. Cap textures at 2K (4K only for hero objects), convert them to KTX2 or WebP, and compress geometry with Draco or meshopt. Tools such as glTF Transform do all of this from the command line.

How to use GLTF Loader in three.js? Texture and material displaying as black

glTF materials are physically based, so with no light they render black. Add lights, or better, an environment map: RoomEnvironment through a PMREMGenerator, assigned to scene.environment, lights every PBR material evenly. The textures were loading all along; there was just nothing for them to reflect.

Need more help?

Join the community or read the guides.

More integration guides

The same workflow, for your other tools.

Related reading

From text to 3D

Generate a model for Three.js.

Turn ideas into game-ready 3D models from text, a sketch or an image. No complex software — it all runs in your browser.

Try Vi3W freeAll integrations

Last reviewed