136 lines
3.5 KiB
JavaScript
136 lines
3.5 KiB
JavaScript
/*
|
|
Author: Daniel Jones
|
|
IDE: Webstorm
|
|
Browsers tested: Firefox 125
|
|
Last change: 09/5/24
|
|
purpose: portfolio website to show to potential freelance customers/web developer positions
|
|
*/
|
|
|
|
|
|
import { PointLight } from 'three';
|
|
import './style.css';
|
|
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
|
|
import * as THREE from 'three';
|
|
import { GLTFLoader } from 'three/examples/jsm/Addons.js';
|
|
|
|
|
|
|
|
const scene = new THREE.Scene();
|
|
|
|
|
|
|
|
|
|
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);
|
|
var zPos = 500;
|
|
camera.position.setZ(zPos);
|
|
camera.position.setY(20);
|
|
|
|
renderer.render(scene, camera);
|
|
|
|
|
|
|
|
|
|
//code to import GLTF file
|
|
let loadedCmpModel; // model for PC
|
|
const cmpLoader = new GLTFLoader();
|
|
cmpLoader.load('./assets/models/Comp_and_Floppy/scene.gltf',(gltfScene)=>{
|
|
loadedCmpModel = gltfScene;
|
|
console.log("UwU whats this? My computer model loaded! OwO");
|
|
gltfScene.scene.position.z = 250;
|
|
gltfScene.scene.position.y = 15;
|
|
gltfScene.scene.scale.set(10,10,10);
|
|
|
|
scene.add(loadedCmpModel.scene);
|
|
|
|
}
|
|
);
|
|
|
|
let loadedSchlModel; // model for PC
|
|
const SchlLoader = new GLTFLoader();
|
|
SchlLoader.load('./assets/models/school/Schoolhouse.glb',(gltfScene)=>{
|
|
loadedSchlModel = gltfScene;
|
|
gltfScene.scene.position.z = 50;
|
|
gltfScene.scene.position.y = 5;
|
|
gltfScene.scene.scale.set(3,3,3);
|
|
|
|
scene.add(loadedSchlModel.scene);
|
|
|
|
}
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
let loadedManModel; // model for PC
|
|
const ManLoader = new GLTFLoader();
|
|
ManLoader.load('./assets/models/businessman/scene.gltf',(gltfScene)=>{
|
|
loadedManModel = gltfScene;
|
|
gltfScene.scene.position.z = 50;
|
|
gltfScene.scene.position.y = 5;
|
|
gltfScene.scene.scale.set(10,10,10);
|
|
|
|
scene.add(loadedManModel.scene);
|
|
|
|
}
|
|
);
|
|
|
|
|
|
|
|
const ambientLight = new THREE.AmbientLight(0xffffff);
|
|
scene.add(ambientLight);
|
|
|
|
|
|
|
|
|
|
|
|
//background texture
|
|
const spaceTexture = new THREE.TextureLoader().load('./assets/pics/galaxy.jpg');
|
|
spaceTexture.minFilter = THREE.LinearFilter;
|
|
scene.background = spaceTexture;
|
|
|
|
//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);
|
|
//const controls = new OrbitControls(camera, renderer.domElement);
|
|
|
|
|
|
//floor object that appears in the background
|
|
const floorTexture = new THREE.TextureLoader().load("./assets/pics/marble.jpg");
|
|
floorTexture.wrapT = THREE.RepeatWrapping;
|
|
floorTexture.wrapS = THREE.RepeatWrapping;
|
|
floorTexture.repeat.set(1, 100);
|
|
const floorGeometry = new THREE.PlaneGeometry(100, 10000, 1000, 1000);
|
|
const floorMaterial = new THREE.MeshStandardMaterial({
|
|
map: floorTexture,
|
|
})
|
|
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
|
|
floor.rotateX(Math.PI * -0.5);
|
|
scene.add(floor);
|
|
|
|
|
|
//when the user scrolls, walk down the hallway.
|
|
function updateCamera(ev){
|
|
|
|
let div1 = document.getElementById("div1");
|
|
camera.position.z = zPos - window.scrollY / 3;
|
|
}
|
|
window.addEventListener("scroll", updateCamera);
|
|
|
|
|
|
|
|
//animation loop every cycle.
|
|
function animate(){
|
|
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
requestAnimationFrame(animate);
|
|
renderer.render(scene, camera);
|
|
}
|
|
animate();
|