Skip to content
Snippets Groups Projects
Commit 96784233 authored by Temple's avatar Temple
Browse files

Merge branch 'rewrite' into 'main'

feat: new project architecture

See merge request !1
parents a77daa69 e7ec1c65
No related branches found
No related tags found
1 merge request!1feat: base project
Showing with 3771 additions and 43184 deletions
# Computergrafik 3
```bash
npm i
npm run dev
```
This diff is collapsed.
module.exports = {
presets: [
['@babel/preset-env', { targets: { node: 'current' } }],
'@babel/preset-typescript',
],
};
\ No newline at end of file
<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
<stop stop-color="#41D1FF"/>
<stop offset="1" stop-color="#BD34FE"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFEA83"/>
<stop offset="0.0833333" stop-color="#FFDD35"/>
<stop offset="1" stop-color="#FFA800"/>
</linearGradient>
</defs>
</svg>
<?xml version="1.0"?><svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"> <path d="M 19.439453 14 C 8.6994531 14 0 18.92 0 25 C 2.3684758e-15 31.07 8.6994531 36 19.439453 36 C 26.419453 36 32.530938 33.799922 35.960938 30.669922 C 32.830938 32.539922 28.140391 33.599609 22.900391 33.599609 C 13.470391 33.599609 5.8300781 29.75 5.8300781 25 C 5.8300781 23.561756 6.5408111 22.208905 7.7792969 21.017578 L 10.089844 29.810547 L 11.679688 29.810547 L 13.917969 21.855469 L 16.130859 29.810547 L 17.724609 29.810547 L 20.478516 19.683594 L 18.685547 19.683594 L 16.892578 27.453125 L 14.726562 19.683594 L 13.082031 19.683594 L 10.921875 27.453125 L 9.1738281 19.902344 C 12.2821 17.781579 17.264272 16.400391 22.900391 16.400391 C 28.160391 16.400391 32.87 17.479375 36 19.359375 C 32.58 16.209375 26.449453 14 19.439453 14 z M 38.089844 20.220703 C 37.376844 20.220703 36.737922 20.347609 36.169922 20.599609 C 35.601922 20.852609 35.122422 21.200531 34.732422 21.644531 C 34.342422 22.088531 34.043937 22.609078 33.835938 23.205078 C 33.627937 23.802078 33.523438 24.450484 33.523438 25.146484 C 33.523438 25.825484 33.629891 26.458875 33.837891 27.046875 C 34.045891 27.634875 34.343375 28.147031 34.734375 28.582031 C 35.125375 29.018031 35.604828 29.359422 36.173828 29.607422 C 36.742828 29.855422 37.383703 29.980469 38.095703 29.980469 C 38.546703 29.980469 38.992547 29.886219 39.435547 29.699219 C 39.878547 29.512219 40.282438 29.184844 40.648438 28.714844 L 40.857422 29.769531 L 42.154297 29.769531 L 42.154297 24.736328 L 38.253906 24.736328 L 38.253906 26.267578 L 40.310547 26.267578 C 40.249547 26.917578 40.034062 27.415813 39.664062 27.757812 C 39.294062 28.100812 38.77175 28.271484 38.09375 28.271484 C 37.63275 28.271484 37.240922 28.182906 36.919922 28.003906 C 36.598922 27.824906 36.338672 27.587016 36.138672 27.291016 C 35.938672 26.995016 35.792172 26.662969 35.701172 26.292969 C 35.610172 25.922969 35.564453 25.540437 35.564453 25.148438 C 35.564453 24.739437 35.610172 24.343937 35.701172 23.960938 C 35.792172 23.576938 35.936719 23.236547 36.136719 22.935547 C 36.335719 22.635547 36.596969 22.395797 36.917969 22.216797 C 37.238969 22.037797 37.629844 21.949219 38.089844 21.949219 C 38.583844 21.949219 39.005516 22.078844 39.353516 22.339844 C 39.700516 22.600844 39.934641 22.992672 40.056641 23.513672 L 42.009766 23.513672 C 41.957766 22.983672 41.812125 22.512516 41.578125 22.103516 C 41.344125 21.694516 41.0475 21.351266 40.6875 21.072266 C 40.3275 20.793266 39.923563 20.5815 39.476562 20.4375 C 39.029563 20.2935 38.566844 20.220703 38.089844 20.220703 z M 43.429688 20.455078 L 43.429688 29.763672 L 50 29.763672 L 50 28.035156 L 45.46875 28.035156 L 45.46875 20.455078 L 43.429688 20.455078 z M 26.496094 20.607422 L 26.496094 29.810547 L 27.748047 29.810547 L 27.748047 29.185547 C 27.858047 29.329547 27.998547 29.481234 28.185547 29.615234 C 28.542547 29.871234 28.982141 30 29.494141 30 C 30.044141 30 30.534172 29.876766 30.951172 29.634766 C 31.323172 29.418766 31.639672 29.108938 31.888672 28.710938 C 32.106672 28.363937 32.271859 27.953141 32.380859 27.494141 C 32.474859 27.097141 32.523438 26.663281 32.523438 26.238281 C 32.522438 25.768281 32.459031 25.325922 32.332031 24.919922 C 32.204031 24.510922 32.014484 24.149656 31.771484 23.847656 C 31.519484 23.535656 31.215234 23.293953 30.865234 23.126953 C 30.499234 22.952953 30.089484 22.863281 29.646484 22.863281 L 29.644531 22.863281 C 29.235531 22.870281 28.862156 22.959906 28.535156 23.128906 C 28.265156 23.268906 28.0225 23.464844 27.8125 23.714844 L 27.8125 20.607422 L 26.496094 20.607422 z M 22.736328 22.861328 C 22.192328 22.861328 21.702297 22.959297 21.279297 23.154297 C 20.878297 23.339297 20.537672 23.611891 20.263672 23.962891 C 19.756672 24.612891 19.488281 25.529328 19.488281 26.611328 C 19.488281 27.093328 19.556406 27.544125 19.691406 27.953125 C 19.826406 28.365125 20.026156 28.728297 20.285156 29.029297 C 20.829156 29.662297 21.604344 29.996094 22.527344 29.996094 C 23.012344 29.996094 23.409281 29.945797 23.738281 29.841797 C 24.026281 29.750797 24.216047 29.633297 24.373047 29.529297 C 24.575047 29.396297 24.761781 29.232969 24.925781 29.042969 C 25.064781 28.881969 25.188922 28.701813 25.294922 28.507812 C 25.483922 28.160812 25.574703 27.836063 25.595703 27.664062 L 25.609375 27.550781 L 24.287109 27.550781 L 24.28125 27.644531 C 24.24825 28.074531 23.684641 28.841797 22.681641 28.841797 C 21.246641 28.841797 20.904812 27.803672 20.882812 26.888672 L 25.685547 26.888672 L 25.685547 26.785156 C 25.685547 26.195156 25.624859 25.657547 25.505859 25.185547 C 25.382859 24.701547 25.198031 24.284312 24.957031 23.945312 C 24.708031 23.594313 24.39725 23.324578 24.03125 23.142578 C 23.65525 22.955578 23.219328 22.861328 22.736328 22.861328 z M 22.585938 24.054688 C 23.649938 24.054688 24.218266 24.627641 24.322266 25.806641 L 20.882812 25.806641 C 20.932812 24.847641 21.692938 24.054688 22.585938 24.054688 z M 29.443359 24.058594 C 30.156359 24.058594 30.632391 24.337109 30.900391 24.912109 C 31.120391 25.388109 31.150391 25.965062 31.150391 26.414062 C 31.150391 27.137062 31.005469 27.741063 30.730469 28.164062 C 30.438469 28.615063 30.01275 28.84375 29.46875 28.84375 C 28.68175 28.84375 27.761719 28.292281 27.761719 26.738281 C 27.761719 25.994281 27.853969 25.422281 28.042969 24.988281 C 28.315969 24.362281 28.773359 24.058594 29.443359 24.058594 z"/></svg>
\ No newline at end of file
images/bezier.png

