diff --git a/static/secrets/test.bin b/static/secrets/test.bin new file mode 100644 index 0000000..1b8e802 Binary files /dev/null and b/static/secrets/test.bin differ diff --git a/static/secrets/test.gltf b/static/secrets/test.gltf new file mode 100644 index 0000000..c37d379 --- /dev/null +++ b/static/secrets/test.gltf @@ -0,0 +1,324 @@ +{ + "asset":{ + "generator":"Khronos glTF Blender I/O v4.5.48", + "version":"2.0" + }, + "scene":0, + "scenes":[ + { + "name":"Scene", + "nodes":[ + 0, + 1, + 2 + ] + } + ], + "nodes":[ + { + "mesh":0, + "name":"Plane", + "scale":[ + 25, + 25, + 25 + ] + }, + { + "mesh":1, + "name":"Cube", + "translation":[ + 0, + 1, + 2.458730936050415 + ] + }, + { + "mesh":2, + "name":"Suzanne", + "rotation":[ + 0.08822915703058243, + -0.27138662338256836, + 0.0949493795633316, + 0.9537031054496765 + ], + "translation":[ + 6.071174144744873, + 2.417121171951294, + 0 + ] + } + ], + "materials":[ + { + "doubleSided":true, + "name":"Ground", + "pbrMetallicRoughness":{ + "baseColorFactor":[ + 0.37110745906829834, + 0.39915257692337036, + 0.364591121673584, + 1 + ], + "metallicFactor":0, + "roughnessFactor":0.5 + } + }, + { + "doubleSided":true, + "name":"Cube", + "pbrMetallicRoughness":{ + "baseColorFactor":[ + 0.8000937700271606, + 0.00807161070406437, + 0.025698840618133545, + 1 + ], + "metallicFactor":0, + "roughnessFactor":0.5 + } + }, + { + "doubleSided":true, + "name":"Monkey", + "pbrMetallicRoughness":{ + "baseColorFactor":[ + 0.12672929465770721, + 0.03563183546066284, + 0.8001565933227539, + 1 + ], + "metallicFactor":0, + "roughnessFactor":0.5 + } + } + ], + "meshes":[ + { + "name":"Plane", + "primitives":[ + { + "attributes":{ + "POSITION":0, + "NORMAL":1, + "TEXCOORD_0":2 + }, + "indices":3, + "material":0 + } + ] + }, + { + "name":"Cube.001", + "primitives":[ + { + "attributes":{ + "POSITION":4, + "NORMAL":5, + "TEXCOORD_0":6 + }, + "indices":7, + "material":1 + } + ] + }, + { + "name":"Suzanne", + "primitives":[ + { + "attributes":{ + "POSITION":8, + "NORMAL":9, + "TEXCOORD_0":10 + }, + "indices":11, + "material":2 + } + ] + } + ], + "accessors":[ + { + "bufferView":0, + "componentType":5126, + "count":4, + "max":[ + 1, + 0, + 1 + ], + "min":[ + -1, + 0, + -1 + ], + "type":"VEC3" + }, + { + "bufferView":1, + "componentType":5126, + "count":4, + "type":"VEC3" + }, + { + "bufferView":2, + "componentType":5126, + "count":4, + "type":"VEC2" + }, + { + "bufferView":3, + "componentType":5123, + "count":6, + "type":"SCALAR" + }, + { + "bufferView":4, + "componentType":5126, + "count":24, + "max":[ + 1, + 1, + 1 + ], + "min":[ + -1, + -1, + -1 + ], + "type":"VEC3" + }, + { + "bufferView":5, + "componentType":5126, + "count":24, + "type":"VEC3" + }, + { + "bufferView":6, + "componentType":5126, + "count":24, + "type":"VEC2" + }, + { + "bufferView":7, + "componentType":5123, + "count":36, + "type":"SCALAR" + }, + { + "bufferView":8, + "componentType":5126, + "count":1966, + "max":[ + 1.3671875, + 0.984375, + 0.8515625 + ], + "min":[ + -1.3671875, + -0.984375, + -0.8515625 + ], + "type":"VEC3" + }, + { + "bufferView":9, + "componentType":5126, + "count":1966, + "type":"VEC3" + }, + { + "bufferView":10, + "componentType":5126, + "count":1966, + "type":"VEC2" + }, + { + "bufferView":11, + "componentType":5123, + "count":2904, + "type":"SCALAR" + } + ], + "bufferViews":[ + { + "buffer":0, + "byteLength":48, + "byteOffset":0, + "target":34962 + }, + { + "buffer":0, + "byteLength":48, + "byteOffset":48, + "target":34962 + }, + { + "buffer":0, + "byteLength":32, + "byteOffset":96, + "target":34962 + }, + { + "buffer":0, + "byteLength":12, + "byteOffset":128, + "target":34963 + }, + { + "buffer":0, + "byteLength":288, + "byteOffset":140, + "target":34962 + }, + { + "buffer":0, + "byteLength":288, + "byteOffset":428, + "target":34962 + }, + { + "buffer":0, + "byteLength":192, + "byteOffset":716, + "target":34962 + }, + { + "buffer":0, + "byteLength":72, + "byteOffset":908, + "target":34963 + }, + { + "buffer":0, + "byteLength":23592, + "byteOffset":980, + "target":34962 + }, + { + "buffer":0, + "byteLength":23592, + "byteOffset":24572, + "target":34962 + }, + { + "buffer":0, + "byteLength":15728, + "byteOffset":48164, + "target":34962 + }, + { + "buffer":0, + "byteLength":5808, + "byteOffset":63892, + "target":34963 + } + ], + "buffers":[ + { + "byteLength":69700, + "uri":"test.bin" + } + ] +} diff --git a/static/secrets/woof.js b/static/secrets/woof.js index 03b749e..cb90432 100644 --- a/static/secrets/woof.js +++ b/static/secrets/woof.js @@ -1,45 +1,80 @@ import * as THREE from 'three'; -import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js'; +import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; +import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'; -// Setup stuff +// 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 camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); -//camera.position.z = 5; -let camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); -camera.position.z = 5; +const clock = new THREE.Clock(); +const loader = new GLTFLoader(); +const keyMap = {} -const renderer = new THREE.WebGLRenderer({ - canvas: document.querySelector('#kennel'), -}); +init(); -renderer.setSize(window.innerWidth, window.innerHeight); +//Initialisation +function init() { + // Renderer + renderer.setSize(window.innerWidth, window.innerHeight); -// Cube geometry stuff. -const geometry = new THREE.BoxGeometry(5, 1, 1); -const material = new THREE.MeshBasicMaterial({ color: 0x962FFE }); -const material2 = new THREE.MeshBasicMaterial({ color: 0x00FF00 }); -const cube = new THREE.Mesh(geometry, material); -const cube2 = new THREE.Mesh(geometry, material2); -cube2.position.x = 4; -cube2.position.z = 7; -cube2.rotateX = 35; -scene.add(cube); -scene.add(cube2); + // Camera + camera.position.z = 5; -// Light stuff -const light = new THREE.DirectionalLight(0xFFFFFF, 0.5); -light.position.x = 5; -scene.add(light); + // Light + light.position.set(0.5, 1, 0.75); + scene.add(light); -// Controller stuff -let clock = new THREE.Clock(); -let controls = new FirstPersonControls(camera, renderer.domElement); -controls.movementSpeed = 5; -controls.lookSpeed = 0.1; -controls.lookVertical = false; + // 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() { - controls.update(clock.getDelta()); + 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);