gltf

by seeon

HTML

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

CSS

body {
  margin: 0;
}
#webgl {
  width: 100vw;
  height: 100vh;
  display: block;
}
 .dim {
        position: absolute;
        left: 0;
        top: 0;
        font-family: monospace;
        font-size: 12px;
        width: 40px;
        height: 16px;
        text-align: center;
        border: none;
        background: white;
        border-radius: 2px;
        padding: 1px 2px;
      }

JavaScript

import * as THREE from 'https://cdn.skypack.dev/[email protected]';
import {
  OrbitControls
} from 'https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js';
import {
  GLTFLoader
} from 'https://cdn.skypack.dev/[email protected]/examples/jsm/loaders/GLTFLoader.js';
import {
  RGBELoader
} from "https://cdn.skypack.dev/[email protected]/examples/jsm/loaders/RGBELoader.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.setClearColor(0x303030, 1);
  renderer.toneMapping = THREE.ACESFilmicToneMapping;
  renderer.outputEncoding =  THREE.sRGBEncoding;
  renderer.toneMappingExposure = 1;
 
  

  const camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 0.1, 1000);
 camera.position.set(3, 3, 3);

  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 envMap = pmremGenerator.fromEquirectangular(texture).texture;
      texture.minFilter = THREE.LinearFilter;
      texture.magFilter = THREE.LinearFilter;
      texture.mapping = THREE.EquirectangularReflectionMapping;
      texture.format = THREE.RGBFormat;
      // texture.needsUpdate = true;
      // scene.background = envMap;
      scene.environment = envMap;
      texture.dispose();
      pmremGenerator.dispose();
    });

  const sphere = "https://default-vessel.s3.ap-south-1.amazonaws.com/s_glb.glb"
  const GLtfLoader = new GLTFLoader()

  GLtfLoader.load(sphere, (gltf) => {
  //...