/* Author: Daniel Jones IDE: VSCodium Browsers tested: Firefox 125 Last change: 05/08/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'; 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); //stl code to import stl 3d model const thinkerMaterial = new THREE.MeshPhysicalMaterial({ color: 'FFFFFF', metalness: 0.50, roughness: 0.1, opacity: 1.0, transparent: false, transmission: 0.99, clearcoat: 1.0, clearcoatRoughness: 0.25, }) const thinkerLoader = new STLLoader(); thinkerLoader.load( 'assets/models/thinker.stl', function (geometry) { const thinkerMesh = new THREE.Mesh(geometry, thinkerMaterial) scene.add(thinkerMesh) }, (xhr) => { console.log((xhr.loaded / xhr.total) * 100 + '% loaded') }, (error) => { console.log(error) } ) 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();