MeansAndMessageRecreation.js

let scene, camera, renderer;
let textMeshes = [];

function init() {
    // Scene setup
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000);
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x000000);
    document.body.appendChild(renderer.domElement);

    // Camera position - moved up and looking down
    camera.position.set(8, 18, 15);
    camera.lookAt(0, 0, 0);

    // Simple flat lighting
    const ambientLight = new THREE.AmbientLight(0xffffff, 1);
    scene.add(ambientLight);

    // Load font and create text
    const loader = new THREE.FontLoader();
    loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) {
        createText(font);
    });

    window.addEventListener('resize', onWindowResize, false);
}

function createText(font) {
    const textMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });

    const texts = [
        { text: "MURIEL COOPER", y: 2, x: -1, z: -2.4, rotation: Math.PI / 2.5, scale: 0.8 },
        { text: "AT MIT", y: 4,x:3.5,z:-2, rotation:-.9 , scale: 0.6 },
        { text: "MESSAGES", y: 1, x: 0, z: 0, rotation: -0.2, scale: 1 },
        { text: "AND MEANS", y: -1, x: 0, z: 0, rotation: -0.2, scale: 1 }
    ];

    texts.forEach(textInfo => {
        const textGeometry = new THREE.TextGeometry(textInfo.text, {
            font: font,
            size: 1.5,
            height: 0.01,
            curveSegments: 12,
            bevelEnabled: false
        });

        textGeometry.center();

        const textMesh = new THREE.Mesh(textGeometry, textMaterial);
        textMesh.position.set(textInfo.x, textInfo.y, textInfo.z);
        textMesh.rotation.y = textInfo.rotation;
        textMesh.scale.setScalar(textInfo.scale);

        scene.add(textMesh);
        textMeshes.push(textMesh);
    });
}

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

init();
animate();