What happened to my donut?! Distortion in Three.js

Final Live Code

Final Result - Video

Summary

Biz	Biz Biz
Author	Project Somedays
Title	What happened to my donut?! Experiments in distortion in Three.js
📅 Started	2025-04-06
📅 Completed	2025-04-06
🕒 Taken	~2hrs
🤯 Concept	Manipulating the vertices of meshing in Three.js
🔎 Focus	Working out how to access the vertices of meshes

Resources:

• Claude
• Gemini
• This excellent Coding Train tutorial with code sample

Stretch Goals/Extension Ideas

• Work out why there’s screen resizing issues with the way I’ve been running my sketches

TODO:

• Load up basic scene
• Import OpenSimplexNoise
• Chuck in a donut
• Ask AI to help
• Lil-GUI controls

🎓Lessons Learned🎓

• Three.js stores the vertices in a 1D array which gets passed to the GPU

  const verticePositions = mesh.geometry.attributes.position;
  for(let i = 0; i < verticePositions.length; i++){
    let x = verticePositions[3*i];
    let y = verticePositions[3*i+1];
    let z = verticePositions[3*i+2];
  
    let pertX = ...
    let pertY = ...
    let pertZ = ...
  
    verticePositions.setX( ... );
    verticePositions.setY( ... );
    verticePositions.setZ( ... );
    
  }
  verticePositions.needsUpdate = true; // triggers passing things to the GPU
  

🪵Dev Log🪵

2025-06-04 Threejs exploded view

• Asked Claude to write me a function –> had a weird seam
• Asked Gemini - MUCH better