Skip to content

Instantly share code, notes, and snippets.

@CodyJasonBennett

CodyJasonBennett/index.html

Last active September 19, 2021 20:26
Show Gist options
  • Save CodyJasonBennett/36b90d78db8e13d42d2c3e277d2d3f01 to your computer and use it in GitHub Desktop.
Save CodyJasonBennett/36b90d78db8e13d42d2c3e277d2d3f01 to your computer and use it in GitHub Desktop.
Download ZIP
THREE SSR Discord.js
Raw
index.html
<!DOCTYPE >
<html>
<head>
<meta charset="UTF-8" />
<style>
body {
margin: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script type="module">
import * as THREE from 'https://cdn.skypack.dev/[email protected]/build/three.module.js';
const blocks = [
{
name: 'stone',
src:
'data:image/jpeg;base64,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',
},
];
const block = window.location.search.replace('?block=', '');
const target = blocks.find(({ name }) => name === block);
new THREE.TextureLoader().load(target.src, texture => {
const { innerWidth, innerHeight } = window;
const renderer = new THREE.WebGLRenderer({
antialias: false,
preserveDrawingBuffer: true,
});
renderer.setPixelRatio(2);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
const camera = new THREE.PerspectiveCamera(70, innerWidth / innerHeight);
camera.position.z = 2;
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ map: texture });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer.render(scene, camera);
});
</script>
</body>
</html>
Raw
index.js
const puppeteer = require('puppeteer');
const { Client } = require('discord.js');
const renderBlock = async block => {
const browser = await puppeteer.launch({
headless: true,
args: ['--use-gl', '--use-cmd-decoder=passthrough'],
});
const page = await browser.newPage();
await page.goto(`file://${__dirname}/index.html?block=${block.toLowerCase()}`);
await page.waitForSelector('canvas');
const image = await page.evaluate(() => document.querySelector('canvas').toDataURL());
await browser.close();
return image;
};
const bot = new Client();
bot.login(process.env.TOKEN);
bot.on('message', async msg => {
if (!msg.content.startsWith('!block ')) return;
const block = msg.content.replace('!block', '').trim();
const image = await renderBlock(block);
if (!image) return msg.channel.send(`Block: ${block} not found.`);
const imageStream = new Buffer.from(image.split(',')[1], 'base64');
return msg.channel.send({ files: [imageStream] });
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment