81 lines
2.2 KiB
JavaScript
81 lines
2.2 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 loader = new GLTFLoader();
|
|
const keyMap = {}
|
|
|
|
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);
|
|
|
|
// GLFT Loader
|
|
loader.load(
|
|
// url of file
|
|
'../test.gltf',
|
|
// when resource is loaded
|
|
function(gltf) {
|
|
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);
|
|
}
|
|
);
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
renderer.render(scene, camera);
|
|
}
|
|
renderer.setAnimationLoop(animate);
|