Я создаю опыт использования A-Frame, который предназначен для использования на рабочем столе. Мы рассчитываем телепортировать камеру так же, как систему контрольных точек в дополнениях A-Frame, однако мы хотим телепортировать камеру в любое место, по которому пользователь щелкает по нашему полу, вместо предопределенных контрольных точек.
http://paragram.io/view/?id=testarossa
Этот опыт (в режиме «Исследование») - это именно то, что нам нужно.
Есть идеи, как мне это сделать?
У меня есть Вектор положения щелчка мыши в трехмерном пространстве:
<head>
<title>On-rails locomotion</title>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v4.1.2/dist/aframe-extras.min.js"></script>
<script src="https://unpkg.com/super-hands@2.1.0/dist/super-hands.min.js"></script>
<script src="https://unpkg.com/aframe-look-at-component@0.5.1/dist/aframe-look-at-component.min.js"></script>
<script>
AFRAME.registerComponent('mouse-to-world', {
init: function () {
document.addEventListener('click', (e) => {
let mouse = new THREE.Vector2()
let camera = AFRAME.scenes[0].camera
let rect = document.querySelector('body').getBoundingClientRect()
mouse.x = ( (e.clientX - rect.left) / rect.width ) * 2 - 1
mouse.y = - ( (e.clientY - rect.top) / rect.height ) * 2 + 1
let vector = new THREE.Vector3( mouse.x, mouse.y, -1 ).unproject( camera )
console.log(vector)
})
}
});
</script>
</head>
Большое спасибо