Questions tagged [gltf]

The GL Transmission Format (glTF) is a runtime asset delivery format for GL APIs: WebGL, OpenGL ES, and OpenGL. glTF bridges the gap between 3D content creation tools and modern GL applications by providing an efficient, extensible, interoperable format for the transmission and loading of 3D content.

The GL Transmission Format (glTF) is a runtime asset delivery format for GL APIs: , , and . glTF bridges the gap between 3D content creation tools and modern GL applications by providing an efficient, extensible, interoperable format for the transmission and loading of 3D content.

The need for a network-enabled 3D content delivery format such as glTF has been compared to the need for JPEG for images, and MP3 for audio.

Specification

The glTF specification is maintained by the Khronos Group. This standards organization is also responsible for OpenGL, WebGL, COLLADA, and others.

Sample Models

A collection of Sample models are available for learning glTF, and testing runtime engines and content pipeline tools.

Converters and Exporters

glTF files can be created by converting from other popular formats such as , OBJ, , and others. View the list of converters.

As support for glTF grows, 3D authoring packages may gain the ability to export to glTF directly. For example, a exporter is in early stages of development.

Loaders and Viewers

Support for glTF is available for , , , , and others. Khronos maintains a list of glTF loaders and viewers.

File Structure

A structural overview diagram (by Marco Hutter) shows an at-a-glance view of the structure of a glTF file and its contents.

880 questions
14
votes
2 answers

How do I load GLTFLoader from a cdn THREE.js

I'm having some issues figuring out how to get GLTFLoader to work in THREE.js. I don't understand how to use a cdn site to host the file. I have tried using links from examples around the web but that hasn't done the job for me. I read on another…
Justin
  • 2,873
  • 3
  • 9
  • 16
13
votes
1 answer

Play a GLTF animation? three.js

Hi I have been messing around with three.js for the past week or so, I am completely new to the lib so apologies for anything stupid I may say or ask. I have my code which throws no errors but it does have 1 warning: three.module.js:18314…
user3112634
  • 523
  • 4
  • 10
  • 26
13
votes
8 answers

How to use DRACOLoader with GLTFLoader in ReactJs?

I have a use case in which I am trying to load a GLTF file which is compressed using DRACO-Compression. I am able to run it using plain javascript but I am facing issues integrating the loader with ReactJs. What I am doing: Copying the draco…
Shantanu
  • 159
  • 1
  • 1
  • 5
13
votes
2 answers

On iOS 10, GLTF-WebGL app crashes, Application is build using WKWebView

I am working on 3D model in javascript & using GLTF webGL to render 3D model in iOS. I am loading this model using WKWebView in Ipad Air/Ipad Air 2. This configuration/application works perfect in IOS9, But after upgrading OS to IOS 10 my…
user3587692
  • 183
  • 1
  • 10
11
votes
4 answers

Centering and Resizing GLTF models automatically in Three.js

After downloading 3D models from sketchfab.com and importing them into a Three.js scene, they are most of the times not centered and their size is very big. Is there a way to automatically center and scale gltf models using a script or a software…
b26
  • 632
  • 1
  • 6
  • 25
10
votes
2 answers

Unexpected token < in JSON at position 0 - glTFLoader in Three.js and Vue app

I want to load a .glTF file into three.js using the GLTFLoader in my Vue app. However, I continue to get this error in the console when I try to load the .gltf file with the GLTFLoader: Unexpected token < in JSON at position 0 I have instantiated…
anywhereseason
  • 127
  • 1
  • 8
10
votes
2 answers

How to cast a shadow with a gltf model in three.js?

Hey there i'm new to three js & was wondering how to cast a shadow with a gltf model? I can see it's possible as it's working here I assume i'm not structuring my code correctly- var model = new…
Steve Hamlyn
  • 103
  • 1
  • 1
  • 5
9
votes
2 answers

How to override GLTF materials in three.js

I am trying to create a dynamic way to display solar data on a gltf imported model in three.js. The aim would be to associate different solid colours to different segments of the model and be able to switch these off and on. My current hurdle is…
Jamie Vincent
  • 127
  • 1
  • 3
  • 10
8
votes
3 answers

Load GLB model with Webpack - Three.js

I'm trying to use Webpack for the first time and I have trouble to add my glb model. My model is ok, used many times and I put in public folder. I dont' understand console error, any help will be appreciate, thanks. I'm using three.js r116 and…
MlleBz
  • 331
  • 2
  • 9
8
votes
2 answers

(A-Frame) local gltf wont load; Cannot read property 'slice' of undefined

I took the code from the A-Frame School in which a gltf model is loaded. Then I loaded the Sample Models from Khronos, this box and tried to load it, but I get this error (several times) GLTFLoader.js:979 Uncaught (in promise) TypeError: Cannot read…
Onion
  • 83
  • 1
  • 5
8
votes
1 answer

Animations in Three.js with GLTF from Blender Exporter

I am experimenting with GLTF and Three.js, and I am having a devil of a time trying to get animations to work. My end goal is to be able to create keyframe animated meshes in Blender, export them to GLTF, and use them in Aframe-based WebVR scenes.…
loraan
  • 91
  • 1
  • 4
8
votes
2 answers

How to load a gltf model to Three.js?

I decided to try out gltf format for rendering models in Three.js and I'm using this converter (http://cesiumjs.org/convertmodel.html) to convert the model from Collada to GlTF. It spits out a *.gltf file, however in the examples in Three.js they…
Hamabama
  • 253
  • 1
  • 3
  • 10
7
votes
3 answers

Use the same GLTF model twice in react-three-fiber/drei/Three.js

In this minimal react-three-fiber App I am trying to load and include the same GLTF model twice: import React, { Suspense } from "react"; import { Canvas } from "@react-three/fiber"; import { useGLTF } from "@react-three/drei"; function MyContent()…
Giraphi
  • 1,383
  • 1
  • 11
  • 26
7
votes
2 answers

Can I make the glb file smaller?

I have a large obj file of 306 mb. So I converted it into a glb file to reduce its size. The size of the file has decreased a lot to 82 mb, but it is still big. I want to make this file smaller. Is there a way? If there is, please let me know. If…
김태은
  • 107
  • 1
  • 1
  • 10
7
votes
4 answers

How do I load roughness/metallic map with Assimp using gltf format?

I try to load a scene that's in gltf format. It has metallic and roughness textures (not embedded). Now I want to load the model with the specified textures using Assimp. I retrieve the textures using GetTexture(), but aiTextureType doesn't have…
DaOnlyOwner
  • 343
  • 3
  • 8
1
2 3
58 59