Home

Summary.

Two rotating cubes using React with Vite.

When the mouse is hovered onto a cube, its color changes from orange to hotpink.
When a cube is clicked, its scale is toggled from 1 to 1.5 and its color changes. The process of selecting colors is more complicated than it seems, because React useState is asynchronous!

We label the cubes and their colors by calling Text, with Hi-quality rendering w/ signed distance fields (SDF) and antialiasing, using troika-3d-text. It is also possible to use Text3D, with type face fonts.

Finally, decals are applied to each face of the cubes. Decals are objects that interfere with the "mouse picking" and to avoid mistakes, we call event.stopPropagation() to get only the first intersection when a pick ray is cast. Furthermore, if no material is specified, a transparent meshBasicMaterial with a polygonOffsetFactor of -10 will be created, producing an awkward effect when the cubes overlap.

Usage:

• To install jsdoc, Vite, yarn and pnpm:
• sudo npm install --global vite
• sudo npm install --global yarn
• sudo npm install -g jsdoc
• sudo npm install -g pnpm
• To run the version with modules and Node.js version 18 or 20:
• cd cubes
• npm or yarn install
• npm run dev -- --host (for using vite)
  or npm start
  or yarn start
• The steps to deploy on github pages.

Summary.

Create a root to display React components inside a browser DOM node.