Конечно! Я обновил сцену Three.js, убрав вращение куба и добавив управление камерой с помощью WASD-клавиш и мыши, а также реализовал Pointer Lock API для более иммерсивного опыта. Вот обновленный код:
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(400, 400);
document.getElementById('three-container').appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshPhongMaterial({color: 0x0000ff});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 0, 10);
scene.add(light);
camera.position.z = 5;
const controls = new THREE.PointerLockControls(camera, renderer.domElement);
let moveForward = false;
let moveBackward = false;
let moveLeft = false;
let moveRight = false;
const onKeyDown = function(event) {
switch (event.code) {
case 'KeyW': moveForward = true; break;
case 'KeyA': moveLeft = true; break;
case 'KeyS': moveBackward = true; break;
case 'KeyD': moveRight = true; break;
}
};
const onKeyUp = function(event) {
switch (event.code) {
case 'KeyW': moveForward = false; break;
case 'KeyA': moveLeft = false; break;
case 'KeyS': moveBackward = false; break;
case 'KeyD': moveRight = false; break;
}
};
document.addEventListener('keydown', onKeyDown);
document.addEventListener('keyup', onKeyUp);
renderer.domElement.addEventListener('click', function() {
controls.lock();
});
controls.addEventListener('lock', function() {
instructions.style.display = 'none';
});
controls.addEventListener('unlock', function() {
instructions.style.display = 'block';
});
const velocity = new THREE.Vector3();
const direction = new THREE.Vector3();
function animate() {
requestAnimationFrame(animate);
if (controls.isLocked === true) {
const delta = 0.1;
velocity.x -= velocity.x * 10.0 * delta;
velocity.z -= velocity.z * 10.0 * delta;
direction.z = Number(moveForward) - Number(moveBackward);
direction.x = Number(moveRight) - Number(moveLeft);
direction.normalize();
if (moveForward || moveBackward) velocity.z -= direction.z * 400.0 * delta;
if (moveLeft || moveRight) velocity.x -= direction.x * 400.0 * delta;
controls.moveRight(-velocity.x * delta);
controls.moveForward(-velocity.z * delta);
}
renderer.render(scene, camera);
}
animate();
Этот код создает сцену с синим кубом и добавляет следующие функции:
1. WASD-управление для перемещения камеры.
2. Управление мышью для осмотра вокруг.
3. Использование Pointer Lock API для захвата курсора мыши.
Чтобы начать управление, нужно кликнуть по сцене. Для выхода из режима управления нажмите Esc.
Вы можете увидеть результат выполнения этого кода в правой панели. Наслаждайтесь обновленной интерактивной 3D-сценой!