38.9 KiB

images/quaternions.png

101 KiB

images/simulation.png

163 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<title>Computergrafik 3</title>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="icon.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" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<link rel="stylesheet" href="./src/style.css" />
<title>Computergrafik 3</title>
</head>
<body>
<div class="scene deactived">
<canvas id="canvas"></canvas>
</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>
<script type="module" src="/src/Main.ts"></script>
<nav>
<a href="index.html">Home</a>
<a href="pages/bezier.html">Bezier Curves</a>
<a href="pages/quaternion.html">Quaternions</a>
<a href="pages/simulation.html">Cloth Simulation</a>
</nav>
</div>
<script type="module" src="/src/init.ts"></script>
</body>
</html>
module.exports = {
testEnvironment: 'node',
testRegex: '/tests/.*\\.(test|spec)?\\.(ts|tsx)$',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
};
\ No newline at end of file
# Blender v3.0.0 OBJ File: ''
# www.blender.org
o Cube_Cube.001
v -1.968145 -0.103905 1.301913
v -1.968145 0.103905 1.301913
v -1.968145 -0.103905 -1.301913
v -1.968145 0.103905 -1.301913
v 2.447117 0.086475 0.000000
v -1.000000 0.386153 0.000000
v -1.000000 0.593964 0.000000
v 2.447117 -0.121336 0.000000
vt 0.375000 0.125000
vt 0.625000 0.125000
vt 0.625000 0.250000
vt 0.375000 0.250000
vt 0.625000 0.625000
vt 0.375000 0.625000
vt 0.625000 1.000000
vt 0.375000 1.000000
vt 0.125000 0.625000
vt 0.125000 0.750000
vt 0.875000 0.625000
vt 0.875000 0.750000
vt 0.875000 0.500000
vt 0.125000 0.500000
vt 0.375000 0.000000
vt 0.625000 0.000000
vn -0.8024 0.0000 0.5967
vn 0.2828 0.0000 -0.9592
vn 0.2828 0.0000 0.9592
vn -0.1313 -0.8917 -0.4333
vn 0.1313 0.8917 0.4333
vn 0.1313 0.8917 -0.4333
vn -0.1313 -0.8917 0.4333
vn -0.8024 0.0000 -0.5967
s off
f 6/1/1 7/2/1 4/3/1 3/4/1
f 3/4/2 4/3/2 5/5/2 8/6/2
f 8/6/3 5/5/3 2/7/3 1/8/3
f 6/9/4 8/6/4 1/10/4
f 5/5/5 7/11/5 2/12/5
f 5/5/6 4/13/6 7/11/6
f 3/14/7 8/6/7 6/9/7
f 1/15/8 2/16/8 7/2/8 6/1/8
This diff is collapsed.
This diff is collapsed.
{
"name": "computergrafik-03",
"type": "commonjs",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"test": "jest",
"coverage": "jest --coverage"
"preview": "vite preview"
},
"devDependencies": {
"@babel/core": "^7.18.6",
"@babel/preset-env": "^7.18.6",
"@babel/preset-typescript": "^7.18.6",
"@types/dat.gui": "^0.7.7",
"@types/jest": "^28.1.3",
"@types/three": "^0.139.0",
"babel-jest": "^28.1.1",
"jest": "^28.1.1",
"typescript": "^4.7.4",
"vite": "^2.9.5"
"typescript": "^4.5.4",
"vite": "^2.9.9"
},
"dependencies": {
"@types/dat.gui": "^0.7.7",
"@types/three": "^0.141.0",
"dat.gui": "^0.7.9",
"mathjs": "^10.6.4",
"three": "^0.139.2"
"three": "^0.142.0"
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="../icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../src/style.css" />
<title>Computergrafik 3</title>
</head>
<body>
<script type="module" src="/src/Main.ts"></script>
<nav>
<a href="../index.html">Home</a>
<a href="bezier.html">Bezier Curves</a>
<a href="quaternion.html">Quaternions</a>
<a href="simulation.html">Cloth Simulation</a>
</nav>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="../icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../src/style.css" />
<title>Computergrafik 3</title>
</head>
<body>
<script type="module" src="/src/Main.ts"></script>
<nav>
<a href="../index.html">Home</a>
<a href="bezier.html">Bezier Curves</a>
<a href="quaternion.html">Quaternions</a>
<a href="simulation.html">Cloth Simulation</a>
</nav>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="../icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../src/style.css" />
<title>Computergrafik 3</title>
</head>
<body>
<script type="module" src="/src/Main.ts"></script>
<nav>
<a href="../index.html">Home</a>
<a href="bezier.html">Bezier Curves</a>
<a href="quaternion.html">Quaternions</a>
<a href="simulation.html">Cloth Simulation</a>
</nav>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="../icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../src/style.css" />
<title>Computergrafik 3</title>
</head>
<body>
<script type="module" src="/src/Main.ts"></script>
<nav>
<a href="../index.html">Home</a>
<a href="bezier.html">Bezier Curves</a>
<a href="quaternion.html">Quaternions</a>
<a href="simulation.html">Cloth Simulation</a>
</nav>
</body>
</html>
import * as THREE from "three" ;
import { Line1d, Line2d } from "../core/Lines";
import { PipelineData } from "../core/Pipeline";
import { Point2d, Point3d } from "../core/Points";
import { DebugHelper } from "../core/Shapes";
import { TriangleMesh } from "../core/TriangleMesh";
class Example extends PipelineData {
public constructor() { super(); }
data(): void {
const pointsA = [];
pointsA.push( new THREE.Vector3( 2, 0, 0 ) );
pointsA.push( new THREE.Vector3( 0, -2, 0 ) );
pointsA.push( new THREE.Vector3( -2, 0, 0 ) );
const pointsB = [];
pointsB.push( new THREE.Vector3( -2, 0, 0 ) );
pointsB.push( new THREE.Vector3( 0, 2, 0 ) );
pointsB.push( new THREE.Vector3( 2, 0, 0 ) );
const point2d = new Point2d(.1, 32, new THREE.Color(0xffffff));
const point3d = new Point3d(.1, 32, new THREE.Color(0xffffff));
const line1d = new Line1d(pointsA, new THREE.Color(0xffffff));
const line2d = new Line2d(pointsB, .01, new THREE.Color(0xffffff));
const mesh = new TriangleMesh("../assets/suzanne.obj", new THREE.Color(0xffffff));
this.addRenderable(point2d);
this.addRenderable(point3d);
this.addRenderable(line1d); // gives a waring
this.addRenderable(line2d);
this.addRenderable(mesh);
this.addDraggable(point2d);
this.addDraggable(point3d);
const debugHelper = new DebugHelper();
this.observers.push(debugHelper);
debugHelper.add(point2d);
debugHelper.add(point3d);
debugHelper.add(line1d);
debugHelper.add(line2d);
debugHelper.add(mesh);
debugHelper.debug.forEach(object => {
this.scene.add(object);
});
}
}
export { Example };
\ No newline at end of file
import * as THREE from "three";
import { Shape } from "../core/Shapes";
class SpinningCube extends Shape {
constructor() {
super();
const buffer = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
this._object3d = new THREE.Mesh(buffer, material);
}
update(_deltaTime: number): void {
this._object3d.rotation.x += 0.01;
this._object3d.rotation.y += 0.01;
}
}
export { SpinningCube };
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment