SatScope

(69% work done)

today was so frustrating but also so satisfying by the end. phase 6 was about making the satellite actually interactive. built a clickable registry using a reg() function that stores every mesh by name so the raycaster knows which part got hit. then added hover detection inside the animate loop using Raycaster. had lots of bugs and the worst one was the highlight appearing in the completely wrong position, hovering near a part but not on it. turned out mouse coordinates were being calculated relative to the whole window instead of just the canvas, fixed it with getBoundingClientRect(). now hovering works perfectly on every part and it feels like a real interactive app :3

(59% work done)

today was actually so fun. i built a full satellite from scratch using only code and shapes which still feels crazy to me. this phase was all about building each part one by one and sticking them together into one group.
started with the silver metallic body box using BoxGeometry then added solar panels which are two dark blue wings sticking out from both sides connected by CylinderGeometry boom arms. then the antenna which was my favourite part because the dish shape is made by giving LatheGeometry a list of points tracing a curve and three.js spins it into a full 3d bowl shape automatically. in the end i added thrusters at the bottom corners, a telescope payload pointing downward at earth, and a tiny star sensor on the side.
i had a bunch of bugs today mostly typos and wrong variable names but i am getting faster at spotting them. also spent a lot of time tweaking position and size values by trial and error until everything looked correct.
biggest lesson today was about functions. instead of writing the same thruster code four times i put it in one function and called it four times with different positions. way cleaner and if i want to change anything i only change it in one place.
the satellite actually looks like a satellite now and that feels really good :3

(38% work done)

okay so i wanted a background full of stars so i used THREE.BufferGeometry to scatter 6,000 points. Instead of just placing them randomly in a cube, i used spherical coordinates to wrap them around the scene at a distance of 700 to 1000 units. now it kinda looks more appealing. also, the centerpiece is a earth sphere. i used MeshStandardMaterial to take advantage of physically-based lighting, specifically adding a bump map to give the surface some tactile depth. to make it look a bit more real i added a slow rotation to the earth’s y-axis and offset its position slightly downward (y: -420) to frame it better within the camera’s view (this is just a rough design for now i’ll prolly change it after adding the satellite, ive so manyy ideas in my mind)

(15% work done)

hey so this is the very beginning of this project and basic html structure for my satellite explorer is ready!!
i’ve set up the basic structure for my interactive 3D satellite project. the HTML includes:

1. canvas container: a <canvas> inside a div (#canvas-container) where the 3D satellite will be rendered using Three.js.
2. header: shows the project logo ORBITAL / EXPLORER and a subtitle Interactive Satellite Anatomy - by Alisha.
3. info panel: a side panel (#info-panel) to display information about each satellite component. It includes:

• component name
• part title
• description
• primary function
• close button (x)

1. parts list: buttons for each satellite component (bus/body, solar panels, antenna, thrusters, payload, star sensor). these will be clickable to display info in the panel.
2. libraries & fonts
   a) Three.js is included via CDN for rendering 3D models.
   b) google fonts space mono and syne are added for a clean, space-themed style.