1.3.2. fejezet, glTF loader

Beküldte pzoli - 2022, augusztus 5 - 12:40du

gltf.html tartalma:

<!DOCTYPE html>
<html>
        <head>
            <meta charset="utf-8">
            <title>My first three.js app</title>
            <style>
              body { margin: 0; }
              canvas { width: 100%; height: 100% }
            </style>
        </head>
        <body>
            <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
            <script type="importmap">
               {
                   "imports": {
                        "three": "https://unpkg.com/three@0.138.0/build/three.module.js",
                        "OrbitControls": "https://unpkg.com/three@0.138.0/examples/jsm/controls/OrbitControls.js",
                        "GLTFLoader": "https://threejs.org/examples/jsm/loaders/GLTFLoader.js"
                   }
               }
             </script>
             <script type="module" src="js/gltfloader.js">
        </body>
</html>

js/gltfloader.js tartalma:

import * as THREE from 'three';
 
import { OrbitControls } from 'OrbitControls';
import { GLTFLoader } from 'GLTFLoader';
 
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 5;
 
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
 
const textureLoader = new THREE.TextureLoader();
const bgTexture = textureLoader.load('skybox.jpg');
scene.background = bgTexture;
 
const lightColor = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(lightColor, intensity);
light.position.set(-1, 2, 4);
scene.add(light);
 
const loader = new GLTFLoader();
loader.load(
    // resource URL
    'Elf.gltf',
    // called when the resource is loaded
    function ( gltf ) {
 
        scene.add( gltf.scene );
 
        var controls = new OrbitControls(camera, renderer.domElement);
        controls.addEventListener( 'change', render ); // use if there is no animation loop
        controls.minDistance = 2;
        controls.maxDistance = 10;
        controls.target.set( 0, 0, - 0.2 );
        controls.update();
        render();
    },
    // called while loading is progressing
    function ( xhr ) {
        console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
    },
    // called when loading has errors
    function ( error ) {
        console.log( 'An error happened' );
    }
);
 
function render() {
    renderer.render( scene, camera );
}