Управление WASD в моем три района JS не работает должным образом, делая сбой на экране при перемещении Foward ⇐ Javascript

[Anonymous]

Я работаю в React, с разделом в Three.js, где вы можете двигаться вперед с Wasd, а не стрелкой, потому что стрелки влияют на свиток, чтобы повернуть камеру, вы должны перетаскивать мышь, я попытался добавить код, удалив его для части WESD, но тот же сбой повторяется. У вас есть идея, почему? < /P>
import React, { useEffect, useRef, useState } from "react";
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { Water } from "three/examples/jsm/objects/Water.js";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

export default function ExhibitionSection() {
const mount = useRef(null);
const [showUI, setShowUI] = useState(true); // overlay flag

useEffect(() => {
/* ---------- renderer / scene / camera ---------- */
const { innerWidth: W, innerHeight: H } = window;
const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x8a5000, 0.0005); // lighter fog

const cam = new THREE.PerspectiveCamera(75, W / H, 0.1, 1e6);
cam.position.set(0, 400, 400); // eye-level = 400, looking straight

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(W, H);
renderer.outputEncoding = THREE.sRGBEncoding;
mount.current.appendChild(renderer.domElement);

/* ---------- orbit controls ---------- */
const controls = new OrbitControls(cam, renderer.domElement);
controls.enableZoom = false;
controls.enablePan = false;
controls.dampingFactor = 0.05;
controls.enableDamping = true;
controls.target.set(0, 400, 0); // same Y as camera → level view
controls.update();
renderer.domElement.addEventListener("wheel", e => e.preventDefault(), { passive:false });

/* ---------- skybox ---------- */
scene.background = new THREE.CubeTextureLoader().load([
"/images/yellowcloud_ft.jpg","/images/yellowcloud_bk.jpg",
"/images/yellowcloud_up.jpg","/images/yellowcloud_dn.jpg",
"/images/yellowcloud_rt.jpg","/images/yellowcloud_lf.jpg",
]);

/* ---------- water ---------- */
const water = new Water(
new THREE.PlaneGeometry(50000, 50000),
{
textureWidth:512, textureHeight:1024,
waterNormals: new THREE.TextureLoader().load("/images/waterNormals.jpg", t=>{
t.wrapS = t.wrapT = THREE.RepeatWrapping;
}),
sunDirection:new THREE.Vector3(), sunColor:0xffffff,
waterColor:0x001e0f, distortionScale:3.7, fog:true,
}
);
water.rotation.x = -Math.PI/2;
water.rotation.z = -Math.PI/2;
scene.add(water);

/* ---------- model ---------- */
new GLTFLoader().setPath("/models/")
.load("photography-museum.glb", gltf=>{
const m = gltf.scene;
m.scale.set(10,10,10);
m.position.set(0,-200,0);
scene.add(m);
});

/* ---------- lights ---------- */
scene.add(new THREE.AmbientLight(0x8a5000,2.5));
const dir = new THREE.DirectionalLight(0x8a5000,1);
dir.position.set(1300,1000,1000);
scene.add(dir);

/* ---------- keyboard / physics ---------- */
const keys = {};
let vy = 0; // vertical velocity
const GRAVITY = 2000; // world-units / s²
const WALK = 350; // walk speed
const EYE_Y = 400; // ground level (eye height)

window.addEventListener("keydown", e => { keys[e.code] = true; });
window.addEventListener("keyup", e => { keys[e.code] = false; });

// jump
window.addEventListener("keydown", e => {
if (e.code === "Space") {
e.preventDefault();
if (Math.abs(cam.position.y - EYE_Y) < 1) vy = 700; // only if on ground
}
});

/* ---------- main loop ---------- */
const clock = new THREE.Clock();
(function animate() {
requestAnimationFrame(animate);
const dt = clock.getDelta();

/* WASD movement */
const dir = new THREE.Vector3(
(keys.KeyD ? 1 : 0) - (keys.KeyA ? 1 : 0), // x
0,
(keys.KeyS ? 1 : 0) - (keys.KeyW ? 1 : 0) // z
);
if (dir.lengthSq() > 0) {
dir.normalize()
.applyQuaternion(cam.quaternion) // local → world
.setY(0) // stay horizontal
.normalize();

const speed = (keys.ShiftLeft || keys.ShiftRight) ? WALK * 2 : WALK;
cam.position.addScaledVector(dir, speed * dt);
}

/* jump / gravity */
vy -= GRAVITY * dt;
cam.position.y += vy * dt;
if (cam.position.y < EYE_Y) { cam.position.y = EYE_Y; vy = 0; }

/* keep the look-at target at eye level */
controls.target.y = cam.position.y;

controls.update();
water.material.uniforms.time.value += dt;
renderer.render(scene, cam);
})();

/* ---------- resize ---------- */
function onResize(){
cam.aspect = window.innerWidth/window.innerHeight;
cam.updateProjectionMatrix();
renderer.setSize(window.innerWidth,window.innerHeight);
}
window.addEventListener("resize", onResize);

return ()=> {
window.removeEventListener("resize", onResize);
controls.dispose(); renderer.dispose();
mount.current.removeChild(renderer.domElement);
};
}, []);

return (

{showUI && (


Explore LA DISCONNECT 1.0


Click + drag to look around.

Move with W A S D, hold Shift to run,
press Space to jump.

{
setShowUI(false);
// ensure canvas gets keyboard focus after overlay closes
setTimeout(()=> mount.current?.focus(), 50);
}}
className="border border-white px-6 py-3 uppercase text-sm hover:bg-white hover:text-black transition"
>
Visit the exhibition


)}

);
}


Подробнее здесь: https://stackoverflow.com/questions/796 ... creen-glit