added showcase, credits, and fixed hover bug

This commit is contained in:
2024-06-20 17:51:58 +01:00
parent 8b16166e6c
commit 67bf94c851
21 changed files with 555 additions and 127 deletions

View File

@@ -13,6 +13,7 @@ class PickHelper {
this.pickedObject = null;
this.lastObjectPicked = null;
this.sameObjectPicked = false;
this.initalPick = false;
}
pick(normalizedPosition, scene, camera, time) {
@@ -137,10 +138,14 @@ const object_list = []
const object_count = 20;
const fontLoader = new FontLoader();
let group = new THREE.Group();
let pastArticle;
function init() {
// Set to a value outside the screen range
pickPosition.x = -100000;
pickPosition.y = -100000;
// Texture Loader
const loader = new THREE.TextureLoader();
texture = loader.load('/images/website/checker.png');
@@ -308,7 +313,8 @@ window.addEventListener('resize', () => {
const pickedArticle = object_list.find(article => article.mesh === pickHelper.pickedObject);
if (pickedArticle) {
document.body.style.cursor = 'pointer';
if (!isHovering)
if (pickedArticle.name != pastArticle)
console.log('updated!')
UpdateText(pickedArticle.name);
}else{
document.body.style.cursor = 'default';
@@ -319,7 +325,7 @@ window.addEventListener('resize', () => {
function UpdateText(text) {
MeasureText(text);
isHovering = true
pastArticle = text
}
function ClearTextGeoList() {
@@ -427,35 +433,5 @@ function createTextGeometry(text, size) {
window.addEventListener('mouseleave', clearPickPosition);
window.addEventListener('click', objectClicked)
// Add touch event listeners
window.addEventListener('touchstart', onTouchStart, {passive: false});
window.addEventListener('touchmove', onTouchMove, {passive: false});
window.addEventListener('touchend', onTouchEnd, {passive: false});
window.addEventListener('touchcancel', clearPickPosition);
let touchStartTime;
const touchHoldDuration = 500; // Duration in milliseconds to distinguish between tap and hold
function onTouchStart(event) {
touchStartTime = Date.now();
setPickPosition(event.touches[0]);
}
function onTouchMove(event) {
setPickPosition(event.touches[0]);
}
function onTouchEnd(event) {
const touchDuration = Date.now() - touchStartTime;
clearPickPosition();
if (touchDuration < touchHoldDuration) {
// It's a tap
objectClicked(event);
} else {
// It's a hold
// Do nothing extra, as hover effect should already be handled by setPickPosition
}
}
// Initialize the application
init();