diff options
| -rw-r--r-- | Scripts/cloth.js | 111 | ||||
| -rw-r--r-- | Scripts/main.js | 12 | ||||
| -rw-r--r-- | index.html | 1 |
3 files changed, 121 insertions, 3 deletions
diff --git a/Scripts/cloth.js b/Scripts/cloth.js index a05eb98..05ff6f1 100644 --- a/Scripts/cloth.js +++ b/Scripts/cloth.js @@ -1,3 +1,112 @@ // cloth rendering
// simulate
-// setup scene
\ No newline at end of file +// setup scene
+
+const MASS = 0.1;
+
+class Particle {
+ constructor(x, y, z, mass) {
+ this.position = new THREE.Vector3(x, y, z);
+ this.previous = new THREE.Vector3(x, y, z);
+ this.acceleration = new THREE.Vector3(0, 0, 0);
+ this.mass = mass;
+ }
+ addForce(force) {
+
+ }
+ verlet(dt) {
+
+ }
+}
+
+class Cloth {
+ constructor(width, height, numPointsWidth, numPointsHeight) {
+ this.width = width;
+ this.height = height;
+ this.numPointsWidth = numPointsWidth;
+ this.numPointsHeight = numPointsHeight;
+
+ /**
+ * distance between two vertices horizontally/vertically
+ * divide by the number of points minus one
+ * because there are (n - 1) lines between n vertices
+ */
+ let stepWidth = width / (numPointsWidth - 1);
+ let stepHeight = height / (numPointsHeight - 1);
+
+ /**
+ * iterate over the number of vertices in x/y axis
+ * and add a new Particle to "particles"
+ */
+ this.particles = [];
+ for (let y = 0; y < numPointsHeight; y++) {
+ for (let x = 0; x < numPointsWidth; x++) {
+ this.particles.push(
+ new Particle(
+ (x - ((numPointsWidth-1)/2)) * stepWidth,
+ height - (y + ((numPointsHeight-1)/2)) * stepHeight,
+ 0,
+ MASS)
+ );
+ }
+ }
+ }
+ generateGeometry() {
+ const geometry = new THREE.BufferGeometry();
+
+ const vertices = [];
+ const normals = [];
+ const indices = [];
+
+ for (let particle of this.particles) {
+ vertices.push(
+ particle.position.x,
+ particle.position.y,
+ particle.position.z);
+ }
+
+ const numPointsWidth = this.numPointsWidth;
+ const numPointsHeight = this.numPointsHeight;
+
+ /**
+ * helper function to calculate index of vertex
+ * in "vertices" array based on its x and y positions
+ * in the mesh
+ * @param {number} x - x index of vertex
+ * @param {number} y - y index of vertex
+ */
+ function getVertexIndex(x, y) {
+ return y * numPointsWidth + x;
+ }
+
+ /**
+ * generate faces based on 4 vertices
+ * and 6 springs each
+ */
+ for (let y = 0; y < numPointsHeight - 1; y++) {
+ for (let x = 0; x < numPointsWidth - 1; x++) {
+ indices.push(
+ getVertexIndex(x, y),
+ getVertexIndex(x+1, y),
+ getVertexIndex(x+1, y+1)
+ );
+ indices.push(
+ getVertexIndex(x, y),
+ getVertexIndex(x+1, y+1),
+ getVertexIndex(x, y+1)
+ );
+ }
+ }
+
+ geometry.setIndex(indices);
+ geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
+ //geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
+ geometry.computeBoundingSphere();
+ geometry.computeVertexNormals();
+
+ return geometry;
+ }
+ updateGeometry(geometry) {
+
+ }
+}
\ No newline at end of file diff --git a/Scripts/main.js b/Scripts/main.js index 4d87337..d54aa9f 100644 --- a/Scripts/main.js +++ b/Scripts/main.js @@ -79,8 +79,16 @@ function init() { /** Setup scene */
let [scene, camera, renderer] = setup_scene(canvasSpace);
-
- // Add Cloth Initialization
+
+ //const loader = new THREE.TextureLoader();
+ //Red color: 0xC70039
+
+ const cloth = new Cloth(1, 0.5, 20, 10);
+ const clothGeometry = cloth.generateGeometry();
+ //const clothMaterial = new THREE.MeshStandardMaterial({ map: loader.load('Textures/DeutschlandFlagge.jpg'), color: 0xffffff, side: THREE.DoubleSide, flatShading: false});
+ const clothMaterial = new THREE.MeshStandardMaterial({ color: 0xC70039, side: THREE.DoubleSide, flatShading: false });
+ const clothMesh = new THREE.Mesh(clothGeometry, clothMaterial);
+ scene.add(clothMesh);
let raycaster = new THREE.Raycaster();
let intersects;
@@ -15,6 +15,7 @@ </head>
<body>
+ <script src="./Scripts/cloth.js"></script>
<script src="./Scripts/main.js"></script>
<div id="threejscontainer"></div>
|