diff options
| -rw-r--r-- | Scripts/cloth.js | 32 | ||||
| -rw-r--r-- | Scripts/main.js | 10 |
2 files changed, 22 insertions, 20 deletions
diff --git a/Scripts/cloth.js b/Scripts/cloth.js index ff55549..5a7a0f2 100644 --- a/Scripts/cloth.js +++ b/Scripts/cloth.js @@ -4,6 +4,8 @@ const MASS = 0.1; const GRAVITY = new THREE.Vector3(0, -9.81 * MASS, 0);
const K = 1;
+// Flag Texture
+
const options = {
wind: true,
};
@@ -143,25 +145,27 @@ class Cloth { const geometry = new THREE.BufferGeometry();
const vertices = [];
- const normals = [];
const indices = [];
+ const uvs = [];
- for (let particle of this.particles) {
+ for (let i in this.particles) {
+ let particle = this.particles[i];
vertices.push(
particle.position.x,
particle.position.y,
particle.position.z);
+ uvs.push(
+ this.getX(i) / (this.numPointsWidth-1),
+ 1 - (this.getY(i) / (this.numPointsHeight-1))
+ );
}
- const numPointsWidth = this.numPointsWidth;
- const numPointsHeight = this.numPointsHeight;
-
/**
* 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++) {
+ for (let y = 0; y < this.numPointsHeight - 1; y++) {
+ for (let x = 0; x < this.numPointsWidth - 1; x++) {
indices.push(
this.getVertexIndex(x, y),
this.getVertexIndex(x+1, y),
@@ -177,7 +181,7 @@ class Cloth { geometry.setIndex(indices);
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
- //geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
+ geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
geometry.computeBoundingSphere();
geometry.computeVertexNormals();
@@ -223,10 +227,6 @@ class Cloth { }
intersect() {
- let npw = this.numPointsWidth;
- function getX(i) { return i % npw; }
- function getY(i) { return Math.floor(i / npw); }
-
for (let i in this.particles) {
for (let j in this.particles) {
let p1 = this.particles[i];
@@ -235,14 +235,14 @@ class Cloth { p1.movableTmp = true;
p2.movableTmp = true;
- if (i == j || (Math.abs(getX(i) - getX(j)) == 1 && Math.abs(getY(i) - getY(j)) == 1))
+ if (i == j || (Math.abs(this.getX(i) - this.getX(j)) == 1 && Math.abs(this.getY(i) - this.getY(j)) == 1))
continue;
let dist = p1.position.distanceTo(p2.position);
const collisionDistance = Math.min(this.width / this.numPointsWidth, this.height / this.numPointsHeight);
if (dist < collisionDistance) {
- p1.movableTmp = false;
- p2.movableTmp = false;
+ // p1.movableTmp = false;
+ // p2.movableTmp = false;
let diff = p1.position.clone().sub(p2.position).normalize();
diff.multiplyScalar((collisionDistance - dist) * 1.001 / 2);
if (p1.movable)
@@ -264,4 +264,6 @@ class Cloth { getVertexIndex(x, y) {
return y * this.numPointsWidth + x;
}
+ getX(i) { return i % this.numPointsWidth; }
+ getY(i) { return Math.floor(i / this.numPointsWidth); }
}
\ No newline at end of file diff --git a/Scripts/main.js b/Scripts/main.js index 6fa9f22..5e68a4f 100644 --- a/Scripts/main.js +++ b/Scripts/main.js @@ -1,5 +1,4 @@ -//import { } from './cloth.js';
-//import { OrbitControls } from './OrbitControls.js';
+
function addLights(scene){
scene.add( new THREE.AmbientLight( 0x222222 ) );
@@ -80,16 +79,17 @@ function init() { /** Setup scene */
let [scene, camera, renderer] = setup_scene(canvasSpace);
- //const loader = new THREE.TextureLoader();
+ const loader = new THREE.TextureLoader();
//Red color: 0xC70039
const cloth = new Cloth(1, 0.5, 20, 20);
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 clothMaterial = new THREE.MeshStandardMaterial({ map: loader.load('Textures/hsrm.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);
+ document.getElementById("windToggle").checked = options.wind;
document.getElementById("windToggle").onchange = (e) => {
options.wind = e.target.checked;
};
|