Open code, practice, and notes →
Download source with English comments · for reading
25 · Markers and Raycasting
Week 4 / original Day 25 · Document and example provided · This is a learning sequence, not a fixed daily workload.
Full roadmap · Workspace usage
Goal
Define what selected coordinates mean and place markers.
Prerequisites
06, 20, 24.
Key concepts and explanations
Markers need both a world position and a display position on screen. When the camera moves, you can project world coordinates again to update a DOM marker's position. Judge occlusion behind objects separately from being outside the screen.
Do not assume a mesh intersection and the result of GS-specific picking represent the same kind of surface. Specify whether the selection is a center approximation or a visible surface, and explain what the marker indicates in the UI and document.
Skills you will develop
- Define what selected coordinates mean and place markers.
- Reproduce the completion criteria below and answer the self-check questions in your own words.
Exercises
- Place a small marker at a mesh raycast intersection.
- Check that the marker position is correct during camera movement, zoom, and resizing.
- For GS, check the selection API's criteria and define how to display unavailable/uncertain selections.
Variables to observe
Intersection position, camera transform, occlusion, picking criteria.
Completion criteria
- Can explain the marker coordinate system and update path.
- Handled off-screen/occluded states.
- Specified GS selection limitations.
Self-check questions
- Can world coordinates be used directly for CSS left/top?
- How would you explain a mismatch between a visible GS boundary and selection criteria?
Official references
Experiment notes — fill these in yourself
Goal
Key concepts
Changed variables and predictions
Actual results
What I learned
Remaining questions
Previous: Camera movement·rotation·zoom · Next: FPS·Draw Calls·memory analysis
Linked example and execution scope
Runnable source code · Workspace unit ID: 25-markers
Edit the linked source code in Monaco to apply it to the sandbox preview after checks. Perform the extension exercises and completion criteria yourself and record the results.
Any previously saved code is preserved. To use the new original source, first back up everything as a full JSON file, then select Restore original code. Your notes are not erased.