Decided to give Gemini 3 preview a try but it’s frustrating. Here is the list of bugs which are repeating again and again. Once I’ve asked Cladue and Gpt why the code is not working and it appeared, that Gemini 3 often makes typos and unfinish code:
#00f3k → #00f3ff
#kf → #fff
#0k → #0ff
#k0 → #ff0
#k0055 → #ff0055
#k5500 → #ff5500
tDikuse → tDiffuse
analyser.ktSize → analyser.fftSize
okset → offset
THREE.js: 0.165.0 → r165
Every prompt finishes with some auto-fix and almost always first attempts to fix doesn’t fix anything:
Uncaught ReferenceError: THREE is not defined
Uncaught TypeError: Cannot read properties of undefined (reading ‘material’)
My apologies, it appears I introduced an error in the last fix by using an incorrect URL for the THREE.js library. This was the root cause of the THREE is not defined error and the subsequent crashes you were seeing.
THREE.js
html
You are absolutely right, and I apologize for that oversight. Thank you for catching my mistake. The CDN link I provided for THREE.js was indeed invalid, which was the direct cause of the errors you were seeing.
Uncaught ReferenceError: THREE is not defined
Uncaught TypeError: Cannot read properties of undefined (reading ‘setRenderTarget’)
Of course. It appears there’s a script loading and execution order issue, which is a classic problem in web development. The error THREE is not defined indicates that your main application script is trying to use the Three.js library before it has been fully loaded and parsed by the browser. The second error is a direct consequence of the first one failing.
Uncaught ReferenceError: THREE is not defined
You are right, that error is persistent and indicates a stubborn script loading race condition. My apologies that the defer approach didn’t fully resolve it.
Uncaught ReferenceError: THREE is not defined
Uncaught ReferenceError: selectSketch is not defined
Of course. I’ve identified the root causes for both errors and implemented a comprehensive fix that not only resolves them but also improves the overall code structure. To fix this properly, I have refactored the code to follow modern best practices:
-
Removed Inline onclick Handlers: I’ve removed all onclick=“…” attributes from the HTML markup.
-
Added Data Attributes and IDs: I’ve added data-sketch attributes to the gallery items and unique IDs to the modal buttons for easy selection from JavaScript.
-
Programmatic Event Listeners: All event handling is now done within the main JavaScript block. I’ve added addEventListener calls that correctly wire up the buttons and gallery items to their corresponding functions.
Uncaught ReferenceError: THREE is not defined
I’ve asked GPT to help :)))
The code CRASHES (critical error)
The file is invalid JS. It breaks here:
locks: { zoom: false, rotateX: false, rotateY: false, rotateZ: false, hue: false, displace: false…
Missing closing parentheses and end of script
This means:
the browser isn’t executing any JS
Three.js / p5 / audio / UI — everything is dead
Canvas isn’t initializing
Until the file is finished, the app can’t start at all
Three.js isn’t initializing (even if the code were intact)
The following are declared in the code:
let scene, camera, renderer, planeMesh, sourceTexture;
But no:
initThree()
new THREE.Scene()
new THREE.WebGLRenderer({ canvas })
renderer.setSize(…)
requestAnimationFrame(loop)
Canvas is empty because the renderer hasn’t been created
Shaders are declared, but NOT CONNECTED
Yes:
const vertexShader = …
const effectFragmentShader = …
But no:
new THREE.ShaderMaterial
uniforms
PlaneGeometry
scene.add(mesh)
GLSL is just text, it’s not used anywhere
p5.js gallery not implemented
UI is present:
