Как реализовать отслеживание положения курсора для модели Three.JS?

Question

Ляля

анимация , javascript , three.js , 3d

Как реализовать отслеживание положения курсора для модели Three.JS?

Как настроить модель Three.JS, чтобы она следила за курсором и перемещалась только объектив, а не вся камера? Пример, который я использовал, к сожалению, не подходит для моей камеры. Буду рад любым подсказкам и помощи!

13 сентября 2023 г. 8:57

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для отслеживания положения курсора в Three.JS вы можете использовать события мыши и обновлять позицию камеры в соответствии с новыми координатами курсора. 

Вот пример кода, который отслеживает положение курсора и обновляет позицию камеры:

```javascript
// Получаем контейнер, в котором будет отображаться сцена
var container = document.getElementById('container');

// Создаем сцену
var scene = new THREE.Scene();

// Создаем камеру
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Создаем рендерер
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

// Обновляем позицию камеры при движении курсора
container.addEventListener('mousemove', function(event) {
  // Получаем нормализованные координаты курсора в диапазоне [-1, 1]
  var mouseX = (event.clientX / window.innerWidth) * 2 - 1;
  var mouseY = -(event.clientY / window.innerHeight) * 2 + 1;

  // Обновляем позицию камеры в соответствии с новыми координатами курсора
  camera.position.x = mouseX;
  camera.position.y = mouseY;
});

// Создаем объекты для отображения в сцене
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Основной цикл анимации
function animate() {
  requestAnimationFrame(animate);

  // Вращаем куб
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // Обновляем рендерер
  renderer.render(scene, camera);
}
animate();
```

В этом примере мы добавляем слушатель события `mousemove` к контейнеру, который обновляет позицию камеры в соответствии с координатами курсора. Затем мы обновляем рендерер в цикле анимации с помощью функции `requestAnimationFrame()`.

Answer 2

Посмотрите мануал