Learning Timeline
Key Insights
Reasoning Effort Tips
Always set 'Reasoning Effort' to 'Extra High' when asking the AI to build projects involving complex data visualizations or 3D libraries to ensure the generated code is more stable and has fewer bugs.
Advantages of the Coding Agent
Unlike standard ChatGPT, OpenAI Codex in agent mode automatically manages the folder structure on your computer, making it easier to handle integrated HTML, CSS, and JavaScript files.
Prompts
Basic 3D Map Prompt
Target:
OpenAI Codex
Create a web-based 3D Earth visualization that allows users to zoom seamlessly from outer space down to individual city streets. Show a realistic planet Earth. Use publicly available assets, models, and layers if needed. Make sure it loads efficiently on a regular web browser.
Atmosphere & Night Visual Enhancement Prompt
Target:
OpenAI Codex
In orbital view, add toggle for dynamic clouds and atmospheric simulation. Use publicly available realistic cloud or atmosphere layers. Currently, they look too fake. Also add a toggle for day and night at orbital view. At night, I should be able to see city lights of major populated areas.
Step by Step
Building a 3D Earth Visualization Using OpenAI Codex
- Open the OpenAI Codex (Coding Agent) interface in your web browser.
- Enter the main prompt in the input field to create an interactive 3D map that can zoom from outer space down to city streets.
- Locate the 'Reasoning Effort' settings menu within the interface.
- Select the 'Extra High' setting to ensure the AI generates high-quality, high-performance code.
- Click the 'Run' button to start the process of generating the code and folder structure.
- If the initial result isn't quite right, provide an additional prompt (iteration) to add layers such as dynamic clouds and atmosphere.
- Use a specific prompt to utilize 'publicly available assets' to ensure the Earth and cloud textures look realistic.
- Add instructions for a 'Day and Night toggle' feature so that city lights become visible at night in densely populated areas.
- Once the AI finishes generating all files, navigate to the automatically created project folder.
- Find and double-click the 'index.html' file to view your 3D map in the browser.
- Use the generated UI toggles to turn the 'Clouds', 'Atmosphere', and 'Spin' functions on or off.
- Click on a city name (e.g., New York or Tokyo) to test the automatic zoom feature to that city's 3D rendering level.
