Skip to content
Snippets Groups Projects
Unverified Commit 9dbf24df authored by Jamie Temple's avatar Jamie Temple
Browse files

feat: title page with navigation

parent b3bf69f9
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
index.html
+ 54
− 12
View file @ 9dbf24df
<!DOCTYPE html>
<html lang="en">
<head>
<title>Computergrafik 3</title>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Computergrafik 3" />
<link rel="stylesheet" href="src/style.css" />
<title>Computergrafik 3</title>
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<div class="scene deactived">
<canvas id="canvas"></canvas>
<script type="module" src="/src/main.ts"></script>
</div>
<div class="main">
<canvas class="welcome" id="preview"></canvas>
<nav class="menu">
<header>
<h2 class="title-nav">Menu</h2>
</header>
<ul>
<li><a class="nav-link active-link" href="index.html">Home</a></li>
<li><a class="nav-link" id="bezier"> Bézier Curves </a></li>
<li><a class="nav-link" id="quaternion"> Quaternions </a></li>
<li><a class="nav-link" id="simulation"> Simulation </a></li>
</ul>
<footer>
<p>
To return to the home page, simply refresh the page.
</p>
</footer>
</nav>
</div>
<script type="module" src="/src/init.ts"></script>
</body>
</html>
\ No newline at end of file
quaternions.html deleted 100644 → 0
+ 0
− 14
View file @ b3bf69f9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Computergrafik 3</title>
</head>
<body>
<div id="app"></div>
<canvas id="canvas"></canvas>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
src/ambient/RotatingCube.ts 0 → 100644
+ 56
− 0
View file @ 9dbf24df
import * as THREE from 'three';
let scene: THREE.Scene, camera: THREE.PerspectiveCamera, renderer: THREE.Renderer, cube: THREE.Mesh;
const speed = 0.01;
let WIDTH = window.innerWidth * 0.8;
let HEIGHT = window.innerHeight * 0.50;
function initCamera() {
camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT, 1, 10);
camera.position.set(0, 3.5, 5);
camera.lookAt(scene.position);
}
function initRenderer() {
const target = document.querySelector("#preview") as HTMLCanvasElement;
renderer = new THREE.WebGLRenderer({ canvas: target, antialias: true, alpha: true });
renderer.setSize(WIDTH, HEIGHT);
window.addEventListener("resize", () => {
WIDTH = window.innerWidth * 0.8;
HEIGHT = window.innerHeight * 0.50;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
});
}
function initCube() {
cube = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), new THREE.MeshBasicMaterial(
{ wireframe: true, color: 0x000000 }));
scene.add(cube);
}
function rotateCube() {
cube.rotation.x += speed;
cube.rotation.y += speed;
cube.rotation.z += speed;
}
export function init() {
scene = new THREE.Scene();
initCamera();
initRenderer();
initCube();
}
export function render() {
requestAnimationFrame(render);
rotateCube();
renderer.render(scene, camera);
}
src/bezier/BezierDemo.ts 0 → 100644
+ 10
− 0
View file @ 9dbf24df
import { RenderManager } from "../uitls/Rendering";
import { UI } from "../uitls/UI";
import { Curve2d } from './Curve2d';
export function bezierDemo(render: RenderManager, ui: UI) {
const curve = new Curve2d();
curve.objects().forEach(obj => { render.add(obj); });
ui.addModifiable(curve);
}
\ No newline at end of file
src/init.ts 0 → 100644
+ 38
− 0
View file @ 9dbf24df
import * as RotCube from "./ambient/RotatingCube"
import * as Main from "./main"
function init() {
const sceneElement = document.querySelector(".scene") as HTMLAnchorElement;
const mainElement = document.querySelector(".main") as HTMLAnchorElement;
const bezierLink = document.querySelector("#bezier") as HTMLAnchorElement;
const quaternionLink = document.querySelector("#quaternion") as HTMLAnchorElement;
const simulationLink = document.querySelector("#simulation") as HTMLAnchorElement;
bezierLink.addEventListener("click", () => {
sceneElement.classList.remove("hidden");
mainElement.classList.add("hidden");
Main.demos(Main.examples["bezier"]);
});
quaternionLink.addEventListener("click", () => {
sceneElement.classList.remove("hidden");
mainElement.classList.add("hidden");
Main.demos(Main.examples["quaternion"]);
});
simulationLink.addEventListener("click", () => {
sceneElement.classList.add("hidden");
mainElement.classList.remove("hidden");
// TODO: add simulation
});
RotCube.init();
RotCube.render();
}
init();
export { };
\ No newline at end of file
src/main.ts
+ 13
− 59
View file @ 9dbf24df
import { AmbientLight, GridHelper, Mesh, MeshLambertMaterial, PointLight } from "three";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { RotationObject } from "./quaternion/RotationObject";
import { Curve2d } from "./bezier/Curve2d";
import { RenderManager } from "./uitls/Rendering";
import { UI } from "./uitls/UI";
import * as CG from "./uitls/Rendering";
import { bezierDemo } from "./bezier/BezierDemo";
import { quaternionDemo } from "./quaternion/QuaternionDemo";
export const examples : {[key: string]: (render: RenderManager, ui: UI) => void} = {
"bezier": bezierDemo,
"quaternion": quaternionDemo
};
function demo1(render: CG.RenderManager, ui: UI) {
const curve = new Curve2d();
curve.objects().forEach(obj => { render.add(obj); });
ui.addModifiable(curve);
}
function demo2(render: CG.RenderManager, ui: UI) {
const rot = new RotationObject();
const grid = new GridHelper(10,10);
grid.renderOrder = -1
render.add(grid)
const loader = new OBJLoader();
loader.setPath("models/");
loader.load(
"Arrow.obj",
function (obj) {
let tmp = obj.children[0] as Mesh;
tmp.material = new MeshLambertMaterial({ wireframe: false, color: 0xaaaaaa });
rot.setMesh(tmp);
render.add(tmp);
}
)
const ambient = new AmbientLight(0x404040);
render.add(ambient);
const plightx = new PointLight(0xffffff, 1, 100);
plightx.position.set(5, 0, 0);
render.add(plightx);
export function demos(d: (render: RenderManager, ui: UI) => void) {
const plighty = new PointLight(0xffffff, 1, 100);
plighty.position.set(0, 5, 0);
render.add(plighty);
const plightz = new PointLight(0xffffff, 1, 100);
plightz.position.set(0, 0, 5);
render.add(plightz);
rot.objects().forEach(obj => {
render.add(obj);
});
render.render();
ui.addModifiable(rot);
}
console.log("demos");
const ui = new UI();
const render = new CG.RenderManager('#canvas', { near: 0.01, far: 1000, fov: 45, height: 1 });
const render = new RenderManager('#canvas', { near: 0.01, far: 1000, fov: 45, height: 1 });
ui.addModifiable(render);
demo1(render, ui);
// demo2(render, ui);
d(render, ui);
render.render();
}
src/quaternion/QuaternionDemo.ts 0 → 100644
+ 50
− 0
View file @ 9dbf24df
import { RenderManager } from "../uitls/Rendering";
import { UI } from "../uitls/UI";
import { AmbientLight, GridHelper, Mesh, MeshLambertMaterial, PointLight } from "three";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { RotationObject } from "./RotationObject";
export function quaternionDemo(render: RenderManager, ui: UI) {
const rot = new RotationObject();
const grid = new GridHelper(10,10);
grid.renderOrder = -1
render.add(grid)
const loader = new OBJLoader();
loader.setPath("models/");
loader.load(
"Arrow.obj",
function (obj) {
let tmp = obj.children[0] as Mesh;
tmp.material = new MeshLambertMaterial({ wireframe: false, color: 0xaaaaaa });
rot.setMesh(tmp);
render.add(tmp);
}
)
const ambient = new AmbientLight(0x404040);
render.add(ambient);
const plightx = new PointLight(0xffffff, 1, 100);
plightx.position.set(5, 0, 0);
render.add(plightx);
const plighty = new PointLight(0xffffff, 1, 100);
plighty.position.set(0, 5, 0);
render.add(plighty);
const plightz = new PointLight(0xffffff, 1, 100);
plightz.position.set(0, 0, 5);
render.add(plightz);
rot.objects().forEach(obj => {
render.add(obj);
});
render.render();
ui.addModifiable(rot);
}
\ No newline at end of file
src/style.css
+ 142
− 0
View file @ 9dbf24df
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.main.hidden {
display: none;
}
.scene.hidden {
display: none;
}
.return {
position: absolute;
top: 1em;
left: 1em;
background: #fff;
z-index: 1;
}
header {
position: relative;
width: 100%;
height: 6rem;
}
footer {
position: absolute;
bottom: 0;
left: 12%;
width: 80%;
height: 6rem;
color: #CBCFD3;
font-size: .8em;
display: flex;
justify-content: space-between;
align-items: center;
}
.welcome {
position: relative;
top: 25vh;
left: 20%;
font-size: 1rem;
}
.sub {
color: #CBCFD3;
}
/* MENU */
nav {
position: fixed;
width: 25%;
height: 100vh;
left: 0;
top: 0;
background-color: #1e1e1e;
transition: 0.2s;
/* z-index: 1; */
}
.title-nav {
position: absolute;
color: white;
bottom: 0;
left: 12%;
}
nav ul {
position: absolute;
left: 12%;
top: 20%;
height: 55%;
list-style: none;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.nav-link {
position: relative;
color: #CBCFD3;
left: 0;
text-decoration: none;
font-size: 1.25rem;
letter-spacing: 0.25rem;
transition: 0.2s;
}
.nav-link:hover {
color: white;
left: 10%;
transition: 0.5s;
cursor: pointer;
}
.active-link {
color: white;
font-weight: bold;
}
.menu-close {
position: absolute;
top: 45vh;
left: 2%;
width: 2rem;
height: 1rem;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.menu-close:hover {
opacity: 0.6;
}
.menu-close span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70%;
height: 2px;
background-color: white;
}
.menu-close span:nth-child(1) {
transform: translate(-50%, -50%) rotate(45deg);
}
.menu-close span:nth-child(2) {
transform: translate(-50%, -50%) rotate(-45deg);
}
canvas {
left: 0;
top: 0;
......
src/uitls/globals.ts
+ 1
− 1
View file @ 9dbf24df
export const colorprime: [number, number, number] = [
0xF55600, // red
0xCC0000, // red
0x5DFF70, // green
0x123FB3 // blue
]
......
src/uitls/rendering.ts
+ 16
− 3
View file @ 9dbf24df
......@@ -20,11 +20,9 @@ class CameraManager {
constructor(settings: CameraSettings) {
const aspect = window.innerWidth / window.innerHeight;
const s = 3;
this.cameras = [
new PerspectiveCamera(settings.fov, aspect, settings.near, settings.far),
new OrthographicCamera(-aspect * s, aspect * s, 1 * s, -1 * s, settings.near, settings.far)
new OrthographicCamera(-aspect, aspect, 1, -1, settings.near, settings.far)
];
this.active = this.cameras[1];
......@@ -71,6 +69,20 @@ export class RenderManager implements Modifiable {
this._cameraManager = new CameraManager(settings);
this._controls = new OrbitControls(this._cameraManager.camera(), this._renderer.domElement);
this._scene = new Scene();
window.addEventListener('resize', () => {
this._renderer.setSize(window.innerWidth, window.innerHeight);
let cam = this._cameraManager.camera();
if (cam instanceof PerspectiveCamera) {
cam.aspect = window.innerWidth / window.innerHeight;
cam.updateProjectionMatrix();
} else if (cam instanceof OrthographicCamera) {
const aspect = window.innerWidth / window.innerHeight;
cam.left = -aspect;
cam.right = aspect;
cam.updateProjectionMatrix();
}
})
}
......@@ -138,6 +150,7 @@ export class RenderManager implements Modifiable {
});
}
private _fps: number = 60;
private _controls: OrbitControls;
private _cameraManager: CameraManager;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment