118 lines
3.3 KiB
JavaScript
118 lines
3.3 KiB
JavaScript
import * as THREE from 'three';
|
|
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
|
|
import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
|
|
|
|
// Variables
|
|
const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#kennel'), });
|
|
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
|
|
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 keyMap = {}
|
|
|
|
// 3D Loaders.
|
|
const room = new GLTFLoader();
|
|
const image = new THREE.TextureLoader();
|
|
|
|
let pawTexture, fingerTexture, currentSprite;
|
|
|
|
init();
|
|
|
|
//Initialisation
|
|
function init() {
|
|
// Renderer
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
|
|
// Camera
|
|
camera.position.z = 5;
|
|
|
|
// Light
|
|
light.position.set(0.5, 1, 0.75);
|
|
scene.add(light);
|
|
|
|
// Scene
|
|
scene.background = new THREE.Color(0x000000);
|
|
|
|
// Controller
|
|
document.addEventListener('click', () => {
|
|
controls.lock();
|
|
});
|
|
|
|
const onDocumentKey = (e) => {
|
|
keyMap[e.code] = e.type === 'keydown';
|
|
};
|
|
document.addEventListener('keydown', onDocumentKey, false);
|
|
document.addEventListener('keyup', onDocumentKey, false);
|
|
|
|
room.load(
|
|
// url of file
|
|
'test2.gltf',
|
|
// when resource is loaded
|
|
function(gltf) {
|
|
gltf.scene.position.y = -1;
|
|
scene.add(gltf.scene);
|
|
|
|
gltf.animations;
|
|
gltf.scene;
|
|
gltf.scenes;
|
|
gltf.cameras;
|
|
gltf.asset;
|
|
},
|
|
//when loading is progressing
|
|
function(xhr) {
|
|
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
|
|
},
|
|
// when error
|
|
function(error) {
|
|
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['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);
|