JIT
Three.js Cube Editor with Features
Log in
@jonathandeloss02
Make a three.js cube editor with PC only and mobile! Add color changer,background changer! Three.js blue cube with black editor! Add some examples, Modeling mesh features,3D Shapes, Lighting, Color Scheme,Coding Design
Gemini 2.5 Pro
Updated files
v1
@jonathandeloss02
Add coding bar and coding display
Gemini 2.5 Pro
Updated files
v2
@jonathandeloss02
Add user-generated models with ai generated models
Gemini 2.5 Pro

Okay, let's add the ability to load user-provided models and select from a few example models. We'll use the GLTF format (.gltf, .glb) as it's widely supported.

The cube color changer will now be disabled when an external model is loaded, as models often have complex materials. The background changer will remain active.

Updated files
v3
@jonathandeloss02
Add the 3D Shapes and add fun commands to make it bounce and spin faster and make forever rainbow!
Gemini 2.5 Pro

Okay, let's add more basic shapes and the fun animation commands.

We'll modify the dropdown to include Sphere, Torus, and Cone. We'll add buttons for "Bounce", "Spin Faster", and "Toggle Rainbow". The rainbow effect and color picker will only work on the basic shapes (Cube, Sphere, Torus, Cone), not the loaded GLTF models.

Updated files
v4
@jonathandeloss02
Add basic model scheme and chat GPT helps us code with three.js and more! Add some random shapes that can get the other effects! Add a coding scheme, three.js experience, 3D Three.js modeling studio, Scripting code and console!
Gemini 2.5 Pro

Okay, let's integrate these ideas. We'll add:

  1. A "Random Shape" button.
  2. A "Model Info" panel showing basic details.
  3. A section simulating an "AI Coding Assistant" with helpful tips/links.
  4. A simple "Scripting Pad" (non-functional textarea) and a "Console Log" display area.
  5. Reorganize the UI into logical groups (Loading, Appearance, Animation, Info/Tools).

The random shapes will use the existing basic geometries (Cube, Sphere, Torus, Cone) and will support the color/animation effects.

Updated files
v5
@jonathandeloss02
Add scripting pad in the right add more effects!
Gemini 2.5 Pro

Okay, let's move the Scripting Pad and Console to a separate panel on the right and add more visual effects: Wireframe mode, Opacity control, and Emissive color/intensity.

These new effects will primarily apply to the basic shapes using the defaultMaterial.

1. HTML Changes (index.html)

  • Create a new #right-panel div.
  • Move the "Scripting & Console" group into it.
  • Add a new "Effects" group in the left #editor panel.

2. CSS Changes (style.css)

  • Add styles for #right-panel (positioning, size, appearance).
  • Add styles for the new effect controls (checkbox, sliders).
  • Adjust layout for responsiveness.

3. JavaScript Changes (main.js)

  • Add variables and event listeners for the new effect controls.
  • Modify defaultMaterial properties based on these controls.
  • Update updateUIForModelType to enable/disable effects for basic shapes only.
  • Update updateCodeSnippet to include the new effects.
  • Ensure logToConsole targets the element in the right panel.

Here are the updated files:

Updated files
v6