如何让 GLTFLoader 在三个 js 中工作

Posted 2023-03-23

【中文标题】如何让 GLTFLoader 在三个 js 中工作

【英文标题】：How to get GLTFLoader to work in three js

【发布时间】：2020-12-14 12:40:52

【问题描述】：

我设置了一个新的 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>

【问题讨论】：

如果您查看该文件的源代码，您会看到类似import ..., sRGBEncoding from "../../../build/three.module.js"; 的内容，因此复制该文件会破坏它对three.module.js 的引用。如果您想暴力破解，您可以复制整个three.js 代码而不是使用npm/yarn/esm，这样可以使其正常工作，但使用esm 更有意义，在这种情况下为@987654328 @和import GLTFLoader from 'three/examples/jsm/loaders/GLTFLoader.js'

我将 three.module.js 文件复制到 js 文件夹中，并更改了 GLTFLoader 导入的依赖项，但它仍然没有工作，我尝试将我的代码更改为你的建议，但它仍然没有工作.有什么我做错了吗？浏览器调试器显示 Uncaught SyntaxError: Cannot use import statement outside a module。我添加了这两行代码： var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

threejs.org/docs/index.html#manual/en/introduction/Installation 有帮助吗？如果您使用包含导入/导出的文件，则必须导入它们。使用<script src="GLTFLoader.js"></script> 将不起作用。

所以我尝试了该页面所说的内容，但出现此错误：CORS 策略已阻止从源“null”访问“file:///C:/three”处的脚本：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。我现在连基本的三个代码都导入不了，更不用说加载器了。现在呢？

我还看到它直接从 C: 目录获取文件路径，所以我更改为我在 node_modules 文件夹中安装 'three with npm 的位置，我得到了同样的错误。

【参考方案1】：

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

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

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

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

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review