How to update z value when scrolled on three.js render? - javascript

I am trying to add scroll event listener to my three.js project.
I tried this code but it doesn't work and I don't know why.
window.addEventListener("scroll", function(e) {
console.log("scrolled")
// code to increment object.position.z
}, true);
I tried OrbitControls.js and TrackballControls.js, but it zooms. I don't want the zoom feature.
Any ideas?

The scroll event will only fire if you do actual scrolling by having more content than can fit on the screen. If you have the canvas at 100% width and height the wheel won't send any scroll events. Try the wheel event instead.
window.addEventListener("wheel", function(e) {
console.log("scrolled")
// code to increment object.position.z
}, true);

What if you add your event on your canvas instead of the window element? If you can provide some code that would help also!

Related

How to disable page pinch-to-zoom trackpad gesture or Ctrl + wheel over an element?

Look at the example here - https://openseadragon.github.io/examples/tilesource-dzi/
When you ctrl + scroll on the zoomable image. Image zoom works but the page do not scale. Outside of the image, the entire page zooms.
I am trying to achieve the same functionality on my Next.js page, tried adding preventDefault on the wheel event but it does not work.
How to achieve the desired behavior?
I found this snippet for vanila js project:
const image = document.getElementById("your-image-element");
image.addEventListener("wheel", function(event) {
event.preventDefault();
let zoom = 1;
if (event.deltaY < 0) {
zoom += 0.1;
} else {
zoom -= 0.1;
}
image.style.transform = `scale(${zoom})`;
});
You can use CSS to change the transform property of the image to achieve the zoom effect. You can also use the preventDefault() method to prevent the default behavior of the mouse wheel event, which is to scroll the page. To only zoom the image and not the whole page, you need to update the CSS transform property of the image element only.
On edge, it worked by preventing the gesture event - https://developer.mozilla.org/en-US/docs/Web/API/Element/gesturestart_event
On further investigation, I found that using onWheel on JSX element produces React's synthetic event. Instead when I use object ref and add wheel event like ref.current.addEventListener('wheel', (e)=>{e.preventDefault(); e.stopPropagation()}, it worked.

jQuery: How to trigger windows resize event when scrollbar appears

When vertical scrollbar appears on the page, windows resize event need to be triggered. Is there any way to capture scrollbar appearance event using javascript?
I'm having problem with the width of the page as it makes div to jump to next line when the vertical scrollbar appears. It seems to work fine when I resize page, so I want to trigger resize event manually when vertical scrollbar appears.
You could use setInterval to monitor for the scrollbar. If the document width exceeds the window width, you can trigger the window.resize event manually.
function checkForScrollbar() {
if ($(window).width() < $(document).width()) {
$(window).trigger('resize');
}
}
$(document).ready(function() {
setInterval(function() { checkForScrollbar(); }, 500);
$(window).on('resize', function() {
//Resize triggered.
//Do Your Stuff
});
});
See this JS Fiddle: http://jsfiddle.net/USvsW/9/
OrganicPanda has posted a clever solution without the need for a timer. Basically he places an iFrame with 100% somewhere and listens to 'resize' events on it:
Detect when window vertical scrollbar appears
u can use this:this will through alert on resize
$(window).on('load resize', function(){
var w1 = $(window).width();
alert(w1);
})

Make div height the distance of swipe down

I'm trying to gradually show a div as the swipe down event happens on the body.
I'm currently using the jQuery version of hammer.js to listen for the swipe down, but how do I get the distance of the swipe and change the height of the div as the swipe is happening to that value?
It is not much, but here is what I have so far:
var distance;
$('body').on('swipedown', function(){
// set distance to swipe distance
$('header, #header, [role="banner"]').css('height', distance);
});
But, won't the above only set the distance at the end of the swipe down? How can I set the distance while the swipe down is happening?
I would greatly appreciate any and all help!
By hammer.js swipedown event triggered, your function will get a gesture object in the event object.
you can get that like this
Hammer(document.body).on('swipedown', function(e){
gesture = e.gesture
// gesture.distance or gesture.deltaY is swipe distance
// and you can console.log(gesture) to find more!
});

Prevent Circle from Flickering in KineticJS

When a user places his mouse cursor over/near the outline of the Polygon, an anchor should appear and follow the position of the mouse, but snapping to the outline of the Polygon.
Problem: The anchor seems to flicker when the mousemove handler function updates the position of this anchor. What's causing the flickering and the slow update? The KineticJS example here appears to update pretty quickly.
Also, the anchor is not snapping to the outline/stroke of the Polygon. How can this effect be achieved?
JSfiddle
Your mousemove function is moving the anchor. Once the anchor is moved your mouse is no longer over the polyHitArea so your mouseleave event is firing and hiding the anchor.
Edit
The best way that I can think of off hand to prevent this from happening is to place the setVisible(false) code into a setTimeout call -- and have a mouseenter event on the mouseoverAnchor call clearTimeout.
var polyHitArea._timeout = 0;
polyHitArea.on('mouseover', function(e) {
clearTiemout(polyHitArea._timeout);
mouseoverAnchor.setVisible(true);
stage.draw();
});
polyHitArea.on('mouseleave', function(e) {
clearTimeout(polyHitArea._timeout);
polyHitArea._timeout = setTimeout(function(){
mouseoverAnchor.setVisible(false);
}, 25); // 25 ms enough time?
stage.draw();
});
mouseoverAnchor.on('mouseenter', function(e) {
clearTimeout(polyHitArea._timeout);
});

Getting wrong screen height when trigger orientationchange event

I wrote the code below to check my mobile screen height when I rotate it to Portrait or Landscape.
window.addEventListener("orientationchange", function(event) {
rotateScreen();
}, false);
function rotateScreen() {
alert(window.orientation)
alert($(window).height())
}
When I rotate it to Portrait, I get 0, 294. When I rotate it to Landscape, I get 90, 419. The figure is reversed, I have tried to wrap it in $(document).ready() but it does not work.
$(document).ready(function(){
alert($(window).height())
})
It looks like that when I rotate the mobile to Portrait, I get the height of Landscape, and when I rotate the mobile to Landscape, I get the height of Portrait. Can someone suggest how to fix it?
Thanks
The resize event gets triggered after the orientationchange event. However resize can also get triggered by other things such as showing the virtual keyboard.
So to get round this we can listen first for an orientationchange, once that occurs we can then add a resize listener. Once the orientationchange has completed it will fire our resize event. Once completed we then remove the resize listener to prevent it being fired in error
$(window).on('orientationchange', function() {
var orientationChange = function(evt) {
rotateScreen();
$(window).off('resize', orientationChange);
}
$(window).on('resize', orientationChange);
});
This effectively creates a kind of pseudo post:orientationChange event. (I would probably avoid using timeouts if you can)
Adding setTimeout could solve the problem, please try the code below:
function rotateScreen() {
window.setTimeout(function() {
alert(window.orientation)
alert($(window).height())
}, 500);
}

Categories

Resources