danjoredd/3d_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

switched to gltf format for models because of included textures. Loaded both textures and model. added assets folder to gitignore until gitea solution found or rehost.

Browse Source
This commit is contained in:
Icybear 2024-08-01 17:36:59 -04:00
parent 510ed219d4
commit 327b801dcf
3 changed files with 16 additions and 4002 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -23,3 +23,5 @@ dist-ssr
*.sln *.sln
*.sw? *.sw?
*.jpg *.jpg
# assets are too much of a hassle to get working in gitea due to filesize issues. Keeping ignored until gitea config fixed
assets

3988
assets/models/Comp_and_Floppy.obj
View File

File diff suppressed because it is too large Load Diff

26
main.js
View File

@ -2,14 +2,12 @@
Author: Daniel Jones Author: Daniel Jones
IDE: VSCodium IDE: VSCodium
Browsers tested: Firefox 125 Browsers tested: Firefox 125
Last change: 07/27/24 Last change: 08/01/24
purpose: portfolio website to show to potential freelance customers/web developer positions purpose: portfolio website to show to potential freelance customers/web developer positions
*/ */
import { PointLight } from 'three'; import { PointLight } from 'three';
import { OBJLoader } from 'three/examples/jsm/Addons.js';
import { STLLoader } from 'three/examples/jsm/Addons.js';
import './style.css'; import './style.css';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'; import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import * as THREE from 'three'; import * as THREE from 'three';
@ -39,17 +37,17 @@ renderer.render(scene, camera);
//code to import OBJfile //code to import GLTF file
let loadedModel;
const objCmpLoader = new OBJLoader(); const cmpLoader = new GLTFLoader();
objCmpLoader.load('./assets/models/Comp_and_Floppy.obj',(objScene)=>{ cmpLoader.load('./assets/models/Comp_and_Floppy/scene.gltf',(gltfScene)=>{
let loadedModel = objScene; loadedModel = gltfScene;
console.log("UwU whats this? My comupter model loaded! OwO"); console.log("UwU whats this? My comupter model loaded! OwO");
objScene.position.z = 50; //for reference tomorrow when I work on this again...objScene is the actual object that you set attributes to. Mess with that. gltfScene.scene.position.z = 50; //for reference tomorrow when I work on this again...gltfScene is the actual object that you set attributes to. Mess with that.
objScene.position.y = 20; gltfScene.scene.position.y = 20;
objScene.scale.set(10,10,10); gltfScene.scene.scale.set(10,10,10);
objScene.rotateOnAxis = 90;
scene.add(loadedModel); scene.add(loadedModel.scene);
} }
); );
@ -89,6 +87,7 @@ scene.add(floor);
//when the user scrolls, walk down the hallway. //when the user scrolls, walk down the hallway.
function updateCamera(ev){ function updateCamera(ev){
let div1 = document.getElementById("div1"); let div1 = document.getElementById("div1");
camera.position.z = zPos - window.scrollY / 3; camera.position.z = zPos - window.scrollY / 3;
} }
@ -98,6 +97,7 @@ window.addEventListener("scroll", updateCamera);
//animation loop every cycle. //animation loop every cycle.
function animate(){ function animate(){
requestAnimationFrame(animate); requestAnimationFrame(animate);
renderer.render(scene, camera); renderer.render(scene, camera);
} }