2024-04-09 02:40:12 +00:00
/ *
Author : Daniel Jones
IDE : VSCodium
2024-05-06 20:27:13 +00:00
Browsers tested : Firefox 125
2024-08-01 21:36:59 +00:00
Last change : 08 / 01 / 24
2024-04-09 02:40:12 +00:00
purpose : portfolio website to show to potential freelance customers / web developer positions
* /
2024-04-08 20:07:24 +00:00
import { PointLight } from 'three' ;
import './style.css' ;
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' ;
2024-02-15 20:59:21 +00:00
import * as THREE from 'three' ;
2024-07-27 22:45:35 +00:00
import { GLTFLoader } from 'three/examples/jsm/Addons.js' ;
2024-02-15 20:59:21 +00:00
2024-04-08 21:50:33 +00:00
2024-02-15 20:59:21 +00:00
const scene = new THREE . Scene ( ) ;
2024-04-08 21:50:33 +00:00
2024-02-15 20:59:21 +00:00
const camera = new THREE . PerspectiveCamera ( 75 , window . innerWidth / window . innerHeight , 0.1 , 1000 ) ;
const renderer = new THREE . WebGLRenderer ( {
canvas : document . querySelector ( '#bg' ) ,
} ) ;
renderer . setPixelRatio ( window . devicePixelRatio ) ;
renderer . setSize ( window . innerWidth , window . innerHeight ) ;
2024-04-12 01:47:34 +00:00
var zPos = 500 ;
camera . position . setZ ( zPos ) ;
camera . position . setY ( 20 ) ;
2024-02-15 20:59:21 +00:00
renderer . render ( scene , camera ) ;
2024-04-08 20:07:24 +00:00
2024-08-01 21:36:59 +00:00
//code to import GLTF file
let loadedModel ;
const cmpLoader = new GLTFLoader ( ) ;
cmpLoader . load ( './assets/models/Comp_and_Floppy/scene.gltf' , ( gltfScene ) => {
loadedModel = gltfScene ;
2024-07-27 22:45:35 +00:00
console . log ( "UwU whats this? My comupter model loaded! OwO" ) ;
2024-08-01 21:36:59 +00:00
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.
gltfScene . scene . position . y = 20 ;
gltfScene . scene . scale . set ( 10 , 10 , 10 ) ;
scene . add ( loadedModel . scene ) ;
2024-07-27 22:45:35 +00:00
}
) ;
2024-07-27 20:58:36 +00:00
2024-04-08 20:07:24 +00:00
const ambientLight = new THREE . AmbientLight ( 0xffffff ) ;
2024-05-08 19:22:18 +00:00
scene . add ( ambientLight ) ;
2024-04-08 20:10:16 +00:00
2024-05-06 20:35:29 +00:00
2024-05-12 00:59:23 +00:00
//background texture
2024-07-27 20:58:36 +00:00
const spaceTexture = new THREE . TextureLoader ( ) . load ( './assets/pics/galaxy.jpg' ) ;
2024-05-12 00:59:23 +00:00
spaceTexture . magFilter = THREE . NearestFilter ;
scene . background = spaceTexture ;
2024-05-06 20:35:29 +00:00
//turning off orbit controls and lighthelper. Not needed. Kept in code in case if I want to use it again.
//const lightHelper = new THREE.PointLightHelper(pointLight);
2024-05-06 20:22:57 +00:00
//const controls = new OrbitControls(camera, renderer.domElement);
2024-04-08 21:50:33 +00:00
2024-04-09 02:40:12 +00:00
2024-05-08 16:01:50 +00:00
//floor object that appears in the background
2024-07-27 20:58:36 +00:00
const floorTexture = new THREE . TextureLoader ( ) . load ( "./assets/pics/marble.jpg" ) ;
2024-04-10 03:51:27 +00:00
floorTexture . wrapT = THREE . RepeatWrapping ;
floorTexture . wrapS = THREE . RepeatWrapping ;
2024-05-12 00:59:23 +00:00
floorTexture . repeat . set ( 1 , 100 ) ;
const floorGeometry = new THREE . PlaneGeometry ( 100 , 10000 , 1000 , 1000 ) ;
2024-04-10 03:51:27 +00:00
const floorMaterial = new THREE . MeshStandardMaterial ( {
map : floorTexture ,
} )
const floor = new THREE . Mesh ( floorGeometry , floorMaterial ) ;
2024-04-12 01:47:34 +00:00
floor . rotateX ( Math . PI * - 0.5 ) ;
2024-04-10 03:51:27 +00:00
scene . add ( floor ) ;
2024-04-09 02:40:12 +00:00
2024-04-08 20:10:16 +00:00
2024-05-06 20:35:29 +00:00
//when the user scrolls, walk down the hallway.
2024-05-06 20:22:57 +00:00
function updateCamera ( ev ) {
2024-08-01 21:36:59 +00:00
2024-05-06 20:22:57 +00:00
let div1 = document . getElementById ( "div1" ) ;
2024-05-08 19:22:18 +00:00
camera . position . z = zPos - window . scrollY / 3 ;
2024-05-06 20:22:57 +00:00
}
window . addEventListener ( "scroll" , updateCamera ) ;
2024-05-06 20:35:29 +00:00
//animation loop every cycle.
2024-02-15 20:59:21 +00:00
function animate ( ) {
2024-08-01 21:36:59 +00:00
2024-02-15 20:59:21 +00:00
requestAnimationFrame ( animate ) ;
2024-04-12 01:47:34 +00:00
renderer . render ( scene , camera ) ;
2024-02-15 20:59:21 +00:00
}
2024-04-10 03:51:27 +00:00
animate ( ) ;