如何让 GLTFLoader 在三个 js 中工作

Question

我设置了一个新的 html 文件来使用 three.js，并从 GLTFLoader 文档中复制粘贴了示例代码，但没有任何效果，有人可以帮忙吗？当我加载一个多维数据集时，我可以运行三个 js，但它似乎无法识别 GLTFLoader.js 文件。

如果有人知道为什么会发生（或没有发生）请告诉我。

<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>

Answer 1

我也一直在尝试学习如何使用 GLTFLoader.js。

不确定它是否正是您想要的，但也许这个视频会有所帮助：https://www.youtube.com/watch?v=F4q2cqj_Tdc

如果我没记错的话，他做的一些不同的事情是： 使用

希望对您有所帮助！祝你好运:--)