Darker Color

by seeon

HTML

<canvas id="webgl"></canvas>

CSS

body {
  margin: 0;
}
#webgl {
  width: 100vw;
  height: 100vh;
  display: block;
}

JavaScript

import * as THREE from 'https://cdn.skypack.dev/three@0.133.0';
import {
  OrbitControls
} from 'https://cdn.skypack.dev/three@0.133.0/examples/jsm/controls/OrbitControls.js';
import {
  GLTFLoader
} from 'https://cdn.skypack.dev/three@0.133.0/examples/jsm/loaders/GLTFLoader.js';
import {
  RGBELoader
} from "https://cdn.skypack.dev/three@0.133.0/examples/jsm/loaders/RGBELoader.js";

import {
  EffectComposer
} from "https://cdn.skypack.dev/three@0.133.0/examples/jsm/postprocessing/EffectComposer.js";
import {
  RenderPass
} from "https://cdn.skypack.dev/three@0.133.0/examples/jsm/postprocessing/RenderPass.js";
import {
  ShaderPass
} from "https://cdn.skypack.dev/three@0.133.0/examples/jsm/postprocessing/ShaderPass.js";
import {
  CopyShader
} from "https://cdn.skypack.dev/three@0.133.0/examples/jsm/shaders/CopyShader.js";
import {
  TAARenderPass
} from "https://cdn.skypack.dev/three@0.133.0/examples/jsm/postprocessing/TAARenderPass.js";
import {
  GammaCorrectionShader
} from "https://cdn.skypack.dev/three@0.133.0/examples/jsm/shaders/GammaCorrectionShader.js";

function main() {
  const canvas = document.querySelector('#webgl');
  const renderer = new THREE.WebGLRenderer({
    canvas
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  renderer.toneMapping = THREE.ACESFilmicToneMapping;
  renderer.toneMappingExposure = 1;
  renderer.outputEncoding = THREE.sRGBEncoding;
  const camera = new THREE.PerspectiveCamera(75, 2, 0.1, 5);
  camera.position.z = 2;

  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0x151515);

  const orbit = new OrbitControls(camera, renderer.domElement);

  //HDR map 
  const pmremGenerator = new THREE.PMREMGenerator(renderer);
  pmremGenerator.compileEquirectangularShader();
  new RGBELoader()
    .setDataType(THREE.UnsignedByteType)
    .load("https://default-vessel.s3.ap-south-1.amazonaws.com/interior.hdr", (texture) => {
      var...