// threejs.org
 
 
//setting up a scene and camera 	
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight,0.01, 1000); 
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
document.documentElement.style.overflow = 'hidden';
document.body.style.overflow = 'hidden';

const light = new THREE.AmbientLight( 0x404040 ); // soft white light : https://threejs.org/docs/?q=light#api/en/lights/AmbientLight
scene.add( light );







// https://threejs.org/docs/#manual/en/introduction/Creating-a-scene


const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5

// setting up a background image for scene. Image found from: https://www.istockphoto.com/photo/empty-highway-with-cityscape-and-skyline-of-guangzhou-china-gm1029885232-275965593

const backgroundTexture = new THREE.TextureLoader().load('/uploads/paulbashford/roadback.jpg'); 
const backgroundGeometry = new THREE.PlaneGeometry(1000, 500); 
const backgroundMaterial = new THREE.MeshBasicMaterial({ map: backgroundTexture });
const backgroundMesh = new THREE.Mesh(backgroundGeometry, backgroundMaterial);
backgroundMesh.position.z = -300;
scene.add(backgroundMesh);




// sign asset: https://www.cgtrader.com/free-3d-models/exterior/cityscape/stop-sign-417c4f7c-783d-47ca-bbf6-e1fa353982ea



const loader = new THREE.GLTFLoader()
loader.load("/uploads/paulbashford/Stopsign.mtl", function(gltf){
    scene.add( gltf.scene );
})



// animate function so render doesn't have to be called manually

function animate() {
	renderer.render( scene, camera );
	cube.rotation.x += 0.1;
	requestAnimationFrame( animate );
}
animate();