︎



⬆ working prototype, click to start⬆


Week 7

Part 1: Define Hello World Goal

Use SMART criteria to create a clear and realistic road map for yourself this week*:


  • 1. Specific
  • What is your project's Hello World? Be specific.
  • This is the mission statement for your goal.
  • What actions will you take? Don’t hesitate to get very detailed.

  • 2. Measurable
  • What does success for your goal look like? (How much? How well?)
  • Are there specific tasks and deadlines to set as milestones in order to complete the main goal?

  • 3. Achievable
  • Is the goal doable?Does it inspire motivation over discouragement?Is the goal realistic? Consider any obstacles or requirements to help you decide.Do you have the necessary knowledge, experience, tools, skills, resources, and time? If not, what would it take to attain those?Do you need to update your expectations?


  • 4. Relevant
  • How does your project's Hello World relate to or align with the goals in your original proposal?
  • What will this Hello World help you do next, in the near or distant future?

  • 5. Time-bound
  • Can you do it in a week?
  • Setting realistic timing improves your chances of succeeding.
  • Time constraints also create a sense of urgency.



GOAL❶


1. Let the website have two states, active and inactive.


✅✅✅

When the user enters the webpage, the inactive mode can simply remind the theme of the website and the status of the operation.




💡Note:


html creates different pages (layers) that are called when the mouse is clicked and the Esc key is pressed.



GOAL❷

2. The cloud in the scene interacts with users.

including the following functions:



✅✅✅

2-1.
Users can move freely in the 3D scene.




💡Note:


three.js different camera modes. Previously, the drift speed of the first point lens was a bit dizzy. Evaluate feasibility after trying a game-like design (PointerLockControls).





2-2.

Point the mouse at the cloud (or when the user is close enough to the object), the content of the poem can appear. When the user moves away from the cloud or the mouse is not pointing at the object, the content disappears.




💡Notes:


poems[ ]
poems. push( );


Raycaster or check distance

function()
requestURL( poem content )
data in and container append Child

clearDiv()
display: "none","block"





2-3.

Additional goal:
Allow users to leave text content.

💡Notes:


Involves user input and how to save to the server.
Haven't figured out how to do it yet.