3d_website/main.js

86 lines
1.9 KiB
JavaScript

/*
Author: Daniel Jones
IDE: VSCodium
Browsers tested: Firefox 124
Last change: 04/08/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);
camera.position.setZ(30);
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);
const lightHelper = new THREE.PointLightHelper(pointLight);
const gridHelper = new THREE.GridHelper(200, 50);
scene.add(gridHelper, lightHelper);
const controls = new OrbitControls(camera, renderer.domElement);
const geometry = new THREE.PlaneGeometry(100, 100, 100, 100);
const mirrorMaterial = new THREE.MeshBasicMaterial( { color: 0x111111, envMap: camera.renderTarget } );
const material = new THREE.MeshBasicMaterial( {color: 0xffffff, side: THREE.DoubleSide} );
const plane = new THREE.Mesh( geometry, mirrorMaterial );
plane.rotateX(200);
scene.add( plane );
const circleGeometry = new THREE.SphereGeometry(10, 10, 10, 10);
const sphere = new THREE.Mesh(circleGeometry, material);
sphere.position.y += 15
scene.add(sphere);
function getRandomInt(max) {
return Math.floor(Math.random() * max);
}
scene.background = "black";
function animate(){
requestAnimationFrame(animate);
renderer.render(scene, camera)
}
animate();