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; } }