canvas-texture-example

A small demo of draggable images on a 2D canvas and uses that canvas as the texture for a bumpy terrain mesh in three.js.

Run

yarn           # install
yarn start     # dev server (http://localhost:5173)
yarn build     # type-check + production build

Interactions

Image canvas (left):

• Drag an image to move it.
• Right-click an image → Move to front / Move to back / Remove.
• Hover → blue outline. Delete/Backspace removes the hovered image.
• "Add image" button appends a new random picsum image.

Terrain view (middle):

• Drag → orbit camera. Middle-drag → pan. Wheel → zoom.
• Shift+drag an image to move it on the terrain surface.
• Right-click an image on the terrain → same context menu.

Layers sidebar (right):

• Drag rows to reorder layers. Top of list = front.