webgl/gltf/index.html

<!DOCTYPE html>

<head>
  <!-- <script src="https://cdn.jsdelivr.net/npm/three@v0.108.0"></script> -->
  <script src="three.min.js"></script>
  <script src="GLTFLoader.js"></script>
  <script src="BasisTextureLoader.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@v0.104.0/examples/js/controls/OrbitControls.js"></script>
  <style>
    html, body { width:100%; height:100%; margin:0; padding:0; }
    canvas { display:block; }
    #panel { position: absolute; top: 10px; left: 10px; color: white; background-color:rgba(0.3, 0.3, 0.3, 0.3); padding: 0.5em; max-width: 400px;}
  </style>
</head>

<body>
    <div id="panel">
      <strong>Basis Texture Transcoder glTF Demo</strong>
      <div id="log"></div>

    </div>
  <script>
    const renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.gammaOutput = true;
    renderer.gammaFactor = 2.2;

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

    const light = new THREE.AmbientLight();
    scene.add( light );

    const light2 = new THREE.PointLight();
    scene.add( light2 );

    const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
    camera.position.set( 8, 6, 5 );
    camera.lookAt( new THREE.Vector3( 0, -2, 0 ) );

    const controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.autoRotate = true;

    // Create BasisTextureLoader and detect supported target formats.

    const basisLoader = new THREE.BasisTextureLoader();
    basisLoader.setTranscoderPath( '../transcoder/build/' );
    basisLoader.useAlpha = false;
    basisLoader.detectSupport( renderer );

    let formatName = 'Unknown format';
    switch(basisLoader.workerConfig.format)
    {
      case THREE.BasisTextureLoader.BASIS_FORMAT.cTFASTC_4x4:
        formatName = 'ASTC';
        break;
      case THREE.BasisTextureLoader.BASIS_FORMAT.cTFBC1:
        formatName = 'BC1';
        break;
      case THREE.BasisTextureLoader.BASIS_FORMAT.cTFBC3:
        formatName = 'BC3';
        break;
      case THREE.BasisTextureLoader.BASIS_FORMAT.cTFBC7_M6_OPAQUE_ONLY:
        formatName = 'BC7';
        break;
      case THREE.BasisTextureLoader.BASIS_FORMAT.cTFPVRTC1_4_RGB:
      case THREE.BasisTextureLoader.BASIS_FORMAT.cTFPVRTC1_4_RGBA:
        formatName = 'PVRTC';
        break;
      case THREE.BasisTextureLoader.BASIS_FORMAT.cTFETC1:
        formatName = 'ETC1';
        break;
      default:
        break;
    }
    log(`Transcode to: <strong>${formatName}</strong>`);

    // Register BasisTextureLoader for .basis extension.

    let loadingManager = new THREE.LoadingManager();
    loadingManager.addHandler( /\.basis$/, basisLoader );

    // Create GLTFLoader, load model, and render.

    const loader = new THREE.GLTFLoader(loadingManager);

    loader.load( 'assets/AgiHqSmall.gltf', ( gltf ) => {

      const model = gltf.scene;
      model.scale.set( 0.01, 0.01, 0.01 );

      scene.add( model );

      document.body.appendChild( renderer.domElement );

      animate();

    }, undefined, ( e ) => console.error( e ) );

    // Main render loop.

    function animate() {

      requestAnimationFrame( animate );
      controls.update();
      renderer.render( scene, camera );

    }

    // Support viewport resizing.

    window.addEventListener( 'resize', () => {

      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize( window.innerWidth, window.innerHeight );

    }, false );

    function log(s) {

      const div = document.createElement('div');
      div.innerHTML = s;
      document.getElementById('log').appendChild(div);

    }
  </script>

</body>

</html>