Javascript 在GLTF加载程序外部编辑导入的模型数据（React应用程序）

我想在react应用程序的GLTF加载程序之外访问导入模型的数据。在本例中，我希望在调用动画函数时更新模型的位置，使其沿z轴缓慢移动

我在所有函数之外设置了一个名为plAr的变量，这样它就可以通过

let plAr

I还设置

plAr=gltf.scene加载程序内部

但是，我不断得到错误：“无法读取未定义的属性‘位置’”

下面是我的代码：

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


var camera, scene, renderer;
// var geometry, material, mesh;
var mixer;
var clock = new THREE.Clock();
let Idle1;
let walk;
let attack;
let plAr;

init();
animate();

// Instantiate a loader
var loader = new GLTFLoader();

// Load a glTF resource
loader.load(
    // resource URL
    '/CHaracter mod1.glb',
    // called when the resource is loaded
    function ( gltf ) {
        mixer = new THREE.AnimationMixer(gltf.scene);
        plAr = gltf.scene;

    Idle1 = mixer.clipAction( gltf.animations[ 0 ] );
    walk = mixer.clipAction( gltf.animations[ 1 ] );
    attack = mixer.clipAction( gltf.animations[ 2 ]);

        scene.add( gltf.scene );
        gltf.scene.position.y = camera.position.y - .23;
        gltf.scene.position.x = camera.position.x;
        gltf.scene.position.z = camera.position.z - 2.2;
        gltf.scene.rotation.y = camera.rotation.y - 9.44;
        gltf.scene.scale.set(.02, .02, .02);

        walk.play();
        // gltf.animations; // Array<THREE.AnimationClip>
        // gltf.scene; // THREE.Scene
        // gltf.scenes; // Array<THREE.Scene>
        // 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', error );

    }
);
var Xl = 0;
function init() {

    camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.01, 10);
    camera.position.z = 2;
    camera.position.y = .02;
    camera.position.x += -.03;
    camera.scale.z = 10;

    scene = new THREE.Scene();
    var light1 = new THREE.AmbientLight(0xcccccc, 15, 2000, 2000, 2000);
    scene.add(light1);
    // geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
    // material = new THREE.MeshNormalMaterial();

    // mesh = new THREE.Mesh(geometry, material);
    // scene.add(mesh);

    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
   // renderer.setClearColor( 0xFFFFFF );
    document.body.appendChild(renderer.domElement);
    const controls = new OrbitControls(camera, renderer.domElement)
        controls.enableDamping = true
        controls.dampingFactor = 0.25
        controls.enableZoom = false
Xl++;
if(Xl > 50){
//nothing
}
}

function animate() {
    var delta = clock.getDelta();

if ( mixer ) mixer.update( delta + .001);
plAr.position.z--;
//delta - .01 = twise as slow, + .01 = twice as fast
console.log("poop");
    renderer.render(scene, camera);
    requestAnimationFrame( animate );
}


import{GLTFLoader}来自“../node_modules/three/examples/jsm/loaders/GLTFLoader”；
从“../node_modules/three/examples/jsm/controls/OrbitControls”导入{OrbitControls}”；
摄像机、场景、渲染器；
//变量几何、材质、网格；
var混频器；
var clock=新的三个时钟（）；
让我们无所事事；
让我们走吧；
让我们进攻；
让plAr；
init（）；
制作动画（）；
//实例化加载程序
var loader=新的GLTFLoader（）；
//加载glTF资源
装载机(
//资源URL
“/CHaracter mod1.glb”，
//在加载资源时调用
功能（gltf）{
mixer=新的3.AnimationMixer（gltf.scene）；
plAr=gltf.scene；
Idle1=mixer.clipAction（gltf.animations[0]）；
walk=mixer.clipAction（gltf.animations[1]）；
攻击=mixer.clipAction（gltf.animations[2]）；
scene.add（gltf.scene）；
gltf.scene.position.y=camera.position.y-.23；
gltf.scene.position.x=camera.position.x；
gltf.scene.position.z=camera.position.z-2.2；
gltf.scene.rotation.y=camera.rotation.y-9.44；
gltf.scene.scale.set（.02、.02、.02）；
走。玩（）；
//gltf.animations；//数组
//gltf.scene；//3.scene
//gltf.scenes；//数组
//gltf.cameras；//数组
//gltf.asset；//对象
},
//加载正在进行时调用
函数（xhr）{
log（（xhr.loaded/xhr.total*100）+'%loaded'）；
},
//加载有错误时调用
函数（错误）{
log（'发生错误'，错误）；
}
);
var-Xl=0；
函数init（）{
摄像头=新的三个透视摄像头（90，窗口内宽/窗口内高，0.01,10）；
摄像机位置z=2；
摄像机.position.y=.02；
摄像机.position.x+=-.03；
摄像机。比例。z=10；
场景=新的三个。场景（）；
var light1=新的三个环境灯（0xCCCC，15200020002000）；
场景。添加（light1）；
//几何体=新的三个盒子几何体（0.2,0.2,0.2）；
//材质=新的三个。MeshNormalMaterial（）；
//网格=新的三个网格（几何体、材质）；
//场景。添加（网格）；
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
//renderer.setClearColor（0xFFFFFF）；
document.body.appendChild（renderer.doElement）；
const controls=新的轨道控件（摄影机、渲染器.doElement）
controls.enableDamping=true
控制。阻尼系数=0.25
controls.enableZoom=false
Xl++；
如果（Xl>50）{
//没什么
}
}
函数animate（）{
var delta=clock.getDelta（）；
如果（混合器）混合器更新（增量+.001）；
plAr.position.z--；
//delta-.01=慢的两倍，+01=快的两倍
控制台日志（“poop”）；
渲染器。渲染（场景、摄影机）；
请求动画帧（动画）；
}

我知道用
let
声明变量在js中有效，但在react中似乎有所不同。
如果我能得到任何帮助，我将不胜感激！！：）提前谢谢
 任何事情hlps~：）@Mugen87你可能知道答案吗我仍然有麻烦。不管怎样，我在另一个帖子里找到了答案。