diff --git a/main.js b/main.js index 5b43dd4..240db4e 100644 --- a/main.js +++ b/main.js @@ -1,9 +1,25 @@ import './style.css'; import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' -import { createAmbientLight, createPointLight, createRectLight } from './src/lights'; -import { createSphere, createPlane, createBackground, createTorus } from './src/objects'; +import { + createAmbientLight, + createPointLight, + createRectLight +} from './src/lights'; +import { + createSphere, + createPlane, + createBackground, + createTorus, + createChildSphere, + createPatentObject, + createOctahedron, + createTorusKnot, + createCone, + createIcosahedron +} from './src/objects'; import { movments } from './src/movement'; +import * as TWEEN from '@tweenjs/tween.js'; // SCENE export const scene = new THREE.Scene(); @@ -23,7 +39,7 @@ renderer.setPixelRatio(window.devicePixelRatio, 2); // CAMERA export const camera = new THREE.PerspectiveCamera(45, sizes.width / sizes.height, 0.1, 1000); -camera.position.set(-23.5, -23.5, -23.5); // Sphere1 Location +camera.position.set(-23.46, -23.46, -23.46); // Sphere1 Location // RESIZING window.addEventListener('resize', onWindowResize, false); @@ -39,65 +55,192 @@ function onWindowResize() { renderer.setPixelRatio(window.devicePixelRatio, 2); } -// OBJECTS +// SCENE OBJECTS +// Foundation +scene.background = createBackground(); const plane = createPlane(1000, 1000, 100, 100, 0x292929, 0.5, 0.5, '/images/plane-hightmap.png', 110, -55, { x: 0, y: -5, z: 0 }, false); const planeGrid = createPlane(1000, 1000, 100, 100, 0x290CFF, 0, 0, '/images/plane-hightmap.png', 110, -55, { x: 0, y: -5, z: 0 }, true); const planeFlat = createPlane(1000, 1000, 1, 1, 0x000000, 0, 0, '', 0, 0, { x: 0, y: -59.5, z: 0 }, false); const planeFlatGrid = createPlane(1000, 1000, 100, 100, 0xFF019A, 0, 0, '', 0, 0, { x: -59.5, y: -59, z: 0 }, true); -const sphere1 = createSphere("Sphere 1", 0.5, 0xFF10F0, .4, .5, './images/sphere-normal-map.jpg', { x: -20, y: -20, z: -20 }); -const sphere2 = createSphere("Sphere 2", 0.5, 0x39FF14, .4, .5, './images/sphere-normal-map.jpg', { x: -180, y: 40, z: -30 }); -const sphere3 = createSphere("Sphere 3", 0.5, 0xFF3131, .4, .5, './images/sphere-normal-map.jpg', { x: -200, y: 10, z: 27 }); -const sphere4 = createSphere("Sphere 4", 0.5, 0x1F51FF, .4, .5, './images/sphere-normal-map.jpg', { x: 96, y: -30, z: 186 }); -const sphere5 = createSphere("Sphere 5", 0.5, 0x9D00FF, .4, .5, './images/sphere-normal-map.jpg', { x: 277, y: -38, z: -205 }); -const sphere6 = createSphere("Sphere 6", 0.5, 0xFFFF00, .4, .5, './images/sphere-normal-map.jpg', { x: -209, y: -43, z: -253 }); const torus = createTorus("Torus", 35, 2, 20, 64, 0xfff000, 0.5, 0.5, { x: 108, y: 40, z: 38 }); - -// LIGHTS const aLight1 = createAmbientLight(0xffffff, .6); // const rLight1 = createRectLight(0x9700CC, 1000, 1000, 1, { x: 0, y: -59.9, z: 0 }, { x: 0, y: -100, z: 0 }); // Not needed with PlaneFlat. Might replace const torusLight = createPointLight(0xfff000, 2.8, 85, 2.5, { x: 112, y: 51, z: 37 }); -// Lights for shapes -const pLight1 = createPointLight(0xffffff, 3, 5, 1.5, { x: -22, y: -20, z: -20.2 }); -const pLight2 = createPointLight(0xffffff, 1.5, 2.5, 1, { x: -180, y: 41, z: -31 }); -const pLight3 = createPointLight(0xffffff, 2, 7, 1, { x: -201.5, y: 9, z: 26 }); -const pLight4 = createPointLight(0xffffff, 3, 5, 1, { x: 96.5, y: -31, z: 186.5 }); -const pLight5 = createPointLight(0xffffff, 1.5, 4, 1, { x: 278.5, y: -38.5, z: -206 }); -const pLight6 = createPointLight(0xffffff, 1, 3, 1.5, { x: -210, y: -42, z: -254 }); - -// ADD TO SCENE -scene.background = createBackground(); scene.add(plane); scene.add(planeGrid); scene.add(planeFlat); scene.add(planeFlatGrid); scene.add(torus); +scene.add(aLight1); +// scene.add(rLight1); // Not needed with PlaneFlat. Might replace +scene.add(torusLight); -scene.add(sphere1); -scene.add(sphere2); -scene.add(sphere3); -scene.add(sphere4); -scene.add(sphere5); -scene.add(sphere6); - +// Slide 1 object(s) +const pLight1 = createPointLight(0xffffff, 3, 6, 1, { x: -23.5, y: -20, z: -20 }); +const slide1Sphere = createSphere("Sphere 1", 0.5, 0xFF10F0, .4, .5, './images/sphere-normal-map.jpg', { x: -20, y: -20, z: -20 }); +const slide1Child1 = createChildSphere("Sphere Child 1", 0.1, 0xFF3131, .4, .5, './images/sphere-normal-map.jpg'); +const slide1Child1Parent = createPatentObject(slide1Sphere.position); +const slide1Child2 = createChildSphere("Sphere Child 2", 0.2, 0x39FF14, .4, .5, './images/sphere-normal-map.jpg'); +const slide1Child2Parent = createPatentObject(slide1Sphere.position); +const slide1Child3 = createChildSphere("Sphere Child 3", 0.2, 0x1F51FF, .4, .5, './images/sphere-normal-map.jpg'); +const slide1Child3Parent = createPatentObject(slide1Sphere.position); scene.add(pLight1); +scene.add(slide1Sphere); +scene.add(slide1Child1Parent); +scene.add(slide1Child2Parent); +scene.add(slide1Child3Parent); +slide1Child1Parent.add(slide1Child1); +slide1Child2Parent.add(slide1Child2); +slide1Child3Parent.add(slide1Child3); +slide1Child1.position.x = 1; +slide1Child2.position.z = -1.5; // off center according to Z rather than X +slide1Child3.position.x = -2; + +// Slide 2 object(s) +const pLight2 = createPointLight(0xffffff, 1.5, 5, 1, { x: -182, y: 42, z: -32 }); +const slide2Octahedron = createOctahedron("Octahedron 1", 1.3, 0, 0x000000, 0, 0, '', { x: -180, y: 40, z: -30 }, false); +const slide2OctahedronWire = createOctahedron("Octahedron 1 Wire", 1.3, 0, 0xFF019A, 0, 0, '', { x: -180, y: 40, z: -30 }, true); scene.add(pLight2); +scene.add(slide2Octahedron); +scene.add(slide2OctahedronWire); + +// Slide 3 object(s) +const pLight3 = createPointLight(0xffffff, 2, 8, 1.5, { x: -201, y: 11.4, z: 26.8 }); +const slide3Cone1 = createCone("Cone 3-1", 1, 1.4, 4, 1, 0x00000, .4, .5, './images/sphere-normal-map.jpg', false); +const slide3Cone1Wire = createCone("Cone 3-1 Wire", 1, 1.4, 4, 1, 0xFF019A, 0, 0, './images/sphere-normal-map.jpg', true); +const slide3Cone2 = createCone("Cone 3-2", 1, 1.4, 4, 1, 0x00000, .4, .5, './images/sphere-normal-map.jpg', false); +const slide3Cone2Wire = createCone("Cone 3-2 Wire", 1, 1.4, 4, 1, 0xFF019A, 0, 0, './images/sphere-normal-map.jpg', true); +slide3Cone1.position.set(-200, 10.8, 27); +slide3Cone2.position.set(-200, 9.2, 27); +slide3Cone2.rotation.x = (Math.PI); +slide3Cone1.add(slide3Cone1Wire); +slide3Cone2.add(slide3Cone2Wire); +scene.add(slide3Cone1); +scene.add(slide3Cone2); scene.add(pLight3); + +// Slide 3 animation using Tween +const slide3Cone1Tween1 = new TWEEN.Tween({ y: 10.8, yRotation: 0 }) + .to({ y: 11.6, yRotation: Math.PI }, 2000) + .onUpdate((cords) => { + slide3Cone1.position.y = cords.y; + slide3Cone1.rotation.y = cords.yRotation; + }) + .easing(TWEEN.Easing.Quadratic.InOut) + .delay(500); +const slide3Cone1Tween2 = new TWEEN.Tween({ y: 11.6, yRotation: Math.PI }) + .to({ y: 10.8, yRotation: Math.PI * 2 }, 2000) + .onUpdate((cords) => { + slide3Cone1.position.y = cords.y; + slide3Cone1.rotation.y = cords.yRotation; + }) + .easing(TWEEN.Easing.Quadratic.InOut); +slide3Cone1Tween1.chain(slide3Cone1Tween2); +slide3Cone1Tween2.chain(slide3Cone1Tween1); +slide3Cone1Tween1.start(); +// Slide 3 animation using Tween +const slide3Cone2Tween1 = new TWEEN.Tween({ y: 9.2, yRotation: 0 }) + .to({ y: 8.6, yRotation: Math.PI }, 2000) + .onUpdate((cords) => { + slide3Cone2.position.y = cords.y; + slide3Cone2.rotation.y = cords.yRotation; + }) + .easing(TWEEN.Easing.Quadratic.InOut) + .delay(500); +const slide3Cone2Tween2 = new TWEEN.Tween({ y: 8.6, yRotation: Math.PI }) + .to({ y: 9.2, yRotation: Math.PI * 2 }, 2000) + .onUpdate((cords) => { + slide3Cone2.position.y = cords.y; + slide3Cone2.rotation.y = cords.yRotation; + }) + .easing(TWEEN.Easing.Quadratic.InOut); +slide3Cone2Tween1.chain(slide3Cone2Tween2); +slide3Cone2Tween2.chain(slide3Cone2Tween1); +slide3Cone2Tween1.start(); + +// Slide 4 object(s) +const pLight4 = createPointLight(0xffffff, 2, 4.5, 1, { x: 93, y: -30, z: 187 }); +const torusKnot = createTorusKnot("TorusKnot", 1, .2, 60, 12, 5, 4, 0x1F51FF, .4, .5, './images/sphere-normal-map.jpg', { x: 96, y: -30, z: 186 }); +let scalePerFrame = 0.003; // scale the capsule up and down scene.add(pLight4); +scene.add(torusKnot); + +// Slide 5 object(s) +const pLight5 = createPointLight(0xffffff, 1, 10, 1, { x: 279, y: -38, z: -207.5 }); +const slide5Icosahedron = createIcosahedron("Icosahedron 1", 1, 0x9D00FF, .4, .5, './images/sphere-normal-map.jpg', { x: 277, y: -38, z: -205 }, false); +const slide5IcosahedronLeft = createIcosahedron("Icosahedron left", .4, 0x1F51FF, .4, .5, './images/sphere-normal-map.jpg', { x: 279, y: -38, z: -203 }, false); +const slide5IcosahedronRight = createIcosahedron("Icosahedron right", .4, 0x1F51FF, .4, .5, './images/sphere-normal-map.jpg', { x: 275, y: -38, z: -207 }, false); scene.add(pLight5); -scene.add(pLight6); +scene.add(slide5Icosahedron); +scene.add(slide5IcosahedronRight); +scene.add(slide5IcosahedronLeft); -scene.add(aLight1); -// scene.add(rLight1); // Not needed with PlaneFlat. Might replace -scene.add(torusLight); +// Slide 6 object(s) +const pLight6 = createPointLight(0xffffff, 1, 4, 1.5, { x: -209, y: -43, z: -253 }); +const slide6ConeParent = createPatentObject({ x: -209, y: -43, z: -253 }); +const slide6Cone1 = createCone("Cone 1", .5, 1.5, 6, 1, 0xFFFF00, .4, .5, './images/sphere-normal-map.jpg', false); +const slide6Cone2 = createCone("Cone 2", .5, 1.5, 6, 1, 0x9D00FF, .4, .5, './images/sphere-normal-map.jpg', false); +const slide6Cone3 = createCone("Cone 3", .5, 1.5, 6, 1, 0xFF3131, .4, .5, './images/sphere-normal-map.jpg', false); +const slide6Cone4 = createCone("Cone 4", .5, 1.5, 6, 1, 0x1F51FF, .4, .5, './images/sphere-normal-map.jpg', false); +slide6ConeParent.add(slide6Cone1); +slide6ConeParent.add(slide6Cone2); +slide6ConeParent.add(slide6Cone3); +slide6ConeParent.add(slide6Cone4); +slide6Cone1.position.y = -1.5; +slide6Cone2.position.y = 1.5; +slide6Cone2.rotation.x = (Math.PI); +slide6Cone3.position.z = 1.5; +slide6Cone3.rotation.x = (Math.PI / -2); +slide6Cone4.position.z = -1.5; +slide6Cone4.rotation.x = (Math.PI / 2); +scene.add(pLight6); +scene.add(slide6ConeParent); // MOVEMENTS const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; -movments(camera, controls, sphere1, sphere2, sphere3, sphere4, sphere5, sphere6); - +movments(camera, controls, slide1Sphere, slide2Octahedron, slide3Cone1, torusKnot, slide5Icosahedron, slide6ConeParent); // ANIMATE LOOP -function animate() { +function animate(t) { + // Slide 1 Animation + slide1Sphere.rotation.y += 0.005; + slide1Child1.rotation.y += -0.1; + slide1Child2.rotation.y += -0.01; + slide1Child3.rotation.z += 0.01; + slide1Child1Parent.rotation.z += -.01; + slide1Child1Parent.rotation.x += .01; + slide1Child2Parent.rotation.y += .008; + slide1Child2Parent.rotation.z += .009; + slide1Child3Parent.rotation.y += -.006; + + // Slide 2 Animation + slide2Octahedron.rotation.y = Math.sin(Date.now() * 0.001) * Math.PI * 0.5; + slide2OctahedronWire.rotation.y = Math.sin(Date.now() * 0.001) * Math.PI * 0.5; + + // Slide 3 Animation + // Slide 3 uses TWEEN for the animation. Check the Slide 3 object(s) above for animation code. + + // Slide 4 Animation + torusKnot.rotation.z += -0.01; + torusKnot.scale.y += scalePerFrame; + torusKnot.scale.x += scalePerFrame; + torusKnot.scale.z += scalePerFrame; + if (torusKnot.scale.y >= 1.3) scalePerFrame = -0.003; // if too big, scale down + if (torusKnot.scale.y <= 0.9) scalePerFrame = 0.003; // if too small, scale up + + // Slide 5 Animation + slide5Icosahedron.rotation.z += .01 + slide5IcosahedronLeft.rotation.y += .015 + slide5IcosahedronRight.rotation.y += -.015 + + // Slide 6 Animation + slide6ConeParent.rotation.x += .005; + slide6ConeParent.rotation.y += .005; + slide6ConeParent.rotation.z += .005; + + // Main animation loop + TWEEN.update(t); renderer.render(scene, camera); controls.update(); requestAnimationFrame(animate); @@ -117,10 +260,10 @@ function lightDebugHelper(light1, light2, light3) { scene.add(lightHelper3); // GUI interface - const lightFolder1 = gui.addFolder('Light 3'); + const lightFolder1 = gui.addFolder('Light 4'); const light1Color = { color: 0xffffff }; lightFolder1.add(light1, 'intensity').min(0).max(10).step(0.01); - lightFolder1.add(light1, 'distance').min(0).max(1000).step(0.5); + lightFolder1.add(light1, 'distance').min(0).max(7).step(0.5); lightFolder1.add(light1, 'decay').min(1).max(10).step(0.5); lightFolder1.add(light1.position, 'x').min(-1000).max(1000).step(0.1); lightFolder1.add(light1.position, 'y').min(-1000).max(1000).step(0.1); @@ -158,17 +301,16 @@ function lightDebugHelper(light1, light2, light3) { console.log("y " + camera.position.y); console.log("z " + camera.position.z); }; -}; -// Testing location finder -window.addEventListener("click", clicking, false); -function clicking() { - console.log("x " + camera.position.x); - console.log("y " + camera.position.y); - console.log("z " + camera.position.z); + // Testing location finder + window.addEventListener("click", clicking, false); + function clicking() { + console.log("x " + camera.position.x); + console.log("y " + camera.position.y); + console.log("z " + camera.position.z); + }; }; - -// lightDebugHelper(pLight3, pLight5, pLight6); // Comment/Uncomment to toggle debug mode +// lightDebugHelper(pLight4, pLight5, pLight6); // Comment/Uncomment to toggle debug mode // DEBUG ** DEVELOPMENT USE ONLY ** DEBUG // animate(); diff --git a/package-lock.json b/package-lock.json index c3f9240..64cd931 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "portfolio", "version": "0.0.0", "dependencies": { + "@tweenjs/tween.js": "^18.6.4", "dat.gui": "^0.7.9", "gsap": "^3.10.4", "three": "^0.142.0" @@ -16,6 +17,11 @@ "vite": "^2.9.9" } }, + "node_modules/@tweenjs/tween.js": { + "version": "18.6.4", + "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-18.6.4.tgz", + "integrity": "sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ==" + }, "node_modules/dat.gui": { "version": "0.7.9", "resolved": "https://registry.npmjs.org/dat.gui/-/dat.gui-0.7.9.tgz", @@ -570,6 +576,11 @@ } }, "dependencies": { + "@tweenjs/tween.js": { + "version": "18.6.4", + "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-18.6.4.tgz", + "integrity": "sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ==" + }, "dat.gui": { "version": "0.7.9", "resolved": "https://registry.npmjs.org/dat.gui/-/dat.gui-0.7.9.tgz", diff --git a/package.json b/package.json index cb99247..e90be94 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "vite": "^2.9.9" }, "dependencies": { + "@tweenjs/tween.js": "^18.6.4", "dat.gui": "^0.7.9", "gsap": "^3.10.4", "three": "^0.142.0" diff --git a/src/movement.js b/src/movement.js index c779c52..156c442 100644 --- a/src/movement.js +++ b/src/movement.js @@ -30,7 +30,8 @@ export function movments(camera, controls, sphere1, sphere2, sphere3, sphere4, s }; function moveToSlide3() { - move(sphere3, { x: -30, y: 0, z: -90 }, 6, "slide-3"); + // The `targetPos` need to be custom and static here here because the target is moving will mess up the camera location + move({position: { x: -200, y: 10, z: 27 }}, { x: -30, y: 0, z: -90 }, 6, "slide-3"); slideIndex = 3; document.getElementById("btn-3").style.backgroundColor = "purple"; }; @@ -42,7 +43,7 @@ export function movments(camera, controls, sphere1, sphere2, sphere3, sphere4, s }; function moveToSlide5() { - move(sphere5, { x: 30, y: 40, z: 0 }, 6, "slide-5"); + move(sphere5, { x: -203, y: 0, z: 275 }, 6, "slide-5"); slideIndex = 5; document.getElementById("btn-5").style.backgroundColor = "purple"; }; @@ -148,10 +149,11 @@ export function movments(camera, controls, sphere1, sphere2, sphere3, sphere4, s duration: 4 }) .eventCallback("onComplete", function () { - // Temp fix to having slides overlap when changing too quickly. + // Temp fix to having slides overlap when changing too quickly. + // TODO: Ensure slides ONLY show when camera stops moving. hideSlidesDisplay(); // Show only the current slide when movement stops. - document.getElementById(currentSlide).style.display = 'block'; + // document.getElementById(currentSlide).style.display = 'block'; // TEMP }); }; diff --git a/src/objects.js b/src/objects.js index b47cf88..f5a6b55 100644 --- a/src/objects.js +++ b/src/objects.js @@ -2,7 +2,7 @@ import * as THREE from 'three'; const textureLoader = new THREE.TextureLoader(); -/** Creates a Sphere Object3D with the given properties . +/** Creates a Sphere Object3D with the given properties. * * @param {String} name `String`: The name of the sphere * @param {float} rad `float`: The radius of the sphere. @@ -30,6 +30,189 @@ export function createSphere(name, rad, col, met, rou, normal, pos) { return sphere; }; +/** Creates a Child Sphere Object3D with the given properties. + * This Shpere is not given a position becasue it is added to a parent Object3D and not directly to the scene. + * + * @param {String} name `String`: The name of the sphere + * @param {float} rad `float`: The radius of the sphere. + * @param {color} col `color`: 0x000000 + * @param {float} met `float`: The metalness of the sphere. - '0 > 1' + * @param {float} rou `float`: The roughness of the sphere. - '0 > 1' + * @param {String} norm `string`: The directory path to the normal map. + * @returns the created `Sphere` + */ +export function createChildSphere(name, rad, col, met, rou, normal) { + const sphere_geo = new THREE.SphereGeometry(rad, 64, 64); + const sphere_normal = textureLoader.load('' + normal); + const sphere_mat = new THREE.MeshStandardMaterial({ + name: name, + color: col, + metalness: met, + roughness: rou, + normalMap: sphere_normal + }); + const sphere = new THREE.Mesh(sphere_geo, sphere_mat); + // sphere.castShadow = true; + // sphere.receiveShadow = true; + return sphere; +}; + +/** Creates a parent Object3D at the given location. + * + * @param {Object} pos `Object`: [x: #, y: #, z: #] cordinates for the parent object's position. + + * @returns The invisible object used to connect a child to. + */ +export function createPatentObject(pos) { + const parent = new THREE.Object3D(); + parent.position.set(pos.x, pos.y, pos.z); + return parent; +}; + +/** Creates a Octahedron Object3D with the given properties. + * + * @param {String} name `String`: The name of the octahedron + * @param {float} rad `float`: The radius of the octahedron. + * @param {number} det `number`: The level of detail of the octahedron. + * @param {color} col `color`: 0x000000 + * @param {float} met `float`: The metalness of the octahedron. - '0 > 1' + * @param {float} rou `float`: The roughness of the octahedron. - '0 > 1' + * @param {String} norm `string`: The directory path to the normal map. + * @param {Object} pos `Object`: [x: #, y: #, z: #] cordinates for the octahedron. + * @returns the created `Octahedron` + */ +export function createOctahedron(name, rad, det, col, met, rou, normal, pos, isWireframe) { + const octahedron_geo = new THREE.OctahedronGeometry(rad, det); + const octahedron_normal = textureLoader.load('' + normal); + const octahedron_mat = new THREE.MeshStandardMaterial({ + name: name, + color: col, + metalness: met, + roughness: rou, + normalMap: octahedron_normal, + wireframe: isWireframe + }); + const octahedron = new THREE.Mesh(octahedron_geo, octahedron_mat); + // octahedron.castShadow = true; + // octahedron.receiveShadow = true; + octahedron.position.set(pos.x, pos.y, pos.z); + return octahedron; +}; + +/** Creates a Icosahedron Object3D with the given properties. + * + * @param {String} name `String`: The name of the icosahedron + * @param {float} rad `float`: The radius of the icosahedron. + * @param {color} col `color`: 0x000000 + * @param {float} met `float`: The metalness of the icosahedron. - '0 > 1' + * @param {float} rou `float`: The roughness of the icosahedron. - '0 > 1' + * @param {String} norm `string`: The directory path to the normal map. + * @param {Object} pos `Object`: [x: #, y: #, z: #] cordinates for the icosahedron. + * @returns the created `icosahedron` + */ +export function createIcosahedron(name, rad, col, met, rou, normal, pos, isWireframe) { + const icosahedron_geo = new THREE.IcosahedronGeometry(rad, 0); + const icosahedron_normal = textureLoader.load('' + normal); + const icosahedron_mat = new THREE.MeshStandardMaterial({ + name: name, + color: col, + metalness: met, + roughness: rou, + normalMap: icosahedron_normal, + wireframe: isWireframe + }); + const icosahedron = new THREE.Mesh(icosahedron_geo, icosahedron_mat); + // icosahedron.castShadow = true; + // icosahedron.receiveShadow = true; + icosahedron.position.set(pos.x, pos.y, pos.z); + return icosahedron; +}; + +/** Creates a Torus Object3D with the given properties. + * + * @param {String} name `String`: The name of the Torus + * @param {float} rad `float`: The radius of the Torus. + * @param {number} thick thickness of the Torus + * @param {float} radSeg number of radius segments + * @param {float} thickSeg number of thickness segments + * @param {color} col `color`: 0x000000 + * @param {float} met `float`: The metalness of the Torus. - '0 > 1' + * @param {float} rou `float`: The roughness of the Torus. - '0 > 1' + * @param {Object} pos `Object`: [x: #, y: #, z: #] cordinates for the Torus. + * @returns the created `Trous` + */ +export function createTorus(name, rad, thick, radSeg, thickSeg, col, met, rou, pos) { + const torus_geo = new THREE.TorusGeometry(rad, thick, radSeg, thickSeg); + const torus_mat = new THREE.MeshBasicMaterial({ + name: name, + color: col, + }); + const torus = new THREE.Mesh(torus_geo, torus_mat); + // torus.castShadow = true; + // torus.receiveShadow = true; + torus.position.set(pos.x, pos.y, pos.z); + torus.rotation.x = (Math.PI / -2); // Allows the torus to lay down horizontally + return torus; +}; + +/** Creates a TorusKnot Object3D with the given properties. + * + * @param {String} name `String`: The name of the TrousKnot + * @param {float} rad `float`: The radius of the TrousKnot. + * @param {number} thick thickness of the TrousKnot + * @param {float} radSeg number of radius segments + * @param {float} thickSeg number of thickness segments + * @param {number} p `number`: determines how many times the geometry winds around its axis of rotational symmetry. (Default is 2) + * @param {number} q `number`: determines how many times the geometry winds around a circle in the interior of the torus. (Default is 3) + * @param {color} col `color`: 0x000000 + * @param {float} met `float`: The metalness of the Torus. - '0 > 1' + * @param {float} rou `float`: The roughness of the Torus. - '0 > 1' + * @param {Object} pos `Object`: [x: #, y: #, z: #] cordinates for the TrousKnot. + * @returns the created `TrousKnot` + */ +export function createTorusKnot(name, rad, thick, thickSeg, radSeg, p, q, col, met, rou, normal, pos) { + const torusKnot_geo = new THREE.TorusKnotGeometry(rad, thick, thickSeg, radSeg, p, q); + const torusKnot_normal = textureLoader.load('' + normal); + const torusKnot_mat = new THREE.MeshStandardMaterial({ + name: name, + color: col, + metalness: met, + roughness: rou, + normalMap: torusKnot_normal + }); + const torusKnot = new THREE.Mesh(torusKnot_geo, torusKnot_mat); + // torus.castShadow = true; + // torus.receiveShadow = true; + torusKnot.position.set(pos.x, pos.y, pos.z); + torusKnot.rotation.y = -1; + return torusKnot; +}; + +/** Creates a cone Object3D with the given properties. + * + * @param {String} name `String`: The name of the Cone + * @param {float} rad `float`: The radius of the Cone. (Default is 1) + * @param {float} height `float`: height of the Cone. (Default is 1) + * @param {number} radSeg `number`: number of segmented faces around the circumference of the cone. (Default is 8) + * @param {number} heightSeg `number`: number of rows of faces along the height of the cone. (Default is 10) + */ +export function createCone(name, rad, height, radSeg, heightSeg, col, met, rou, normal, isWireframe) { + const cone_geo = new THREE.ConeGeometry(rad, height, radSeg, heightSeg); + const cone_normal = textureLoader.load('' + normal); + const cone_mat = new THREE.MeshStandardMaterial({ + name: name, + color: col, + metalness: met, + roughness: rou, + normalMap: cone_normal, + wireframe: isWireframe + }); + const cone = new THREE.Mesh(cone_geo, cone_mat); + // cone.castShadow = true; + // cone.receiveShadow = true; + return cone; +}; + /** Creates a Plane Object3D with the given properties. * * @param {number} width `number`: Width of the sides on the X axis. @@ -50,7 +233,7 @@ export function createPlane(width, height, widthSegments, heightSegments, col, m const plane_geo = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments); let plane_height; if (dis_map === '') { - plane_height = undefined; + plane_height = false; } else { plane_height = textureLoader.load('' + dis_map); } @@ -69,37 +252,6 @@ export function createPlane(width, height, widthSegments, heightSegments, col, m return plane; }; -/** Creates a Torus Object3D with the given properties. - * - * @param {String} name `String`: The name of the Torus - * @param {float} rad `float`: The radius of the Torus. - * @param {number} thick thickness of the Torus - * @param {float} radSeg number of radius segments - * @param {float} thickSeg number of thickness segments - * @param {color} col `color`: 0x000000 - * @param {float} met `float`: The metalness of the Torus. - '0 > 1' - * @param {float} rou `float`: The roughness of the Torus. - '0 > 1' - * @param {Object} pos `Object`: [x: #, y: #, z: #] cordinates for the Torus. - * @returns the created `Trous` - */ -export function createTorus(name, rad, thick, radSeg, thickSeg, col, met, rou, pos) { - const torus_geo = new THREE.TorusGeometry(rad, thick, radSeg, thickSeg); - // const sphere_normal = textureLoader.load('' + normal); - const torus_mat = new THREE.MeshBasicMaterial({ - name: name, - color: col, - // metalness: met, - // roughness: rou, - // normalMap: sphere_normal - }); - const torus = new THREE.Mesh(torus_geo, torus_mat); - // torus.castShadow = true; - // torus.receiveShadow = true; - torus.position.set(pos.x, pos.y, pos.z); - torus.rotation.x = (Math.PI / -2); - return torus; -} - /** Loads and creates a background for the scene * */ diff --git a/style.css b/style.css index 5d4d0dc..aa38e9c 100644 --- a/style.css +++ b/style.css @@ -47,6 +47,7 @@ canvas { .slides { position: absolute; + display: none; width: 75%; height: 85%; top: 5%;