Skip to content

Commit

Permalink
Merge pull request #12 from CalebMcOlin/iss02-unique-shapes
Browse files Browse the repository at this point in the history 
Unique Shapes were added at each of the 6 slide locations.
  • Loading branch information
@CalebMcOlin
CalebMcOlin authored Dec 10, 2022
2 parents 92246f7 + 28f3728 commit 8dcb8b2
Show file tree
Hide file tree
Showing 6 changed files with 393 additions and 84 deletions.
236 changes: 189 additions & 47 deletions main.js
View file
Original file line number Diff line number Diff line change
@@ -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();
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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();
11 changes: 11 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
10 changes: 6 additions & 4 deletions src/movement.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
};
Expand All @@ -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";
};
Expand Down Expand Up @@ -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
});
};

Expand Down
Loading

0 comments on commit 8dcb8b2

Please sign in to comment.