# Blender loaded file looks Wierd

**URL:** <https://discourse.threejs.org/t/blender-loaded-file-looks-wierd/18369>\
**Category:** Questions\
**Tags:** gltf-loader, blender, blender-exporter, textures, gltf\
**Created:** [September 2, 2020, 12:36pm UTC](https://discourse.threejs.org/t/blender-loaded-file-looks-wierd/18369 "2020-09-02T12:36:26Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![aravindjaimon](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aravindjaimon/32/13047_2.png) [@aravindjaimon](https://discourse.threejs.org/u/aravindjaimon)\
**Post date:** [September 2, 2020, 12:36pm UTC](https://discourse.threejs.org/t/blender-loaded-file-looks-wierd/18369/1 "2020-09-02T12:36:26Z")

</div>

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

 ![Screenshot_20200902_174602](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/4/4315f0e6f8f90eea5edd19484293a1cfdf13a6c7.png)  
But when I load it to the threejs with the GLTF loader ![Screenshot_20200902_180343](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/a/a6910f99b3e524bbe9c22afcca3526ed0b9c5c6e.png)  
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

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [September 2, 2020, 12:42pm UTC](https://discourse.threejs.org/t/blender-loaded-file-looks-wierd/18369/2 "2020-09-02T12:42:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![aravindjaimon](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aravindjaimon/32/13047_2.png) [@aravindjaimon](https://discourse.threejs.org/u/aravindjaimon)\
**Post date:** [September 2, 2020, 1:59pm UTC](https://discourse.threejs.org/t/blender-loaded-file-looks-wierd/18369/4 "2020-09-02T13:59:09Z")

</div>

```
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(
  45,
  window.innerWidth / window.innerHeight,
  1,
  1000
);
camera.rotation.y = 4.7;
camera.position.x = -10;
camera.position.y = 2;

var loader = new GLTFLoader();
var dracoloader = new DRACOLoader();
dracoloader.setDecoderPath("/three/examples/js/libs/draco/");
loader.setDRACOLoader(dracoloader);

loader.load("model/ice stall04.gltf", (gltf) => {
  scene.add(gltf.scene);
});

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

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

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

container.addEventListener("click", () => {
  controls.lock();
});

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

```

This is the code I have used

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [September 2, 2020, 3:51pm UTC](https://discourse.threejs.org/t/blender-loaded-file-looks-wierd/18369/5 "2020-09-02T15:51:42Z")

</div>

Check first how the model looks in a viewer like [https://gltf-viewer.donmccurdy.com/](https://gltf-viewer.donmccurdy.com/). 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.

---

<div class="post-metadata">

**Author:** ![aravindjaimon](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aravindjaimon/32/13047_2.png) [@aravindjaimon](https://discourse.threejs.org/u/aravindjaimon)\
**Post date:** [September 2, 2020, 4:56pm UTC](https://discourse.threejs.org/t/blender-loaded-file-looks-wierd/18369/6 "2020-09-02T16:56:20Z")

</div>

[https://drive.google.com/drive/folders/15f89UFUJ4na4TMvK8vX5-a9qv47VGmto?usp=sharing](https://drive.google.com/drive/folders/15f89UFUJ4na4TMvK8vX5-a9qv47VGmto?usp=sharing)  
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.

---

<div class="post-metadata">

**Author:** ![aravindjaimon](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aravindjaimon/32/13047_2.png) [@aravindjaimon](https://discourse.threejs.org/u/aravindjaimon)\
**Post date:** [September 2, 2020, 5:00pm UTC](https://discourse.threejs.org/t/blender-loaded-file-looks-wierd/18369/7 "2020-09-02T17:00:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [September 2, 2020, 5:29pm UTC](https://discourse.threejs.org/t/blender-loaded-file-looks-wierd/18369/8 "2020-09-02T17:29:49Z")

</div>

There’s extensive documentation here:

- [https://threejs.org/docs/#examples/en/loaders/GLTFLoader](https://threejs.org/docs/#examples/en/loaders/GLTFLoader)
- [https://docs.blender.org/manual/en/2.83/addons/import\_export/scene\_gltf2.html](https://docs.blender.org/manual/en/2.83/addons/import_export/scene_gltf2.html)

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:

```javascript
    S8S_v3d_texture_data
    S8S_v3d_data
    S8S_v3d_material_data
    S8S_v3d_camera_data
    S8S_v3d_mesh_data
    S8S_v3d_node_data
    S8S_v3d_scene_data

```

---

<div class="post-metadata">

**Author:** ![aravindjaimon](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aravindjaimon/32/13047_2.png) [@aravindjaimon](https://discourse.threejs.org/u/aravindjaimon)\
**Post date:** [September 3, 2020, 3:59am UTC](https://discourse.threejs.org/t/blender-loaded-file-looks-wierd/18369/9 "2020-09-03T03:59:40Z")

</div>

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/3/3c5a418f33f86ab076b9f6cfc8a54768171bd670.jpeg)  
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

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [September 3, 2020, 4:02am UTC](https://discourse.threejs.org/t/blender-loaded-file-looks-wierd/18369/10 "2020-09-03T04:02:22Z")

</div>

> [@aravindjaimon](#):
>
> Can you provide me the code for this particular lighting

Click the ‘source’ button on the viewer.

---

<div class="post-metadata">

**Author:** ![aravindjaimon](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aravindjaimon/32/13047_2.png) [@aravindjaimon](https://discourse.threejs.org/u/aravindjaimon)\
**Post date:** [September 3, 2020, 4:21am UTC](https://discourse.threejs.org/t/blender-loaded-file-looks-wierd/18369/11 "2020-09-03T04:21:53Z")

</div>

Thank you sir ill test it as soon as possible

---

<div class="post-metadata">

**Author:** ![aravindjaimon](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aravindjaimon/32/13047_2.png) [@aravindjaimon](https://discourse.threejs.org/u/aravindjaimon)\
**Post date:** [September 3, 2020, 4:25am UTC](https://discourse.threejs.org/t/blender-loaded-file-looks-wierd/18369/12 "2020-09-03T04:25:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![aravindjaimon](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aravindjaimon/32/13047_2.png) [@aravindjaimon](https://discourse.threejs.org/u/aravindjaimon)\
**Post date:** [September 3, 2020, 4:41am UTC](https://discourse.threejs.org/t/blender-loaded-file-looks-wierd/18369/13 "2020-09-03T04:41:47Z")

</div>

![untitled](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/4/49d331a0d67b4b7f5e3daabf627b6346b4574656.jpeg)  
This is the rendered output from the blender.  
will i get the exact same output in threejs.  
[https://drive.google.com/drive/folders/1XPko4Z71bDRLXJlr\_y5o68VIoB9SmmWB?usp=sharing](https://drive.google.com/drive/folders/1XPko4Z71bDRLXJlr_y5o68VIoB9SmmWB?usp=sharing)  
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.

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [September 3, 2020, 5:54am UTC](https://discourse.threejs.org/t/blender-loaded-file-looks-wierd/18369/14 "2020-09-03T05:54:22Z")

</div>

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:

- [https://threejs.org/examples/?q=gltf#webgl\_loader\_gltf](https://threejs.org/examples/?q=gltf#webgl_loader_gltf)
- [https://github.com/donmccurdy/three-gltf-viewer/blob/99b53e3300e25d0d984da46dcfa14a7dfd3ef8de/src/viewer.js](https://github.com/donmccurdy/three-gltf-viewer/blob/99b53e3300e25d0d984da46dcfa14a7dfd3ef8de/src/viewer.js)

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.

---

<div class="post-metadata">

**Author:** ![aravindjaimon](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aravindjaimon/32/13047_2.png) [@aravindjaimon](https://discourse.threejs.org/u/aravindjaimon)\
**Post date:** [September 3, 2020, 6:27am UTC](https://discourse.threejs.org/t/blender-loaded-file-looks-wierd/18369/15 "2020-09-03T06:27:43Z")

</div>

Thank you so very much