CJSatnarine/cjsatnarine.space
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed movement and added gltf
Some checks failed
Build / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
CJSatnarine
2025-10-10 19:37:58 -04:00
parent 133ba568d2
commit e60526ff19
3 changed files with 391 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
static/secrets/test.bin Normal file
View File

Binary file not shown.

324
static/secrets/test.gltf Normal file
View File

@@ -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"
}
]
}

99
static/secrets/woof.js
View File

@@ -1,45 +1,80 @@
import * as THREE from 'three'; 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 scene = new THREE.Scene();
//const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const clock = new THREE.Clock();
//camera.position.z = 5; const loader = new GLTFLoader();
let camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); const keyMap = {}
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer({ init();
canvas: document.querySelector('#kennel'),
});
renderer.setSize(window.innerWidth, window.innerHeight); //Initialisation
function init() {
// Renderer
renderer.setSize(window.innerWidth, window.innerHeight);
// Cube geometry stuff. // Camera
const geometry = new THREE.BoxGeometry(5, 1, 1); camera.position.z = 5;
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);
// Light stuff // Light
const light = new THREE.DirectionalLight(0xFFFFFF, 0.5); light.position.set(0.5, 1, 0.75);
light.position.x = 5; scene.add(light);
scene.add(light);
// Controller stuff // Scene
let clock = new THREE.Clock(); scene.background = new THREE.Color(0x000000);
let controls = new FirstPersonControls(camera, renderer.domElement);
controls.movementSpeed = 5; // Controller
controls.lookSpeed = 0.1; document.addEventListener('click', () => {
controls.lookVertical = false; 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() { 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.render(scene, camera);
} }
renderer.setAnimationLoop(animate); renderer.setAnimationLoop(animate);