移動對象 Three.js

Question

onKeyboard: (event) => {
        let vars = Scene.vars;
        var vitesse = 0.5;
        var keyCode = event.which;
        if(keyCode ==37){
            vars.lambo.position.x += vitesse;
            vars.lambo.rotation.y += vitesse;
        }else if(keyCode == 39){
            vars.lambo.position.x -= vitesse;
            vars.lambo.rotation.y -= vitesse;
        }else if(keyCode == 40){
            vars.lambo.position.z -= vitesse;
        }else if(keyCode == 38){
            vars.lambo.position.z += vitesse;
        }

    }

Scene.loadFBX("Logo_Feelity.FBX", 10, [45, 22, 0], [0, 0, 0], 0xFFFFFF, 'logo', () => {
            Scene.loadFBX("Statuette.FBX", 10, [0, 0, 0], [0, 0, 0], 0xFFD700, 'statuette', () => {
                Scene.loadFBX("Socle_Partie1.FBX", 10, [0, 0, 0], [0, 0, 0], 0x1A1A1A, 'socle1', () => {
                    Scene.loadFBX("Socle_Partie2.FBX", 10, [0, 0, 0], [0, 0, 0], 0x1A1A1A, 'socle2', () => {
                        Scene.loadFBX("Plaquette.FBX", 10, [0, 4, 45], [0, 0, 0], 0xFFFFFF, 'plaquette', () => {
                            Scene.loadText(Scene.vars.text, 10, [0, 23, 52], [0, 0, 0], 0x1A1A1A, "texte", () => {
                                Scene.loadFBX("/Lamborginhi Aventador FBX/Lamborghini_Aventador.FBX", 10, [0, 0, 0], [0, 0, 0], 0xFFD700, 'voiture', () => {

                                    let vars = Scene.vars;

                                    let lambo = new THREE.Group();

                                    lambo.add(vars.voiture);
                                    lambo.position.set(0,0,200);
                                    lambo.scale.set(0.01,0.01,0.01);
                                    vars.scene.add(lambo);
                                    console.log(vars.scene.add(lambo))

                                    let gold = new THREE.Group();
                                    gold.add(vars.socle1);
                                    gold.add(vars.socle2);
                                    gold.add(vars.statuette);
                                    gold.add(vars.logo);
                                    gold.add(vars.texte);
                                    gold.add(vars.plaquette);

                                    let logo2 = vars.logo.clone();
                                    logo2.rotation.z = Math.PI;
                                    logo2.position.x = -45;
                                    vars.logo2 = logo2;
                                    gold.add(logo2);
                                    gold.position.z = -50;
                                    gold.position.y = 10;
                                    vars.scene.add(gold);
                                    vars.goldGroup = gold;

                                    let silver = gold.clone();
                                    silver.position.set(-200, 10, 0);
                                    silver.rotation.y = Math.PI / 4;
                                    silver.children[2].traverse(node => {
                                        if (node.isMesh) {
                                            node.material = new THREE.MeshStandardMaterial({
                                                color: new THREE.Color(0xC0C0C0),
                                                metalness: .6,
                                                roughness: .3
                                            })
                                        }
                                    });
                                    vars.scene.add(silver);
                                    vars.silverGroup = silver;

                                    let bronze = gold.clone();
                                    bronze.position.set(200, 10, 0);
                                    bronze.rotation.y = -Math.PI / 4;
                                    bronze.children[2].traverse(node => {
                                        if (node.isMesh) {
                                            node.material = new THREE.MeshStandardMaterial({
                                                color: new THREE.Color(0xCD7F32),
                                                metalness: .6,
                                                roughness: .3
                                            })
                                        }
                                    });
                                    vars.scene.add(bronze);
                                    vars.bronzeGroup = bronze;

                                    let elem = document.querySelector('#loading');
                                    elem.parentNode.removeChild(elem);
                                });
                            });
                        });
                    });
                });
            });
        });

        // ajout des controles
        vars.controls = new OrbitControls(vars.camera, vars.renderer.domElement);
        vars.controls.minDistance = 300;
        vars.controls.maxDistance = 600;
        vars.controls.minPolarAngle = Math.PI / 4;
        vars.controls.maxPolarAngle = Math.PI / 2;
        vars.controls.minAzimuthAngle = - Math.PI / 4;
        vars.controls.maxAzimuthAngle = Math.PI / 4;
        vars.controls.target.set(0, 100, 0);
        vars.controls.update();

        window.addEventListener('keydown', Scene.onKeyboard, false);
        window.addEventListener('resize', Scene.onWindowResize, false);
        window.addEventListener('mousemove', Scene.onMouseMove, false);

        vars.stats = new Stats();
        vars.container.appendChild(vars.stats.dom);

        Scene.animate();
    }

大家好，我正在用three.js 為類制作一個項目。 我想移動我添加到場景中的名為“lambo”的對象。 但是使用我的功能“onKeyboard，只有場景的相機移動，我希望對象“lambo”移動。我有一個錯誤：“無法讀取未定義的屬性'位置'”對於“vars.lambo”。 position.x += vitesse”和其他位置。

想知道怎么解決，謝謝。

Answer 1

您的代碼中似乎缺少以下行：

vars.lambo = lambo;

添加此行應確保vars.lambo不再是undefined ，因此對其position屬性的訪問有效。

Answer 2

您無權訪問事件處理函數上的vars 。

你可以從場景中獲取變量

let vars = Scene.vars;

或者您可以將vars設置為全局變量