On-chain Three.js PNG Version

Sample code for Fully-on-chain NFT with Three.js, using PNG image compression instead of gzip.
I referred to ROSES by @dhof and RollerCoaster by @xtremetom.

Etherscan
OpenSea

Setup

git clone https://github.com/NowAndNawoo/on-chain-threejs-png.git
cd on-chain-threejs-png
npm install
cp .env.sample .env

Steps to deploy

1. Bundle files

Generate html/Sample1/dist/bundle.js using Webpack.
Three.js, OrbitControls.js, index.js, and texture images are bundled into one JavaScript file.

npm run build -w html/Sample1

2. Convert JS to PNG

Convert html/Sample1/dist/bundle.js to output/sample1.png.

npx hardhat run scripts/create-png.ts

3. Compress PNG

Compress output/sample1.png and save it as output/sample1.min.png.

I converted the 471KB JS file to a 416KB PNG file using Jimp, then compressed it down to 127KB using ImageOptim.

4. Deploy and Mint

Deploy the two contracts, upload the Base64-encoded PNG, and mint.

npx hardhat run scripts/deploy.ts --network goerli

Links

• RollerCoaster Source Code
• ROSES Source Code
• Earth texture image (public domain)

See Appendix for more information about RollerCoaster.