/* Author: Daniel Jones IDE: VSCodium Browsers tested: Firefox 125 Last change: 04/24/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'; 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); const pointLight = new PointLight(0xffffff, 150); const ambientLight = new THREE.AmbientLight(0xffffff); scene.add(ambientLight, pointLight); pointLight.position.set(10, 10, 10); //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("marble.jpg"); floorTexture.wrapT = THREE.RepeatWrapping; floorTexture.wrapS = THREE.RepeatWrapping; floorTexture.repeat.set(1, 10); const floorGeometry = new THREE.PlaneGeometry(100, 1000, 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 = 10 - window.scrollY; } window.addEventListener("scroll", updateCamera); //animation loop every cycle. function animate(){ requestAnimationFrame(animate); renderer.render(scene, camera); } animate();