如何让GLTFLoader在三个js中工作

时间:2020-08-25 18:50:37

标签: javascript model loading blender gltf

我设置了一个新的HTML文件以使用three.js,并从GLTFLoader文档中按原样复制并粘贴了示例代码,但没有任何效果,有人可以帮忙吗?加载多维数据集时,我可以很好地运行三个js,但似乎无法识别GLTFLoader.js文件。

如果有人知道为什么这种情况发生(或不发生),请告诉我。 <3

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

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    
    var light = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(light);

    var light2 = new THREE.PointLight(0xffffff, 0.5);
    scene.add(light2);

    var renderer = new THREE.WebGLRenderer();
    renderer. setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    var loader = new GLTFLoader();
    
    // Load a glTF resource
    loader.load(
        // resource URL
        'pentaprism.glb',
        // called when the resource is loaded
        function ( gltf ) {
    
            scene.add( gltf.scene );
    
            gltf.animations; // Array<THREE.AnimationClip>
            gltf.scene; // THREE.Group
            gltf.scenes; // Array<THREE.Group>
            gltf.cameras; // Array<THREE.Camera>
            gltf.asset; // Object
    
        },
        // 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 update() {
        
    }


    function animate() {
        requestAnimationFrame( animate );

        update();

        renderer.render( scene, camera );
    }
    animate();

</script>

0 个答案:

没有答案