2.5 KiB

Builder Exploration Notes — Task 1: Material Color Change

Thob Capabilities Observed

  • Static Editing: 100% Supported. The side panel color picker is intuitive and updates the meshStandardMaterial in real-time.
  • Layer Hierarchy: The tree structure (Canvas > mesh > meshStandardMaterial) is logical and matches the Three.js/R3F scene graph.
  • Lighting Defaults: Default ambientLight and pointLight are provided, which makes the initial setup faster than code.

Limitations Identified

  • Dynamic Mutation (Runtime): Attempting to change the material color via an onClick event script failed.
  • Expression Error: Direct property assignment like meshStandardMaterial.color = 'pink' is not currently interpreted correctly by the builder's internal script runner.
  • Property Binding: There is no "No-Code" way to bind a click event directly to a material property (unlike R3F's simple onClick).

Console Warnings & Diagnostics

During the exploration, the following engine-level issues were noted in the console (see screenshots):

  1. Hydration Mismatch (No HydrateFallback):
    • Observation: React is complaining about a missing fallback during initial hydration.
    • Impact: Minor. Suggests a slight desync between server-side rendering and client-side activation in the editor.
  2. Controlled vs. Uncontrolled Inputs:
    • Observation: undefined value is changing from uncontrolled to controlled.
    • Impact: Mid. This often causes "jumping" or resetting behavior in UI sliders or color pickers.
  3. 404 Resource Failure:
    • Observation: A specific resource ID failed to load (670e...f891f:1).
    • Impact: Likely a missing texture or a broken internal reference to a metadata object.

Comparison vs. Code

  • Workflow Speed: Thob is faster for initially placing an object and picking a color.
  • Interaction Logic: R3F is significantly more powerful. Writing simple React code for a toggle is easier than trying to find a workaround in the builder's current event system.

Improvement Recommendations

  1. Event-to-Property Action: Add a preset action for "Set Material Property" inside the onClick event trigger so no code is required.
  2. Error Feedback: Provide a user-friendly "Scripting Error" toast inside the builder instead of failing silently in the browser console.

Verdict: Strong for Visual Prototyping; Limited for Interactive Product Logic.