SI13/RESURGENCE/main.js

import * as THREE from '/sandbot/words-for-the-future/RESURGENCE/GLTFLoader/js/three/build/three.module.js';
import {FBXLoader} from 'https://cdn.jsdelivr.net/npm/three@0.118.1/examples/jsm/loaders/FBXLoader.js';
import { GLTFLoader } from "/sandbot/words-for-the-future/RESURGENCE/GLTFLoader/GLTFLoader.js";
import Stats from "/sandbot/words-for-the-future/RESURGENCE/jsm/libs/stats.module.js";


			var container;
			var camera, scene, raycaster, renderer;
			var boolMouseOn = false,boolMouseClick = false;
			var mouse = new THREE.Vector2(), INTERSECTED;
			var radius = 100, theta = 0;

			//creating custom IDs for Gltfs
			const GltfId = "gltf1";
			//caught critter counter:
			let count = 0 ;
            let boolcrittercaught = false;

			init();
			animate();

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );

				scene = new THREE.Scene();


				var light = new THREE.DirectionalLight( 0xffffff, 1 );
				light.position.set( 1, 1, 1 ).normalize();
				

				

				scene.background = new THREE.Color(0x000000, 1);
				var geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );

				for ( var i = 0; i < 1; i ++ ) {

					var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xffffff } ) );

					object.position.z = 0;
					object.position.x = -25;
					object.position.y = -40;
					object.rotation.y = -20;
					//object.rotation.x = 0;
					object.name = "cube";
					//scene.add( object );
					
				}

				//clickable critter placehoders:

					var object1 = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xffffff } ) );

					object1.position.z = 0;
					object1.position.x = 5;
					object1.position.y = -40;
					object1.rotation.y = -20;

					//object.rotation.x = 90;
					//scene.add(object1);
					
			
				

				//GLTF loader with carmens critter (iphone)
			
				var loader = new GLTFLoader(); new THREE.CubeTextureLoader();

			
                
                	loader.load( '/sandbot/words-for-the-future/RESURGENCE/models/ben-rock.glb', function ( gltf ) {
				    gltf.scene.position.x = -1;
					gltf.scene.position.z = -78;
					gltf.scene.position.y = 0;
					gltf.scene.rotation.x = 0;
					

					//gltf.scene.scale = Vector3(3,3,3);
					  //gtlf.material.opacity = 0.5;
					   //gltf.scene.material.transparent = true;
		
					scene.add( gltf.scene );
					gltf.scene.visible = false;
					


						//louisa's code: onclick (window is placeholder for what should be clicked) makes it appear:
						document.getElementById("buttonright").addEventListener("mousedown", function(){
							gltf.scene.visible = !gltf.scene.visible;
                            scene.add( light );
							console.log( "map is visible now" );
							});
		
					}, undefined, function ( error ) {
		
						console.error( error );
		
				} );

           

				  


				raycaster = new THREE.Raycaster();

				renderer = new THREE.WebGLRenderer();
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				container.appendChild( renderer.domElement );



				window.addEventListener( 'mousedown', onDocumentMouseDown, false );
				//document.addEventListener( 'mousedown', onDocumentMouseDown, false );
				window.addEventListener( 'mousemove', onMouseMove, false );
				window.addEventListener( 'resize', onWindowResize, false );


				// var onDocumentMouseDown = function ( event ) {
				// 	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
				// 	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
				// 	var intersects = raycaster.intersectObjects( object );
				// 	var intersection = intersects[0], object = intersection.object;
				// 	object.visible = false ;
				// };
			}




			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function onMouseMove( event ) {

				// calculate mouse position in normalized device coordinates
				// (-1 to +1) for both components

				mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
				mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

			}



			//
			//const stats = Stats()
			//document.body.appendChild(stats.dom)


		
			
			function animate() {

				requestAnimationFrame( animate );
				render();


			}
			const ground = new THREE.Mesh(
				new THREE.PlaneBufferGeometry( 1000, 1000, 1, 1 ),
				new THREE.MeshLambertMaterial( { color: 0xffffff} )

				
			);

			ground.position.z = 95;
		
				ground.visible = true;
				//scene.add( ground );


			function render() {

				
				theta += 0.1;

				camera.position.x = radius * Math.sin( THREE.MathUtils.degToRad( theta ) );
				camera.position.y = radius * Math.sin( THREE.MathUtils.degToRad( theta ) );
				camera.position.z = radius * Math.cos( THREE.MathUtils.degToRad( theta ) );
				camera.lookAt( scene.position );

				camera.updateMatrixWorld();

				// find intersections

				raycaster.setFromCamera( mouse, camera );

				var intersects = raycaster.intersectObjects( scene.children);

				

				//console.log('mouse click is '+boolMouseClick);

				//console.log('mousedown');
				//louisa's code, trying to make the pop up happen onclick of an object
				if(boolMouseOn == true && boolMouseClick == true ){
					console.log("its a hit!");

				
					 
					 

				}
				//turn off mouseclick after possible event
			


				renderer.render( scene, camera );

			}

			function onDocumentMouseDown( event ) {

			  event.preventDefault();
			  switch ( event.which ) {
			    case 1: // left mouse click
			    //console.log('click!');
					boolMouseClick = true;
			    	//mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
						//mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
			      //mouse.unproject( camera );
			     	//addPoint( mouse );
			      break;

			    case 3: // right mouse click
			 			//removeLastPoint();
			      break;
			  }
		}