/* Author: Daniel Jones IDE: VSCodium Browsers tested: Firefox 125 Last change: 07/27/24 purpose: portfolio website to show to potential freelance customers/web developer positions */ import { PointLight } from 'three'; import { OBJLoader } from 'three/examples/jsm/Addons.js'; import { STLLoader } from 'three/examples/jsm/Addons.js'; 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 OBJfile const objCmpLoader = new OBJLoader(); objCmpLoader.load('./assets/models/Comp_and_Floppy.obj',(objScene)=>{ let loadedModel = objScene; 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. objScene.position.y = 20; objScene.scale.set(10,10,10); objScene.rotateOnAxis = 90; scene.add(loadedModel); } ); const ambientLight = new THREE.AmbientLight(0xffffff); scene.add(ambientLight); //background texture const spaceTexture = new THREE.TextureLoader().load('./assets/pics/galaxy.jpg'); spaceTexture.magFilter = THREE.NearestFilter; 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(){ requestAnimationFrame(animate); renderer.render(scene, camera); } animate();