Blender loaded file looks Wierd

I have a model that is created in blender and it looks awesome in blender

But when I load it to the threejs with the GLTF loader
this is what I am getting Anybody to have any idea on fixing this I am really stuck in nowhere.
thanks to all who could help me

Can you share the file here? And also the code you’re using to load it?

import * as THREE from "./three/build/three.module.js";
import { GLTFLoader } from "./three/examples/jsm/loaders/GLTFLoader.js";
import { PointerLockControls } from "./three/examples/jsm/controls/PointerLockControls.js";
import { DRACOLoader } from "./three/examples/jsm/loaders/DRACOLoader.js";

var renderer = new THREE.WebGLRenderer();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  window.innerWidth / window.innerHeight,
camera.rotation.y = 4.7;
camera.position.x = -10;
camera.position.y = 2;

var loader = new GLTFLoader();
var dracoloader = new DRACOLoader();

loader.load("model/ice stall04.gltf", (gltf) => {

var hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
hemiLight.position.set(0, 300, 0);

var dirLight = new THREE.DirectionalLight(0xffffff);
dirLight.position.set(75, 300, -75);

const container = document.getElementById("model");
var controls = new PointerLockControls(camera, container);

container.addEventListener("click", () => {

function animate() {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;
  renderer.render(scene, camera);

This is the code I have used

Check first how the model looks in a viewer like If it’s still not looking how you want, then the model itself isn’t exporting correctly, and you’d need to share the .blend to get help with that. If it does look correct in a viewer, then the problem likely has to do with lighting and renderer setup. Using an IBL (scene.environment or material.envMap) helps enormously. Setting renderer.outputEncoding = THREE.sRGBEncoding is also important to getting correct colors.

1 Like
This link has the .blend file the gltf file and also the output I need in That was created in blender but Viewed using Verge 3D.
Please do open the Verge 3D file as a server and open the html file for the required output
The size was large that’s why I am unable to upload it here.

I think the model is not getting exported correctly, Because lot of the colours are not getting right. Can some one explain if there is a particular way in which we can export the model in blender which is completely compatible with threejs.
I am not the one who does the blender work it is done by another 3D guy. I do only the ThreeJS part is there anything i can tell him to make it right

There’s extensive documentation here:

I would strongly recommend testing in popular glTF viewers first. Verge3D puts a lot of custom extensions into its glTF files that are not supported by anything outside of Verge3D’s own tools. If Verge3D has an option to export official glTF files, you will want to use that. If not, I think you will need to ask Verge3D customer support for help. Opening this model in my viewer you’ll see a lot of warnings because of unsupported extensions:


Your gltf Viewer is very good so this is how it loads in the viewer
So what is the lighting you use here. Mostly my lighting is a problem. Can you provide me the code for this particular lighting

Click the ‘source’ button on the viewer.


Thank you sir ill test it as soon as possible

This model i loaded has nothing to do with verge 3d but then too it is missing lot of things

This is the rendered output from the blender.
will i get the exact same output in threejs.
the blend file and also the glb file is available in this link
@donmccurdy can you please test the model again one last time with this model and explain where i can fix it.

Blender is rendering with global illumination and a path tracing renderer here. You will not get exactly the same lighting from a realtime renderer like three.js. To get the same results as my viewer shows, feel free to copy any of the code here:

The important parts are setting renderer.outputEncoding = THREE.sRGBEncoding; and using material.envMap or scene.environment with a high quality IBL.

If you want to get better results than you’re currently getting from my viewer, you’d need to bake your lighting to an AO map or a lightmap. That takes some work, but there are various Blender tutorials on the subject.


Thank you so very much