This is a poem that is wrapped in a 3D starfield. There are five phrases in the poem, which were culled from one of wisdom sayings of the amoral character Yodabund. Blogger will not run this code properly, so you must download the HTML, open notepad, pasted in the text, save it as an HTML file, and then run it from your browser. I am currently working on a better solution.
<!DOCTYPE html>
<html>
<head>
<title>3D Starfield</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Initialize three.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Add stars to the scene
const starCount = 200;
//Existence is a tapestry of contradictions, woven together of light and darkness, a mosaic that contains an image of the whole in every part.
const phrases = ['in every part', 'of the whole', 'a mosaic that contains an image', 'woven together of light and darkness', 'of contradictions', 'Existence is a tapestry'];
const stars = new Array(starCount);
const fontLoader = new THREE.FontLoader();
fontLoader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function (font) {
for (let i = 0; i < starCount; i++) {
const phrase = phrases[Math.floor(Math.random() * phrases.length)];
const geometry = new THREE.TextGeometry(phrase, {
font: font,
size: Math.random() * 3,
height: 0,
});
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const star = new THREE.Mesh(geometry, material);
star.position.set(Math.random() * 200 - 100, Math.random() * 200 - 100, Math.random() * 200 - 100);
scene.add(star);
stars[i] = star;
}
});
// Move the stars through the scene
function animate() {
requestAnimationFrame(animate);
for (let i = 0; i < starCount; i++) {
stars[i].position.z += 0.5;
if (stars[i].position.z > 100) {
stars[i].position.z = -100;
}
}
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
No comments:
Post a Comment