未捕获的 ReferenceError：模型未定义答案

【问题标题】：Uncaught ReferenceError: model is not defined未捕获的 ReferenceError：模型未定义
【发布时间】：2020-07-08 19:06:41
【问题描述】：

我对 JavaScript 非常陌生，所以据我所知，你们可能会对我的代码感到畏缩。基本上我正在尝试定义通过 Three.js GTLF 加载器导入的模型并将其定义为“模型”，以便我可以使其自动旋转。

我的术语可能与标准不符，但这是我知道如何解释我在做什么以及需要修复什么的唯一方法。

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

                        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();

                        } );

我只将对象定义为model，所以对象会自动不断旋转，我在这里尝试这样做，下面几行代码：

                function render() {

            renderer.render( scene, camera );

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

            }

可能有一些非常明显的事情我错过了或做错了。我在网上找到的所有解决方案似乎只有在没有通过模块导入 Javascript 时才有效。（至少这是我的猜测）

大家好。

【问题讨论】：

您的代码有两个问题。 1）render 函数看不到您的 model 变量，请将其定义在声明函数的外部范围内。 2）GLTFLoader异步加载模型，直到模型完全加载model未定义。这意味着您的model.rotation.x 也会返回错误，请在旋转之前检查model 是否未定义。
@ScieCode 如果你解释一下我会怎么做，可以吗？抱歉，我真的是 JavaScript 新手
一种简单的方法是在全局范围内声明var model;，然后它将可用于所有函数。对于旋转部分，只需检查if ( model !== undefined )，然后继续旋转。
eloquentjavascript.net 强烈推荐这本关于 Javascript 的书。它涵盖了非常重要的 javascript 概念，如变量/函数范围、提升和闭包。

标签： javascript three.js reference definition

【解决方案1】：

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

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

为了将 GLTFLoader 添加到您的项目中

完成此操作后，您可以尝试确保不违反 CORS 政策，该政策确保您在标头中允许同源，如果您使用 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 政策的情况下，您才能使用对我来说似乎正确的代码

【讨论】：