3D AIM TRAINER
- 6 Devlogs
- 26 Total hours
A Web based 3D AIM TRAINER WRITTEN IN HTML, CSS and JS!
A Web based 3D AIM TRAINER WRITTEN IN HTML, CSS and JS!
Finished the menu and most of the review feedback, Since the last post, I have been working mainly on the Menu and a few things : 1. The menu is now in a good shape too. 2.Added a settings popup where you could change sensitivity from. 3.removed the browser alert for results and made a dedicated page for results. 4.Added background music, So actually I used AI to generate the bgm. 5.Made a favicon and added an MIT License.
REBUILDING AND FIXING EVERYTHING. After reading the reviews, I came to a conclusion that My game was hanging on most people’s device, it was more because of uncapped fps as of i think. here are a few things that I did: 1. I removed all the texture packs (made the game heavy and also caused lag for some people). 2. Using whitish color design (Flat colours) and added Grid helper. 3. Made the targets Blue colored and glossy looking. 4. I have already rebuilding the menu, the old one killed the whole gaming vibe (old one was kinda luxury lmao).
The enviroment and textures are in good shape now, It look right in the game!! The main work that I did since the last time file structuring and organizing files in folders, and removing the code that was crashing my game, and also solved few bugs, like screen freezing. menu.html is now index.html, added features to select and play different game modes using from menu. Only Gridshot and Sixshot are live for v1. I will ship this project v1. I am looking forward to add more game modes and make a seperate page for results.
I have been working on the room and textures. I cant give proper finishing to the textures, they dont look good, so I skipped it for now. I am working on the Menu/Game mode selector. I have implemented smooth scroll to select animation using gsap, and its pretty smooth.
spent most of my time working on the enviroment, the room i mean and optimizing the game a little. So i added 1 boxes each sides to add depth, etc. I had to adjust the sun light and the roof that wasted most of my time. The shadows were pixelated too much so I tried blurring them a little to smooth them out, also added score and accuracy system. I might work on the UI too.
##Devlog 1, BUILDING A WEB BASED AIM TRAINER WRITTEN IN HTML, CSS AND JS
I am building a broswer/web based Aim trainer for competitive games, like aimlabs but entirely written in HTML, CSS, JS and THREE.js.My primary goal was to match the aiming feel of competitive games like Valorant. Because three.js uses vertical field of vieww by default, i had to implement a dynamic conversion formula that would lock the horizontal FOV to 103. I also mapped shooter mouse sensitivity scaled directly into radian angle increaments per mouse count, to make the flick distances fell well and authentic.
for handling movements, I integrated the pointer lock API for raw mouse input that will feel just like any competitive game. I fixed a bug that made the camera tilt sideways and also stopped the screen from flipping upside down when looking up and all. also added a "+" crosshair in the middle. Also built a training room with walls, roofs and floor, and also a little depth. added realisitc sunlight shadow casting.
For testing, I built a 4x3 grid system that keeps three targets active. clicking mouse triggers center screen raycast to detect hits, free up occupied slots, etc. And also added fps counter and removed the fps cap restrictions. The target and aiming system is working fine and its fully responsive.