# THREE.sRGBEncoding influences 3D Assets? Related to Loading 3D Model

**URL:** <https://discourse.threejs.org/t/three-srgbencoding-influences-3d-assets-related-to-loading-3d-model/66567>\
**Category:** Discussion\
**Tags:** lights, models, textures\
**Created:** [June 8, 2024, 4:17am UTC](https://discourse.threejs.org/t/three-srgbencoding-influences-3d-assets-related-to-loading-3d-model/66567 "2024-06-08T04:17:47Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![iHast](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ihast/32/34649_2.png) [@iHast](https://discourse.threejs.org/u/iHast)\
**Post date:** [June 8, 2024, 4:17am UTC](https://discourse.threejs.org/t/three-srgbencoding-influences-3d-assets-related-to-loading-3d-model/66567/1 "2024-06-08T04:17:47Z")

</div>

Some time ago, while studying Loading 3D Models, I encountered a island model that didn’t respond to any type of lighting. However, upon using `renderer.outputEncoding = THREE.sRGBEncoding`, the model displayed vibrant colors.

Upon reevaluation, I noticed the model contained a ‘textures’ folder, comprising images that wrap around the model.

> Could this issue stem from the model not accepting any color due to its texture setup, or could it be related to the type of mesh used?

I’m interested in discussing this further.

- Have you encountered similar issues?
- What should one expect when obtaining models from platforms like Sketchfab?
- Additionally, do you have any tips for newcomers starting to load models?

I’ll share the code below:

```javascript
  import * as THREE from 'three';
  import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
  import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
  import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';

  let scene, camera, renderer, controls, model, model02, environment, pmremGenerator

  //Renderer
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.toneMapping = THREE.ACESFilmicToneMapping;
  renderer.toneMappingExposure = 1;
  renderer.outputEncoding = THREE.sRGBEncoding;
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  //Camera
  camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  camera.position.set( 0, 5, 15 );

  // Scene
  scene = new THREE.Scene();

  //Environment
  /* environment = new RoomEnvironment();
  pmremGenerator = new THREE.PMREMGenerator( renderer );
  scene.environment = pmremGenerator.fromScene( environment ).texture; */
  

  //Directional Light
  const light = new THREE.DirectionalLight( 0xff00ff, 100 );
  light.position.set( 0, 0, 0 ); //default; light shining from top
  light.castShadow = true; // default false
  scene.add( light );

  //Set up shadow properties for the light
  light.shadow.mapSize.width = 512; // default
  light.shadow.mapSize.height = 512; // default
  light.shadow.camera.near = 0.1; // default
  light.shadow.camera.far = 10; // default

  //Create a helper for the shadow camera (optional)
  const helper = new THREE.CameraHelper( light.shadow.camera );
  scene.add( helper );

  //Ambient Light
  const ambientLight = new THREE.AmbientLight( 0x06000b, 100 );
  scene.add( ambientLight );

  //Axes
  scene.add(new THREE.AxesHelper(500))

  //Controls
  controls = new OrbitControls( camera, renderer.domElement );
  controls.update();

  //Background
  new RGBELoader().load( 'royal_esplanade_4k.hdr', function ( texture ) {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.background = texture;
  scene.environment = texture;} );

  // Shiba
  new GLTFLoader().load( 'models/shiba/scene.gltf', result => {
    model = result.scene;
    scene.add( model );
    model.position.set(7, 1, 3);
    model.receiveShadow = true;
    animate();
  });

  // Island
  new GLTFLoader().load( 'models/background/bg.gltf', result => {
    model02 = result.scene;
    scene.add(model02);
    model02.receiveShadow = true;
    animate();
  });
    
    function animate() {
      requestAnimationFrame( animate );
      controls.update();
      renderer.render( scene, camera );
    }

```

I uploaded the island model to anyone who wants to make a test with the lights.  
[island.rar](https://discourse.threejs.org/uploads/short-url/9yT0BGtLQFtzz2f0r7XIAUDaeYy.rar) (7.4 MB)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 8, 2024, 9:05am UTC](https://discourse.threejs.org/t/three-srgbencoding-influences-3d-assets-related-to-loading-3d-model/66567/2 "2024-06-08T09:05:46Z")

</div>

For a better understanding of the topic, I suggest you study the following guide about color spaces and color management: [Color Management in three.js](https://threejs.org/docs/index.html#manual/en/introduction/Color-management).

Also notice that `renderer.outputEncoding = THREE.sRGBEncoding;` is legacy code. In recent `three.js` versions it should be `renderer.outputColorSpace = THREE.SRGBColorSpace;`. But since `THREE.SRGBColorSpace` is the default output color space, there is no need to set it explicitely.