Find Jobs
Hire Freelancers

Complete React Threejs small app tasks and improve performance

$30-250 USD

Preklicano
Objavljeno pred več kot 2 letoma

$30-250 USD

Plačilo ob dostavi
Requirements : The goal is to draw 16 draggable spheres attached with texts (from a hardcode data array) on top of a background image using React Three Fiber and other packages if necessary. The spheres can be dragged and dropped along with the text associated horizontally and vertically on the screen. Also, each sphere has its own status, name and PV value (The name and PV value will be shown on the text). If the status is dangerous or faulty, the sphere shall be flashing in red or yellow respectively, but if normal, it remains green and unchanged. There is an existing base code that has completed certain parts of the task, like draggable spheres on a background image; HOWEVER, there is NO text attached to the spheres or flashing effect for the faulty status. Your task is to draw text around the spheres and to apply the flashing effect on certain spheres, and the base code will be provided. Details: 1. Draw the associated text around the sphere with the data from an array of 16 elements, staticData in [login to view URL] file, containing 3 attributes (name, pv and status). The code only has to display the name on top of the sphere and the pv on the bottom of the sphere. When the user drag-and-drops the sphere, the associated text will follow the sphere. A given font ([login to view URL]) shall be applied to the text. The result should resemble the screenshot provided. 2. You need to render the flashing effect on the sphere with the status of dangerous/faulty. The flashing effect should look like a flashing signal light (If you don’t know what a flashing signal light is, please check out the gif file attached, [login to view URL]). So, if the status of the sphere is dangerous, the flashing signal will be changed between red and white; likewise, if the status of the sphere is faulty, the flashing signal will be changed between yellow and white. (Tip: there is no restriction to using any method for this, though I recommend using React Spring.) Requirements: 1. The code MUST be run in ReactJs and InstancedMesh MUST be used for performance purposes. If using other technologies or methods, you have to make a proposal first; otherwise, the delivery will NOT be accepted. 2. Besides English, the name could be in other languages. There are Chinese characters in the name value of the data array, and the given font can support both English and Chinese. 3. Result source code shall be provided.
ID projekta: 32304688

Več o projektu

3 ponudb
Projekt na daljavo
Aktivno pred 2 letoma

Želite zaslužiti?

Prednosti oddajanja ponudb na Freelancerju

Nastavite svoj proračun in časovni okvir
Prejmite plačilo za svoje delo
Povzetek predloga
Registracija in oddajanje ponudb sta brezplačna

O stranki

Zastava CHINA
shenzhen, China
0,0
0
Plačilna metoda je verificirana
Član(ica) od dec. 28, 2016

Verifikacija stranke

Hvala! Po e-pošti smo vam poslali povezavo za prevzem brezplačnega dobropisa.
Pri pošiljanju vašega e-sporočila je šlo nekaj narobe. Poskusite znova.
Registrirani uporabniki Skupaj objavljenih del
Freelancer ® is a registered Trademark of Freelancer Technology Pty Limited (ACN 142 189 759)
Copyright © 2024 Freelancer Technology Pty Limited (ACN 142 189 759)
Nalaganje predogleda
Geolociranje je bilo dovoljeno.
Vaša prijavna seja je potekla, zato ste bili odjavljeni. Prosimo, da se znova prijavite.