Open code, practice, and notes →
Download source with English comments · for reading
06 · Raycaster·OrbitControls
Week 1 / original Day 6 · Document provided / runnable example provided · This is a learning sequence, not a fixed daily workload.
Full roadmap · Workspace usage
Goal
Turn a pointer position into a spatial ray and distinguish camera controls from selection.
Prerequisites
02~04, DOM pointer events.
Key concepts and explanations
clientX/clientY are viewport coordinates. Subtract the canvas left/top and normalize by width/height to obtain positions within the panel. NDC has x=-1~1 and positive y pointing upward at +1, so invert the y direction.
Raycaster.setFromCamera creates a ray from the camera and a screen point and provides intersections in distance order. OrbitControls moves the camera. Distinguish the end of a drag from click selection, and clear the selection when empty space is clicked.
Skills you will develop
- Turn a pointer position into a spatial ray and distinguish camera controls from selection.
- Reproduce the completion criteria below and answer the self-check questions in your own words.
Exercises
- Place two cubes and calculate x=((clientX-left)/width)*2-1, y=-((clientY-top)/height)*2+1.
- Change the color of the nearest intersected object and restore it when clicking empty space.
- Change the canvas margins and size, select again, and remove events during cleanup.
You can edit this unit's runnable code in the workspace. If an empty code record was previously saved, restore the original code. Your notes are preserved.
Variables to observe
pointer coordinates, canvas size·position, object distance. Also record a baseline with camera rotation stopped.
Completion criteria
- Implemented selection of two objects and clearing the selection.
- Coordinates stay correct when the panel size changes.
- Can distinguish selection from dragging the camera.
Self-check questions
- Why does using window.innerWidth for NDC fail in a 3-panel layout?
- Which of several overlapping objects should be selected?
Official references
Experiment notes — fill these in yourself
Goal
Key concepts
Changed variables and predictions
Actual results
What I learned
Remaining questions
Previous: Light·Shadow·Texture · Next: Interactive scene review
Linked example
Example source is displayed in the workspace editor and actually runs. Change the variables or exercises in the first comment one at a time and record your predictions and results. Restoring the original code resets only the code and does not erase your notes.
See Runtime environments and limitations.
Linked example and execution scope
Runnable source code · Workspace unit ID: 06-interaction
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.