Przesuwna mozaika z 3D szklanych płytek z Three.js
Potrzebujemy strony internetowej z wieloma interaktywnymi "szklanymi płytkami" zbudowanymi za pomocą Three.js. Każda płytka powinna mieć klikalny link do innej strony oraz możliwość dostosowania koloru tła i tekstu. Cała strona powinna wyglądać jak mozaika tych szklanych płytek, z których każda jest interaktywna i zawiera tekst wewnątrz. (Przykłady ogólnego projektu strony są dostępne na dołączonych obrazkach)
PROJEKT PŁYTKI:
- Każda płytka powinna wyglądać jak jedna widoczna strona przezroczystego 3D szklanego sześcianu, inspirowana tym przykładem: https://codesandbox.io/p/devbox/meshtransmissionmaterial-forked-tcy35y
- Płytka nie jest pełnym sześcianem — to tylko płaska powierzchnia z realistycznymi efektami szkła, takimi jak delikatne bujanie, subtelne zniekształcenia i załamanie światła.
- Nie ma podstawy ani spodu; to są płytki, a nie galaretowate sześciany.
INTERAKTYWNOŚĆ:
- Każda płytka jest klikalna i prowadzi do dostosowywalnego URL.
- Tekst jest wyświetlany wewnątrz płytki, jest wyraźny i łatwy do odczytania na tle efektu szkła. Powinno być możliwe dostosowanie czcionki.
- Treść tekstu powinna być konfigurowalna dla każdej płytki.
DOSTOSOWANIA:
- Kolor tła lub odcień dla każdej płytki można ustawić indywidualnie.
- Wszystkie płytki mają ten sam rozmiar i są ułożone w pionową, przewijalną mozaikę.
- Płytki mają minimalne odstępy
WYDOLNOŚĆ:
- Animacje bujania i zniekształceń powinny być płynne, subtelne i nie rozpraszające.
- Układ i płytki powinny dobrze działać na ekranach mobilnych i desktopowych.
CZEGO OCZEKUJEMY:
Komponent React + Three.js z możliwością dostosowania (<GlassTile />) oraz działającą stronę wyświetlającą przewijalną mozaikę płytek.
PROSZĘ WPISAĆ "3D MASTER" W OFERCIE, JEŚLI JESTEŚ PRAWdziwą osobą
Potrzebujemy strony internetowej z wieloma interaktywnymi "szklanymi płytkami" zbudowanymi za pomocą Three.js. Każda płytka powinna mieć klikalny link do innej strony oraz możliwość dostosowania koloru tła i tekstu. Cała strona powinna wyglądać jak mozaika tych szklanych płytek, z których każda jest interaktywna i zawiera tekst wewnątrz. (Przykłady ogólnego projektu strony są dostępne na dołączonych obrazach)
PROJEKT PŁYTKI:
- Każda płytka powinna wyglądać jak jedna widoczna strona przezroczystego 3D szklanego sześcianu, inspirowana tym przykładem: https://codesandbox.io/p/devbox/meshtransmissionmaterial-forked-tcy35y
- Płytka nie jest pełnym sześcianem — to tylko płaska powierzchnia z realistycznymi efektami szkła, takimi jak delikatne bujanie, subtelne zniekształcenia i załamanie światła.
- Nie powinno być podstawy ani dna; to są płytki, a nie galaretowate sześciany.
INTERAKTYWNOŚĆ I DOSTOSOWANIE:
- Każda płytka jest klikalna i prowadzi do dostosowywalnego URL.
- Tekst jest wyświetlany wewnątrz płytki, wyraźnie widoczny i czytelny na tle efektu szkła. Powinniśmy mieć możliwość dostosowania czcionki.
- Treść tekstu powinna być konfigurowalna dla każdej płytki.
- Powinniśmy móc umieścić obraz wewnątrz płytki, który również będzie widoczny pod efektem szkła.
- Kolor tła lub odcień dla każdej płytki można ustawić indywidualnie.
- Wszystkie płytki mają ten sam rozmiar i są ułożone w pionową, przewijalną mozaikę.
- Płytki mają minimalne odstępy
WYDOLNOŚĆ:
- Animacje bujania i zniekształceń powinny być płynne, subtelne i nie rozpraszające.
- Układ i płytki powinny dobrze działać na ekranach mobilnych i desktopowych.
OCZEKIWANIA:
Komponent React + Three.js, który jest konfigurowalny (<GlassTile />) oraz działająca strona internetowa wyświetlająca przewijalną mozaikę płytek.
PROSZĘ WPISAĆ "3D MASTER" W OFERCIE, JEŚLI JESTEŚ PRAWDZIWĄ OSOBĄ
We need a web page featuring multiple interactive "glass tiles" built with Three.js. Each tile should have a clickable link to a different page and customizable background color and text. The overall page should look like a mosaic of these glass tiles, each tile interactive with text inside. (Examples of the overall page design are provided in the attached images)
TILE DESIGN:
- Each tile should look like one visible side of a translucent 3D glass cube, inspired by this example: https://codesandbox.io/p/devbox/meshtransmissionmaterial-forked-tcy35y
- The tile is not a full cube — just a flat face that has realistic glass effects such as gentle wobble, subtle distortion, and light refraction.
- There should be no base or bottom; these are tiles, not jelly cubes.
INTERACTIVITY & CUSTOMIZATION:
- Each tile is clickable and links to a customizable URL.
- Text is displayed inside the tile, clearly visible and easy to read against the glass effect. We should be able to customize font as well.
- The text content should be customizable per tile.
- We should be able to place an image inside the tile, and it should also appear under the glass effect.
- Background color or tint for each tile can be set individually.
- All tiles are the same in size and arranged in a vertical scrollable mosaic layout.
- Tiles have minimal spacing
PERFORMANCE:
- Wobble and distortion animations should be smooth, subtle, and not distracting.
- The layout and tiles should work well on mobile and desktop screen sizes.
WHAT WE EXPECT:
A customizable React + Three.js component (<GlassTile />) and a working web page displaying the scrollable mosaic of tiles.
PLEASE WRITE 3D MASTER IN YOUR PROPOSAL IF YOU ARE A REAL PERSON
Potrzebujemy strony internetowej z wieloma interaktywnymi "szklanymi płytkami" zbudowanymi za pomocą Three.js. Każda płytka powinna mieć klikalny link do innej strony oraz możliwość dostosowania koloru tła i tekstu. Cała strona powinna wyglądać jak mozaika tych szklanych płytek, z każdą płytką interaktywną i zawierającą tekst. (Przykłady ogólnego projektu strony są dostępne na dołączonych obrazach)
PROJEKT PŁYTKI:
- Każda płytka powinna wyglądać jak jedna widoczna strona przezroczystego 3D szklanego sześcianu, inspirowana tym przykładem: https://codesandbox.io/p/devbox/meshtransmissionmaterial-forked-tcy35y
- Płytka nie jest pełnym sześcianem — to tylko płaska powierzchnia z realistycznymi efektami szkła, takimi jak delikatne bujanie, subtelne zniekształcenia i załamanie światła.
- Nie powinno być podstawy ani dna; to są płytki, a nie galaretowate sześciany.
INTERAKTYWNOŚĆ I DOSTOSOWANIE:
- Każda płytka jest klikalna i prowadzi do dostosowywalnego URL.
- Tekst jest wyświetlany wewnątrz płytki, wyraźnie widoczny i czytelny na tle efektu szkła. Powinniśmy mieć możliwość dostosowania czcionki.
- Treść tekstu powinna być konfigurowalna dla każdej płytki.
- Powinniśmy móc umieścić obraz wewnątrz płytki, który również będzie widoczny pod efektem szkła.
- Kolor tła lub odcień dla każdej płytki można ustawić indywidualnie.
- Wszystkie płytki mają ten sam rozmiar i są ułożone w pionową, przewijalną mozaikę.
- Płytki mają minimalne odstępy
WYDOLNOŚĆ:
- Animacje bujania i zniekształceń powinny być płynne, subtelne i nie rozpraszające.
- Układ i płytki powinny dobrze działać na ekranach mobilnych i desktopowych.
OCZEKIWANIA:
Dostosowywalny komponent Three.js oraz działająca strona internetowa wyświetlająca przewijalną mozaikę płytek.
Termin: 1,5 tygodnia
PROSZĘ WPISAĆ "3D" W SWOJEJ OFERCIE, JEŚLI JESTEŚ PRAWdziwą osobą
We need a web page featuring multiple interactive "glass tiles" built with Three.js. Each tile should have a clickable link to a different page and customizable background color and text. The overall page should look like a mosaic of these glass tiles, each tile interactive with text inside. (Examples of the overall page design are provided in the attached images)
TILE DESIGN:
- Each tile should look like one visible side of a translucent 3D glass cube, inspired by this example: https://codesandbox.io/p/devbox/meshtransmissionmaterial-forked-tcy35y
- The tile is not a full cube — just a flat face that has realistic glass effects such as gentle wobble, subtle distortion, and light refraction.
- There should be no base or bottom; these are tiles, not jelly cubes.
INTERACTIVITY & CUSTOMIZATION:
- Each tile is clickable and links to a customizable URL.
- Text is displayed inside the tile, clearly visible and easy to read against the glass effect. We should be able to customize font as well.
- The text content should be customizable per tile.
- We should be able to place an image inside the tile, and it should also appear under the glass effect.
- Background color or tint for each tile can be set individually.
- All tiles are the same in size and arranged in a vertical scrollable mosaic layout.
- Tiles have minimal spacing
PERFORMANCE:
- Wobble and distortion animations should be smooth, subtle, and not distracting.
- The layout and tiles should work well on mobile and desktop screen sizes.
WHAT WE EXPECT:
A customizable Three.js component and a working web page displaying the scrollable mosaic of tiles.
Deadline: 1.5 weeks
PLEASE WRITE "3D" IN YOUR PROPOSAL IF YOU ARE A REAL PERSON
Załączniki 4
-
8 dni2380 PLN8 dni2380 PLN
Witaj Nazarze,
3D. Starannie przejrzałem Twój szczegółowy projekt interaktywnej mozaiki z trójwymiarowych szklanych płytek. To ekscytujące wyzwanie front-endowe, które łączy moje doświadczenie w React z kreatywnymi możliwościami Three.js.
Jestem pewien, że mogę dostarczyć wymaganą konfigurowalną komponentę, zapewniając, że spełni wszystkie Twoje wymagania:
Efekt szkła: użyję MeshTransmissionMaterial i niestandardowych shaderów, inspirowanych Twoim przykładem, aby stworzyć realistyczny przezroczysty efekt szkła z subtelnymi falowaniami i zniekształceniami.
Interaktywność i personalizacja: każda płytka będzie w pełni interaktywnym komponentem z klikalnym linkiem oraz łatwo konfigurowalnymi propsami dla tekstu, wewnętrznego obrazu i koloru tła.
Wydajność: animacje będą zoptymalizowane pod kątem płynnej wydajności, a cała mozaika będzie w pełni responsywna zarówno na urządzeniach mobilnych, jak i na komputerach stacjonarnych.
… Jako deweloper full-stack z silnym naciskiem na wysokiej jakości doświadczenia front-endowe, mogę zapewnić, że końcowy produkt będzie nie tylko wizualnie imponujący, ale także dobrze zorganizowany i wydajny. Moje portfolio znajdziesz tutaj: www.revazgoguadze.com.
Jestem gotów ożywić tę angażującą koncepcję 3D.
-
10 dni732 PLN
146 10 dni732 PLNWitaj Nazarze,
Przejrzałem szczegóły Twojego projektu dotyczącego interaktywnych szklanych płytek. To fascynujące zadanie, ponieważ prawdziwe wyzwanie nie polega tylko na implementacji efektu 3D, ale na sprawieniu, aby był on odczuwalny dotykowo, wydajny i naprawdę konfigurowalny.
Pracowałem już wcześniej z MeshTransmissionMaterial z Twojego przykładu w CodeSandbox. Kluczem do uzyskania tego pięknego, realistycznego wyglądu szkła jest dopracowanie jego właściwości (grubość, ior, szorstkość) oraz ustawień oświetlenia. Aby zapewnić płynne działanie, szczególnie na urządzeniach mobilnych, skupię się na utrzymaniu geometrii w prostocie i optymalizacji komponentu React, aby zapobiec niepotrzebnym ponownym renderowaniom.
Aby pokazać Ci moje podejście, mogę szybko utworzyć dla Ciebie nowy, prywatny CodeSandbox z jednym działającym komponentem. Mogę ustawić niestandardowy kolor lub tekst, który podasz. W ten sposób będziesz mógł zobaczyć jakość mojego kodu i efekt wizualny na własne oczy, bez żadnych zobowiązań z Twojej strony.
Ta metoda jest podobna do tego, jak zbudowałem interaktywny widok 3D w moim portfolio, który możesz obejrzeć na żywo tutaj:
… https://cgma-9tyz.onrender.com
(naciśnij przycisk „Enter as a guest”, aby pominąć proces rejestracji)
Daj znać, jeśli chcesz, żebym przygotował dla Ciebie ten CodeSandbox.
Pozdrawiam serdecznie,
Semetei
-
1 dzień732 PLN
2656 40 0 1 dzień732 PLNWitam. Zrobię. Pisz, będę chętnie współpracować
Witam. Zrobię. Pisz, będę chętnie współpracować
-
1 dzień1098 PLN
86 1 dzień1098 PLNWitam!
Jestem front-end developerem skupiającym się na React i Three.js, i w pełni zrozumiałem Twoje zadanie.
Już pracowałem z MeshTransmissionMaterial, efektami szkła, i wiem, jak zaimplementować takie płytki z płynną animacją, realistycznymi załamaniami i miękkimi zniekształceniami. Twój przykład na CodeSandbox jest mi znany, i mogę odtworzyć ten sam styl, dostosowując go do Twoich potrzeb:
🔹 Klikalne płytki z linkami
🔹 Konfigurowalne tło, tekst i czcionka
🔹 Możliwość wstawienia obrazu wewnątrz
🔹 Responsywny design i mozaika z płynnym przewijaniem
… 🔹 Optymalizacja dla urządzeń mobilnych i desktopów
🔹 Komponent wielokrotnego użytku z propsami do konfiguracji
Dodatkowo zapewnię:
✔️ Wydajny i czysty kod
✔️ Płynne animacje bez przeciążenia
✔️ Wsparcie i pomoc przy publikacji
Mogę już w ciągu pierwszych 2–3 dni pokazać prototyp.
Jestem gotowa zacząć od razu i omówić szczegóły.
Dziękuję za interesujące zadanie — nie mogę się doczekać, aby pracować nad tym wizualnie pięknym projektem!
Z poważaniem,
Maria
-
5 dni2032 PLN
198 5 dni2032 PLNWitaj! 3D MASTER
Mam doświadczenie w pracy z Three.js i React — stworzę dla Ciebie komponent z potrzebną interaktywnością, konfigurowalnymi parametrami i efektami wizualnymi, jak na przykładzie. Dostosuję do urządzeń mobilnych, wszystko zrobię płynnie i wydajnie.
Chętnie omówię szczegóły i zacznę — pisz!
-
10 dni1831 PLN
7575 13 0 10 dni1831 PLN3D
Cześć, rozumiem jak to zaimplementować i mam duże doświadczenie z Reactem. Szczerze mówiąc, pracowałem bardziej z Pixi.js, ale jeśli Three.js jest niezbędne, jestem pewien, że nie będzie to problemem. Chętnie omówię szczegóły i będę z Tobą współpracować.
-
10 dni1648 PLN
1551 15 0 10 dni1648 PLN3D
Witam
Zainteresował mnie Twój projekt, ale nie jestem pewna co do treejs
Czy możemy porozmawiać osobiście
Często tworzę dla stron internetowych webm, gif oraz po prostu modele 3D do integracji i interaktywności
-
15 dni5492 PLN
941 3 0 15 dni5492 PLNCześć!
MISTRZ 3D.
Mam bogate doświadczenie w MERN i Three.js.
Chcę omówić więcej w prywatnej rozmowie.
Dziękuję.
-
які саме 3д-моделі потрібно зробити в рамках цього проекту? і кількість
-
Aktualne zlecenia dla freelancerów w kategorii Programowanie stron internetowych
Integracja WhatsApp z Odoo CRM (szare rozwiązanie) + konfiguracja ERP na przyszłośćWitaj! Szukamy doświadczonego specjalisty lub zespołu do skonfigurowania dwustronnej integracji komunikatora WhatsApp z systemem CRM Odoo. ⚠️ Ważne wyjaśnienie dotyczące integracji: Oficjalne API WhatsApp Business (WABA) nie interesuje nas. Potrzebujemy stabilnego "szarego"… Python, Programowanie stron internetowych ∙ 3 minuty temu ∙ 1 oferta |
Rozwój platformy AM Mobility (serwis samochodowy, parking, ubezpieczenie, wynajem samochodów)
21 186 PLN
Szukamy zespołu lub doświadczonego programisty Full Stack do stworzenia MVP platformy AM Mobility. AM Mobility to jednolita cyfrowa ekosystem dla kierowców, łącząca w jednej aplikacji i platformie internetowej: parking; serwis samochodowy; wulkanizację; myjnię samochodową;… Javascript & Typescript, Programowanie stron internetowych ∙ 2 godziny 49 sekund temu ∙ 48 ofert |
Konfiguracja dataLayer (PrestaShop), integracja z GTM/Google
163 PLN
Zadanie: Poprawnie oznaczyć lejek e-commerce, przekazać rozszerzone dane do dataLayer i wdrożyć logikę filtrowania „wewnętrznych” zamówień (administratorzy, dropshipperzy), aby wykluczyć je z optymalizacji reklam Google Ads.Istota problemu Dropshipperzy i menedżerowie składają… Programowanie stron internetowych, Sklepy internetowe i e-commerce ∙ 2 godziny 27 minut temu ∙ 15 ofert |
Mini aplikacje Telegram. SklepDzień dobry Wymagane jest stworzenie aplikacji w tg (sklep internetowy) Przykład - w zasadzie 1 do 1 jak tutaj brandspacebot Ważne jest Wasze doświadczenie, stos, na którym proponujecie to zrobić i dlaczego Cena i czas realizacji na początek, będę czekać na pytania Programowanie stron internetowych, Tworzenie chatbota ∙ 6 godzin 24 minuty temu ∙ 60 ofert |
Animacje Gsap
82 PLN
Dzień dobry. Trzeba wprowadzić poprawki w bieżącym projekcie. Potrzebny specjalista, który dobrze pracuje na gsap/lenis Trzeba zrobić animację kart. Szczegółowe wymagania tutaj:… Javascript & Typescript, Programowanie stron internetowych ∙ 7 godzin 46 minut temu ∙ 12 ofert |