javascript - Uncaught ReferenceError : model is not defined

Question

我对 JavaScript 很陌生，所以据我所知，你们可能会对我的代码感到畏缩。基本上，我试图定义一个通过 Three.js GTLF Loader 导入的模型，并将其定义为“模型”，这样我就可以使其自动旋转。

我的术语可能远远达不到标准，但这是我知道如何解释我正在做的事情以及需要解决的问题的唯一方法。

我将链接我的整个代码，但错误在这里很明显:

                        var model
                        var modelLoader = new GLTFLoader().setPath( 'models/DamagedHelmet/' );
                        modelLoader.load( 'DamagedHelmet.gltf', function ( gltf ) {

                            model = gltf.scene;
                            gltf.scene.traverse( function ( child ) {

                                if ( child.isMesh ) {

                                    roughnessMipmapper.generateMipmaps( child.material );

                                }

                            } );

                            scene.add(model);

                            roughnessMipmapper.dispose();

                            render();

                        } );

我只将对象定义为模型，因此对象会自动连续旋转，我尝试在这里这样做，下面是几行代码:

                function render() {

            renderer.render( scene, camera );

                model.rotation.x += 0.01;
                model.rotation.y += 0.005;

            }

可能有一些非常明显的东西我遗漏了或者做错了。我在网上找到的所有解决方案似乎只有在未通过模块导入 Javascript 的情况下才有效。 (至少这是我的猜测)

干杯，伙计们。

Answer 1

Gltf 有点痛苦，但对于您的问题，取决于您使用的是节点还是本地脚本，请务必添加(对于节点):

import { GLTFLoader } from '../../node_modules/three/examples/jsm/loaders/GLTFLoader.js';

为了将 GLTFLoader 添加到您的项目

完成此操作后，您可以尝试确保不违反 CORS 政策，该政策确保您在 header 中允许同源，如果您使用express，这会给您类似的结果:

app.get('/', (req, res, next) =>{
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
next()
  });

source

然后您必须确保所有这些文件:

"buffers" : [
    {
        "byteLength" : 558504,
        "uri" : "DamagedHelmet.bin"
    }
],
"images" : [
    {
        "uri" : "Default_albedo.jpg"
    },
    {
        "uri" : "Default_metalRoughness.jpg"
    },
    {
        "uri" : "Default_emissive.jpg"
    },
    {
        "uri" : "Default_AO.jpg"
    },
    {
        "uri" : "Default_normal.jpg"
    }
],

在 DamagedHelmet 中列出的也是可用的，并且不会违反 CORS 政策，只有这样您才可以使用对我来说似乎正确的代码