diff options
Diffstat (limited to 'Scripts/main.js')
| -rw-r--r-- | Scripts/main.js | 99 |
1 files changed, 52 insertions, 47 deletions
diff --git a/Scripts/main.js b/Scripts/main.js index 5e68a4f..51d6762 100644 --- a/Scripts/main.js +++ b/Scripts/main.js @@ -1,19 +1,19 @@ function addLights(scene){
- scene.add( new THREE.AmbientLight( 0x222222 ) );
+ scene.add(new THREE.AmbientLight(0x222222));
- const light1 = new THREE.PointLight( 0xffffff, 1, 50 );
- light1.position.set( 15, 1, 40 );
- scene.add( light1 );
+ const light1 = new THREE.PointLight(0xffffff, 1, 50);
+ light1.position.set(15, 1, 40);
+ scene.add(light1);
- const light2 = new THREE.PointLight( 0xffffff, 1, 50 );
- light2.position.set( -15, 0, 40 );
- scene.add( light2 );
+ const light2 = new THREE.PointLight(0xffffff, 1, 50);
+ light2.position.set(-15, 0, 40);
+ scene.add(light2);
- const light3 = new THREE.PointLight( 0xffffff, 1, 50 );
- light3.position.set( 0, -1, 40 );
- scene.add( light3 );
+ const light3 = new THREE.PointLight(0xffffff, 1, 50);
+ light3.position.set(0, -1, 40);
+ scene.add(light3);
}
/**
@@ -45,11 +45,11 @@ function setup_scene(canvasSpace) { });
/** add flag pole */
- const geometry = new THREE.CylinderGeometry( 0.02, 0.02, 5, 32 );
- const material = new THREE.MeshStandardMaterial( {color: 0xffffff} );
- const cylinder = new THREE.Mesh( geometry, material );
+ const geometry = new THREE.CylinderGeometry(0.02, 0.02, 5, 32);
+ const material = new THREE.MeshStandardMaterial({color: 0xffffff});
+ const cylinder = new THREE.Mesh(geometry, material);
cylinder.position.set(-0.5, -2.25, 0);
- scene.add( cylinder );
+ scene.add(cylinder);
/** add global light */
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
@@ -84,7 +84,7 @@ function init() { const cloth = new Cloth(1, 0.5, 20, 20);
const clothGeometry = cloth.generateGeometry();
- const clothMaterial = new THREE.MeshStandardMaterial({ map: loader.load('Textures/hsrm.jpg'), color: 0xffffff, side: THREE.DoubleSide, flatShading: false});
+ const clothMaterial = new THREE.MeshStandardMaterial({ map: loader.load('Textures/hsrm2.png'), color: {type: "c", value: new THREE.Color(0xffffff)}, side: THREE.DoubleSide, flatShading: false, transparent: true });
//const clothMaterial = new THREE.MeshStandardMaterial({ color: 0xC70039, side: THREE.DoubleSide, flatShading: false });
const clothMesh = new THREE.Mesh(clothGeometry, clothMaterial);
scene.add(clothMesh);
@@ -96,7 +96,9 @@ function init() { let raycaster = new THREE.Raycaster();
let intersects;
- let rightMousePressed;
+ let windKeyDown = false;
+ let dragKeyDown = false;
+ let draggedIndex = -1;
/**
* function called every frame
* @param {number} dt - time passed since last frame in ms
@@ -106,13 +108,18 @@ function init() { cloth.updateGeometry(clothGeometry);
- raycaster.setFromCamera( new THREE.Vector2((mousePos.x / w) * 2 - 1, ((h - mousePos.y) / h) * 2 - 1), camera );
-
- // intersects = raycaster.intersectObject( mesh );
-
- // if ( intersects.length > 0 && rightMousePressed) {
- // // Cloth mouse interaction
- // }
+ raycaster.setFromCamera(new THREE.Vector2((mousePos.x / w) * 2 - 1, ((h - mousePos.y) / h) * 2 - 1), camera);
+
+ intersects = raycaster.intersectObject(clothMesh);
+
+ if (intersects.length > 0) {
+ if (windKeyDown)
+ cloth.blow(camera.position, intersects);
+ if (dragKeyDown && draggedIndex == -1)
+ draggedIndex = intersects[0].face.a;
+ }
+ if (dragKeyDown && draggedIndex != -1)
+ cloth.drag(calculateMousePosToWorld(mousePos), draggedIndex);
setTimeout(() => {
animate(frameTime);
}, frameTime);
@@ -138,7 +145,7 @@ function init() { * start rendering
*/
if (canvas.getContext) {
- animate(performance.now());
+ animate(frameTime);
}
@@ -147,8 +154,6 @@ function init() { canvas.onmousemove = (evt) => {
mousePos.x = evt.clientX;
mousePos.y = evt.clientY;
-
- //cloth.mouseMove(calculateMousePosToWorld(evt));
};
/**
@@ -158,38 +163,38 @@ function init() { evt.preventDefault();
}, false);
+ document.onkeydown = (evt) => {
+ if (evt.code === "KeyW")
+ windKeyDown = true;
+ if (evt.code === "KeyD")
+ dragKeyDown = true;
+ };
- canvas.onmousedown = (evt) => {
-
- // Check mouse click
- rightMousePressed = evt.button == 2;
-
- if(intersects.length > 0 && evt.button == 0){
- //cloth.mousePress(intersects);
- }
- }
-
- canvas.onmouseup = (evt) => {
- //cloth.mouseRelease();
- rightMousePressed = false;
- }
+ document.onkeyup = (evt) => {
+ if (evt.code === "KeyW")
+ windKeyDown = false;
+ if (evt.code === "KeyD") {
+ dragKeyDown = false;
+ draggedIndex = -1;
+ }
+ };
- function calculateMousePosToWorld(evt){
+ function calculateMousePosToWorld(mousePos){
var vec = new THREE.Vector3(); // create once and reuse
var pos = new THREE.Vector3(); // create once and reuse
vec.set(
- ( evt.clientX / window.innerWidth ) * 2 - 1,
- - ( evt.clientY / window.innerHeight ) * 2 + 1,
- 0.5 );
+ (mousePos.x / window.innerWidth) * 2 - 1,
+ - (mousePos.y / window.innerHeight) * 2 + 1,
+ 0.5);
- vec.unproject( camera );
+ vec.unproject(camera);
- vec.sub( camera.position ).normalize();
+ vec.sub(camera.position).normalize();
var distance = - camera.position.z / vec.z;
- pos.copy( camera.position ).add( vec.multiplyScalar( distance ) );
+ pos.copy(camera.position).add(vec.multiplyScalar(distance));
return pos;
}
}
\ No newline at end of file |