3d_website/main.js

/*
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();