diff --git a/static/secrets/finger.png b/static/secrets/finger.png new file mode 100644 index 0000000..9f92a50 Binary files /dev/null and b/static/secrets/finger.png differ diff --git a/static/secrets/paw.png b/static/secrets/paw.png new file mode 100644 index 0000000..fdd7e4c Binary files /dev/null and b/static/secrets/paw.png differ diff --git a/static/secrets/woof.js b/static/secrets/woof.js index cb90432..9ca1dab 100644 --- a/static/secrets/woof.js +++ b/static/secrets/woof.js @@ -9,9 +9,14 @@ const light = new THREE.HemisphereLight(0xeeeeff, 0x777788, 2.5); const controls = new PointerLockControls(camera, renderer.domElement); const scene = new THREE.Scene(); const clock = new THREE.Clock(); -const loader = new GLTFLoader(); const keyMap = {} +// 3D Loaders. +const room = new GLTFLoader(); +const image = new THREE.TextureLoader(); + +let pawTexture, fingerTexture, currentSprite; + init(); //Initialisation @@ -40,12 +45,12 @@ function init() { document.addEventListener('keydown', onDocumentKey, false); document.addEventListener('keyup', onDocumentKey, false); - // GLFT Loader - loader.load( + room.load( // url of file '../test.gltf', // when resource is loaded function(gltf) { + gltf.scene.position.y = -1; scene.add(gltf.scene); gltf.animations; @@ -63,18 +68,50 @@ function init() { console.log('a fucking error lmao: ', error); } ); + + image.load('../paw.png', (texture) => { + pawTexture = texture; + image.load('../finger.png', (texture) => { + fingerTexture = texture; + const material = new THREE.SpriteMaterial({ map: texture }); + currentSprite = new THREE.Sprite(material); + currentSprite.position.set(1, -0.7, -1.5); + camera.add(currentSprite); + scene.add(camera); + + }); + }); + } function animate() { const delta = clock.getDelta(); if (controls.isLocked) { - if (keyMap['KeyW']) controls.moveForward(delta * 5); - if (keyMap['KeyS']) controls.moveForward(-delta * 5); - if (keyMap['KeyA']) controls.moveRight(-delta * 5); - if (keyMap['KeyD']) controls.moveRight(delta * 5); + if (keyMap['KeyW']) { + controls.moveForward(delta * 5); + } + if (keyMap['KeyS']) { + controls.moveForward(-delta * 5); + } + if (keyMap['KeyA']) { + controls.moveRight(-delta * 5); + } + if (keyMap['KeyD']) { + controls.moveRight(delta * 5); + } + if (keyMap['ShiftLeft']) { + if (currentSprite && fingerTexture && currentSprite.material.map !== fingerTexture) { + currentSprite.material.map = fingerTexture; + console.log("finger up"); + } + } else { + if (currentSprite && pawTexture && currentSprite.material.map !== pawTexture) { + currentSprite.material.map = pawTexture; + console.log("finger down"); + } + } } - renderer.render(scene, camera); } renderer.setAnimationLoop(animate);