0

I've had trouble finding a solution for this in Aframe because I guess it’s an odd use case. I'm wanting to make an embedded Aframe scene as the background of a webpage and have the camera animate along a path as a user scrolls down the page.

I've created a scene, animated the camera movement using the alongpath component and have fixed it as the background of a webpage, but I cannot figure out what I need to do to pair scroll position to the camera path. I'm attaching a video of the scene I currently have with the animation path.

I did manage to connect in to the camera controls from some JS on a demo page here. https://robbiegreen.com/hq/ I honestly have no idea how I pulled that off. It’s only controlling the Z position though. Sorry in advance for the bloat, I’m testing part of it on Elementor + WP install that I need to clean up, but I’m building scenes and such locally. Here is a glitch of what I have:

https://glitch.com/edit/#!/aframe-alongpath-scroll

This is a good example at what I would love to do: https://codepen.io/motionharvest/pen/WNQYJyM <HTML>

I love stuff I’ve seen in three.js but Aframe is so much more approachable even if it’s not the exact use case. I’m in way over my head when it comes to JS or anything programming related. I feel like I’m slowly starting to grasp at a few straws though.

halfer
  • 19,824
  • 17
  • 99
  • 186
imrobbiegreen
  • 1
  • 2
  • Hey, sorry for the late notice, but I've been working on something similar, which looks what You want to do [link](https://gftruj.github.io/webzamples/PlanetVoodoo/scroll-path/). Also based on the *along-path*, but with a couple of additions. – Piotr Adam Milewski Aug 25 '21 at 20:31
  • @PiotrAdamMilewski that looks so good! Someone an aframe slack channel helped solve it for me in a similar way. This is super slick though! The trigger and rotation implementation is awesome. Is the camera just set to rotate with the path of the curve? This is where I've started to land with my original vision. It's still super early and rough but trying to get a proof of concept before I really start building it out. https://robbiegreen.com/hq – imrobbiegreen Aug 26 '21 at 21:23
  • @PiotrAdamMilewski also would this be compatible with something like Smooth Scrollbar? https://idiotwu.github.io/smooth-scrollbar/ I was trying to work it into this idea but haven't had any luck so I've just put it off. Having everything ease in and out would make it all look even more impressive. – imrobbiegreen Aug 26 '21 at 21:35
  • glad that you like it :D if `rotate` is set - the camera is looking at the next point (in the example with some interpolation, otherwise it just snaps). I think i can make it work with smooth scrollbar, though a major improvement (imo) would be mixing path types (first a line, then an arc (with look-at at the center), then another line). Also coordinating the text flow and the camera on the line. – Piotr Adam Milewski Aug 27 '21 at 10:25
  • check [this](https://gftruj.github.io/webzamples/PlanetVoodoo/scroll-path/smooth-scroll-path/) out ([source](https://github.com/gftruj/webzamples/tree/master/PlanetVoodoo/scroll-path/smooth-scroll-path)), I've added the smooth-scrollbar, used a mixed curve, and notice different camera behaviors (follow the line vs look at the model at the arc) – Piotr Adam Milewski Aug 30 '21 at 20:58

1 Answers1

0

listen to mouse move event and utilize x,y of its position. to apply previous Z, use .getAttribute().

I think this will be much easier if you learn react and react-three-fiber; that's where I decided to settle. implementing interactivity by scratch is way difficult for anyone and not to mention for beginners.

honestly, I applaud your effort. this is really difficult stuff even for veterans.

<!-- 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>
sungryeol
  • 3,677
  • 7
  • 20