Adjust Camera Position in A-Frame Scene Based on Scrolling Movement

Question

Adjust Camera Position in A-Frame Scene Based on Scrolling Movement

I've been struggling to find a solution for this particular scenario in Aframe. I want to create an embedded Aframe scene as the background of a webpage and have the camera move along a path as the user scrolls down the page.

I've set up a scene, animated the camera movement using the alongpath component, and fixed it as the webpage's background. However, I can't figure out how to link the scroll position to the camera path. I've included a video showcasing the current scene with the animation path.

On a demo page here, I somehow managed to connect to the camera controls through JS, but it only affects the Z position. Please excuse the bloat on that page as I'm testing some elements on Elementor + WP install that need cleaning up. I'm currently building scenes locally. You can view a glitch of what I have here.

This example here illustrates exactly what I'd like to achieve: <HTML>

I'm fascinated by the work done in three.js, but Aframe seems more accessible despite not being the exact use case. I admittedly struggle with JavaScript and programming in general, but I feel like I'm slowly starting to piece things together.

javascript three.js aframe webvr

Answer 1

Answer №1

Utilize the x and y position of the mouse move event to apply the previous Z using .getAttribute().

If you want an easier way, consider learning react and react-three-fiber; that's where I found my solution. Starting from scratch with interactivity can be challenging, especially for beginners.

I must commend your efforts. Even seasoned professionals find this a challenging task.

<!-- Script Used For Moving Camera On Scroll -->

<script>

var el = document.querySelector('#cameraRig');

function moveCamera() {
  const t = document.body.getBoundingClientRect().top;
  cameraRig.setAttribute('position', { x: 0, y: 1.5, z: t * -0.02});
}

const pointer = new THREE.Vector2();
function onPointerMove(ev) {
        pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
                pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
        const prevPos = cameraRig.getAttribute('position');
        cameraRig.setAttribute('position', /* ...do something with x, y */);
}

document.body.onscroll = moveCamera;
document.addEventListener('mousemove', onPointerMove);
moveCamera();

</script>

Answer 2

Utilize the x and y position of the mouse move event to apply the previous Z using .getAttribute().

If you want an easier way, consider learning react and react-three-fiber; that's where I found my solution. Starting from scratch with interactivity can be challenging, especially for beginners.

I must commend your efforts. Even seasoned professionals find this a challenging task.

<!-- Script Used For Moving Camera On Scroll -->

<script>

var el = document.querySelector('#cameraRig');

function moveCamera() {
  const t = document.body.getBoundingClientRect().top;
  cameraRig.setAttribute('position', { x: 0, y: 1.5, z: t * -0.02});
}

const pointer = new THREE.Vector2();
function onPointerMove(ev) {
        pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
                pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
        const prevPos = cameraRig.getAttribute('position');
        cameraRig.setAttribute('position', /* ...do something with x, y */);
}

document.body.onscroll = moveCamera;
document.addEventListener('mousemove', onPointerMove);
moveCamera();

</script>

Adjust Camera Position in A-Frame Scene Based on Scrolling Movement

Answer №1

Similar questions

Applying CSS rules from an array to elements by looping through

Combine the jQuery selectors :has() and :contains() for effective element targeting!

Having issues with the functionality of Bootstrap 4 popover?

Angular page not reflecting show/hide changes from checkbox

Combining Rxjs map and filter to extract countries and their corresponding states from a JSON dataset

I have encountered a node.js error related to the 'Require Stack'

Activating Button within Featherlight Modal

Retrieving the input value from embedded cells in a specific row of a table

I am new to javascript and jquery. I have encountered numerous cases involving audio players

AngularJS: Share event from the parent component exclusively with its child components

Steps to add text to a bar chart in morris.js

Which characters are permissible for the id attribute to prevent the jQuery selector from throwing an exception?

I require assistance in understanding how to successfully implement ParseINT with (row.find)

"Learn the steps to seamlessly add text at the current cursor position with the angular-editor tool

Transferring HTML information to Flask

What is the best way to switch the site header in JavaScript or jQuery?

What is the best way to hide the background of an extension's HTML?

Sorting JSON data using JQuery Ajax

What steps can I take to avoid keypress events causing issues with the browser's input functionality?

Spontaneous Link with JQuery and Colorbox