threejsr151

a demo in threejs r150

by VictorFang1214

HTML

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.151.3/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.151.3/examples/jsm/"
    }
  }
</script>

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

CSS

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

JavaScript

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { KTX2Loader } from "three/addons/loaders/KTX2Loader.js";
import { MeshoptDecoder } from "three/addons/libs/meshopt_decoder.module.js";

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(45, width / height, 0.1, 10000);
    camera.position.set(0, 2, 10);

    const controls = new 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 GLTFLoader();
    loader.setCrossOrigin('anonymous');
    loader.setMeshoptDecoder(MeshoptDecoder);

    const kTX2Loader = new KTX2Loader();
    kTX2Loader.setTranscoderPath("https://unpkg.com/three@0.151.3/examples/js/libs/basis/");
    kTX2Loader.detectSupport(renderer);
    loader.setKTX2Loader(kTX2Loader);

    loader.load('https://raw.githubusercontent.com/Victorfy1214/testModel/main/scene.glb', (gltf) => {
        const model = gltf.scene;
        scene.add(model);
    });

    animate();

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