You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

243 lines
6.3 KiB
JavaScript

4 years ago
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;
}
}