Three.js glTF Load Sample

Sample to load glTF model of Draco compression with Three.js

by cx20

HTML

<script src="https://unpkg.com/three@0.132.2/build/three.min.js"></script>
<script src="https://unpkg.com/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://unpkg.com/three@0.132.2/examples/js/loaders/DRACOLoader.js"></script>
<script src="https://unpkg.com/three@0.132.2/examples/js/controls/OrbitControls.js"></script>

<canvas id="c"></canvas>

CSS

html, body {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

JavaScript

window.addEventListener('load', init);

function init() {
    const width = window.innerWidth;
    const height = window.innerHeight;

    const canvasElement = document.querySelector('#c');
    const renderer = new THREE.WebGLRenderer({
        canvas: canvasElement,
    });
    renderer.setSize(width, height);

    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 10000);
    camera.position.set(0, 2, 3);

    const controls = new THREE.OrbitControls(camera, canvasElement);
    controls.update();
    
    const directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1);
    scene.add(directionalLight);

    const ambientLight = new THREE.AmbientLight(0x333333);
    scene.add(ambientLight);

    const loader = new THREE.GLTFLoader();
    loader.setCrossOrigin('anonymous');

    const dracoLoader = new THREE.DRACOLoader().setDecoderPath('https://unpkg.com/three@0.132.2/examples/js/libs/draco/gltf/');
    loader.setDRACOLoader(dracoLoader);

    loader.load('https://cx20.github.io/gltf-test/sampleModels/Duck/glTF-Draco/Duck.gltf', (gltf) => {
        const model = gltf.scene;
        scene.add(model);
    });

    animate();

    function animate() {
        renderer.render(scene, camera);
        requestAnimationFrame(animate);
    }
}