/*AB.showRunHeader();     // Show run header (in case does not show automatically)
const skycolor = 'pink';     
AB.newSplash();                   
  
AB.splashHtml (
` <h1> </h1>  
    <p>
    Make an image of:  
    <input    style='width:25vw;'    maxlength='2000'   NAME="p"    id="p"       VALUE='' >  
    <button onclick='start();'  class=ab-normbutton >Start</button>
    <p>  
    <div id=errordiv name=errordiv> </div> `
);

// credits:  
// Tuomas Bazzan - Capture the Hat (https://ancientbrain.com/world.php?world=3099829076)
// 
function initRoombox() 
{
  var materialArray = [                                                                                                                 // from starting position
 	( new THREE.MeshBasicMaterial ( { map: THREE.ImageUtils.loadTexture( "/uploads/indy/background-image.jpg" ), side: THREE.BackSide } ) ), // right
 	( new THREE.MeshBasicMaterial ( { map: THREE.ImageUtils.loadTexture( "/uploads/indy/background-image.jpg" ), side: THREE.BackSide } ) ), // left face
 	( new THREE.MeshBasicMaterial ( { map: THREE.ImageUtils.loadTexture( "/uploads/indy/ceiling.jpg" ), side: THREE.BackSide } ) ), // ceiling
 	( new THREE.MeshBasicMaterial ( { map: THREE.ImageUtils.loadTexture( "/uploads/indy/floor.jpg" ), side: THREE.BackSide } ) ), // floor
 	( new THREE.MeshBasicMaterial ( { map: THREE.ImageUtils.loadTexture( "/uploads/indy/background-image.jpg" ), side: THREE.BackSide } ) ), // back
 	( new THREE.MeshBasicMaterial ( { map: THREE.ImageUtils.loadTexture( "/uploads/indy/background-image.png" ), side: THREE.BackSide } ) ) // front
 	];

  var skyGeometry = new THREE.CubeGeometry ( skyboxConst, skyboxConst, skyboxConst );	
  var skyMaterial = new THREE.MeshFaceMaterial ( materialArray );
  var theskybox = new THREE.Mesh ( skyGeometry, skyMaterial );
  threeworld.scene.add( theskybox );	// We are inside a giant cube
}*/
// Assuming Three.js is available on "ancientbrain.com"

// Set up the scene
//const scene = new THREE.Scene();

// Set up the camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Set up the renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create a box room
const roomGeometry = new THREE.BoxGeometry(10, 10, 10);
const roomMaterial = new THREE.MeshBasicMaterial({ color: 0xaaaaaa, side: THREE.BackSide });
const room = new THREE.Mesh(roomGeometry, roomMaterial);
scene.add(room);

// Create a person
const personGeometry = new THREE.BoxGeometry(1, 2, 0.5);
const personMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const person = new THREE.Mesh(personGeometry, personMaterial);
scene.add(person);

// Create a canvas
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
context.fillStyle = 'red';
context.fillRect(0, 0, canvas.width, canvas.height);

const texture = new THREE.CanvasTexture(canvas);
const canvasGeometry = new THREE.PlaneGeometry(2, 2);
const canvasMaterial = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide });
const canvasMesh = new THREE.Mesh(canvasGeometry, canvasMaterial);
canvasMesh.position.set(0, 2.5, 0);
scene.add(canvasMesh);

// Animation loop
const animate = () => {
  requestAnimationFrame(animate);

  // Rotate the person
  person.rotation.x += 0.01;
  person.rotation.y += 0.01;

  // Render the scene
  renderer.render(scene, camera);
};

// Handle window resizing
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

// Start the animation loop
animate();