https://binomial.biz/gltf/

1<!DOCTYPE html>
2
3<head>
4  <!-- 

4<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

4 -->
5  

5<script src="three.min.js"></script>

5
6  

6<script src="GLTFLoader.js"></script>

6
7  

7<script src="BasisTextureLoader.js"></script>

7
8  

8<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>

8
9  <style>
10    html, body { width:100%; height:100%; margin:0; padding:0; }
11    canvas { display:block; }
12    #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;}
13  </style>
14</head>
15
16<body>
17    <div id="panel">
18      <strong>Basis Texture Transcoder glTF Demo</strong>
19      <div id="log"></div>
20
21    </div>
22  

22<script>
23    const renderer = new THREE.WebGLRenderer( { antialias: true } );
24    renderer.setSize( window.innerWidth, window.innerHeight );
25    renderer.gammaOutput = true;
26    renderer.gammaFactor = 2.2;
27
28    const scene = new THREE.Scene();
29    scene.background = new THREE.Color( 0xf0f0f0 );
30
31    const light = new THREE.AmbientLight();
32    scene.add( light );
33
34    const light2 = new THREE.PointLight();
35    scene.add( light2 );
36
37    const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
38    camera.position.set( 8, 6, 5 );
39    camera.lookAt( new THREE.Vector3( 0, -2, 0 ) );
40
41    const controls = new THREE.OrbitControls( camera, renderer.domElement );
42    controls.autoRotate = true;
43
44    // Create BasisTextureLoader and detect supported target formats.
45
46    const basisLoader = new THREE.BasisTextureLoader();
47    basisLoader.setTranscoderPath( '../transcoder/build/' );
48    basisLoader.useAlpha = false;
49    basisLoader.detectSupport( renderer );
50
51    let formatName = 'Unknown format';
52    switch(basisLoader.workerConfig.format)
53    {
54      case THREE.BasisTextureLoader.BASIS_FORMAT.cTFASTC_4x4:
55        formatName = 'ASTC';
56        break;
57      case THREE.BasisTextureLoader.BASIS_FORMAT.cTFBC1:
58        formatName = 'BC1';
59        break;
60      case THREE.BasisTextureLoader.BASIS_FORMAT.cTFBC3:
61        formatName = 'BC3';
62        break;
63      case THREE.BasisTextureLoader.BASIS_FORMAT.cTFBC7_M6_OPAQUE_ONLY:
64        formatName = 'BC7';
65        break;
66      case THREE.BasisTextureLoader.BASIS_FORMAT.cTFPVRTC1_4_RGB:
67      case THREE.BasisTextureLoader.BASIS_FORMAT.cTFPVRTC1_4_RGBA:
68        formatName = 'PVRTC';
69        break;
70      case THREE.BasisTextureLoader.BASIS_FORMAT.cTFETC1:
71        formatName = 'ETC1';
72        break;
73      default:
74        break;
75    }
76    log(`Transcode to: <strong>${formatName}</strong>`);
77
78    // Register BasisTextureLoader for .basis extension.
79
80    let loadingManager = new THREE.LoadingManager();
81    loadingManager.addHandler( /\.basis$/, basisLoader );
82
83    // Create GLTFLoader, load model, and render.
84
85    const loader = new THREE.GLTFLoader(loadingManager);
86
87    loader.load( 'assets/AgiHqSmall.gltf', ( gltf ) => {
88
89      const model = gltf.scene;
90      model.scale.set( 0.01, 0.01, 0.01 );
91
92      scene.add( model );
93
94      document.body.appendChild( renderer.domElement );
95
96      animate();
97
98    }, undefined, ( e ) => console.error( e ) );
99
100    // Main render loop.
101
102    function animate() {
103
104      requestAnimationFrame( animate );
105      controls.update();
106      renderer.render( scene, camera );
107
108    }
109
110    // Support viewport resizing.
111
112    window.addEventListener( 'resize', () => {
113
114      camera.aspect = window.innerWidth / window.innerHeight;
115      camera.updateProjectionMatrix();
116      renderer.setSize( window.innerWidth, window.innerHeight );
117
118    }, false );
119
120    function log(s) {
121
122      const div = document.createElement('div');
123      div.innerHTML = s;
124      document.getElementById('log').appendChild(div);
125
126    }
127  </script>

127
128
129</body>
130
131</html>