Sombras

1 year ago · 8e023cb28a
parent 73109ce2e7
commit 8e023cb28a
6 changed files with 84 additions and 11 deletions
--- a/index.html
+++ b/index.html
@ -15,11 +15,29 @@
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Encode+Sans:wdth,wght@87.5,100..900&display=swap" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
+<style>
+	
+</style>
  <script type="module" src="js/main.js"></script>
  <script>
+function show(s) {
+    document.getElementById("text").innerHTML = s;
+    document.getElementById("popup").style.display = "block";
+}
+
 function hide() {
    document.getElementById("popup").style.display = "none";
 }
+
+function help() {
+    show('<h4>Simulador de Aerogeneradores y Parques Eólicos (SAPE)</h4>' +
+        '<div class="l s"><p>Desarrollado por:</p><ul><li>Dimas Barile (CSC-CONICET)</li><li>José Alberto Martínez Trespalacios (Universidad Tecnológica de Bolivar)</li><li>Sebastián Santisi (CSC-CONICET)</li></ul></div>');
+}
+
+function up() { light.shadow.camera.top += 1; light.shadow.camera.updateProjectionMatrix(); helper.update()}
+	  function down() { light.shadow.camera.bottom -= 1; light.shadow.camera.updateProjectionMatrix(); helper.update()}
+	  function left() { light.shadow.camera.left -= 1; light.shadow.camera.updateProjectionMatrix(); helper.update()}
+	  function right() { light.shadow.camera.right += 1; light.shadow.camera.updateProjectionMatrix(); helper.update()} 
  </script>
 </head>
 <body>
@ -33,9 +51,10 @@ function hide() {
    </div>
   </div>
   <div id="button" onclick="ws.simulate();">¡SIMULAR!</div>
+   <div id="help" onclick="help();">?</div>
   <div id="copyright">&copy;2024 Centro de Simulación Computacional para Aplicaciones Tecnológicas (CSC) - CONICET</div>
   <div id="rotate"><img src="assets/rotar_telefono.png" /><p>Rotá tu<br />dispositivo</p></div>
-   <div id="logo"><a href="http://www.csc.gob.ar"><img src="logooscuro.png" /></a></div>
+   <div id="logo"><a href="http://www.csc.gob.ar"><img src="assets/logooscuro.png" /></a></div>
  </div>
 </body>
 </html>
--- a/js/argentinianflag.js
+++ b/js/argentinianflag.js
@ -15,8 +15,10 @@ class ArgentinianFlag extends THREE.Group {
 		        colors.setXYZ(i, 117/255, 170/255, 219/255);
 	        else
 		        colors.setXYZ(i, 1, 1, 1);
-        var material = new THREE.MeshBasicMaterial({side:THREE.DoubleSide, vertexColors: true});
+        var material = new THREE.MeshStandardMaterial({side:THREE.DoubleSide, vertexColors: true});
        this.mesh = new THREE.Mesh(geometry,material);
+        this.mesh.castShadow = true;
+        this.mesh.receiveShadow = true;
        this.mesh.rotateX(Math.PI/2);

        var scale = height / 3;
--- a/js/checkboard.js
+++ b/js/checkboard.js
@ -14,8 +14,10 @@ function checkBoard(width, height) {
            colors.setXYZ(i, 0x55 / 0xff, 0xd4 / 0xff, 0);
    }
    geometry.setAttribute('color', colors);
-    const material = new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors});
+    const material = new THREE.MeshStandardMaterial({vertexColors: THREE.VertexColors});
+    //const material = new THREE.MeshPhongMaterial({vertexColors: THREE.VertexColors, specular: 0x999999, shiness: 30});
    var mesh = new THREE.Mesh(geometry, material);
+    mesh.receiveShadow = true;

    mesh.position.x = width / 2;
    mesh.position.y = height / 2;
--- a/js/main.js
+++ b/js/main.js
@ -15,11 +15,6 @@ const renderer = new THREE.WebGLRenderer({antialias: true});
 document.body.appendChild(renderer.domElement);
 //renderer.setPixelRatio( window.devicePixelRatio );

-function log(s) {
-    document.getElementById("text").innerHTML = s;
-    document.getElementById("popup").style.display = "block";
-}
-
 class WindSimulation {
    constructor(width, height, mills) {
        this.width = width;
@ -38,8 +33,10 @@ class WindSimulation {

        const loader = new STLLoader();
        loader.load('assets/MonumentoBandera.stl', (geometry) => {
-            var material = new THREE.MeshBasicMaterial({color: 0xffffff});
+            var material = new THREE.MeshStandardMaterial({color: 0xffffff});
            var mesh = new THREE.Mesh(geometry, material);
+            mesh.castShadow = true;
+            mesh.receiveShadow = true;
            var scale = 0.0093;
            mesh.scale.setScalar(scale);
            mesh.rotation.z = -Math.PI / 2;
@ -179,6 +176,34 @@ var screen = new Screen(camera, renderer, new THREE.Vector3(width / 2 + 0.5, hei
 screen.setMoveCallBack((pos, end) => { ws.move(pos, end); });
 screen.onResize();

+
+/*const light = new THREE.DirectionalLight("#FFFFFF");
+light.position.set(5,5,100);
+//scene.add(light);*/
+const ambientLight = new THREE.AmbientLight("#999999", 0.6);
+scene.add(ambientLight);
+const light = new THREE.DirectionalLight( 0xfff8ee, 1 );
+light.position.set(6, -10, 10); //default; light shining from top
+//light.target.position.set(5, 5, 0);
+light.castShadow = true; // default false
+scene.add( light );
+light.shadow.mapSize.width = 1024; // default 512
+light.shadow.mapSize.height = 1024; // default 512
+light.shadow.camera.near = 5;
+light.shadow.camera.far = 25;
+light.shadow.camera.right = 3.5 + 5;
+light.shadow.camera.left = 3.5 - 5;
+light.shadow.camera.top = 6 + 6;
+light.shadow.camera.bottom = 6 - 6;
+
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
+window.light = light;
+
+//const helper = new THREE.CameraHelper( light.shadow.camera );
+//scene.add( helper);
+//window.helper = helper;
+
 window.ws = ws;
 window.screen = screen;
 window.scene = scene;
--- a/js/windmill.js
+++ b/js/windmill.js
@ -24,21 +24,26 @@ class WindMill extends THREE.Group {
    constructor() {
        super()

-        this.material = new THREE.MeshBasicMaterial({color: 0xffffff});
-        this.materialCircle = new THREE.MeshBasicMaterial({color: 0xaa0000});
+        this.material = new THREE.MeshStandardMaterial({color: 0xffffff, roughness: 0.15});
+        this.materialCircle = new THREE.MeshStandardMaterial({color: 0xaa0000});
        //this.materialCircle.transparent = true;
        //this.materialCircle.opacity = 0.5;

        this.meshBlades = new THREE.Mesh(WindMill.geometryBlades, this.material);
+        this.meshBlades.castShadow = true;
+        this.meshBlades.receiveShadow = true;
        this.meshBlades.scale.set(0.0075, 0.0075, 0.0075);
        this.meshBlades.position.z = 90/126;

        this.meshBody = new THREE.Mesh(WindMill.geometryBody, this.material);
+        this.meshBody.castShadow = true;
+        this.meshBody.receiveShadow = true;
        this.meshBody.scale.set(0.0075, 0.0075, 0.0075);
        this.meshBody.position.z = 90/126;

        var geometry = new THREE.CircleGeometry(0.5, 20);
        this.meshCircle = new THREE.Mesh(geometry, this.materialCircle);
+        this.meshCircle.receiveShadow = true;
        this.meshCircle.position.z = 0.001;
        this.meshCircle.visible = false;

--- a/style.css
+++ b/style.css
@ -37,6 +37,14 @@ body {
    margin-top: -3vh;
 }

+.l {
+    text-align: left;
+}
+
+.s {
+    font-size: .7em;
+}
+
 #close {
    font-weight: 900;
    float: right;
@ -62,6 +70,18 @@ body {
    background: blue;
 }

+#help {
+    position: absolute;
+    right: 4vh;
+    top: 18vh;
+    border: solid white 3px;
+    font-weight: 800;
+    padding: .1vh 1vh;
+    border-radius: 1vh;
+    font-size: .8em;
+    cursor: help;
+}
+
 #copyright {
    z-index: 2;
    font-size: 0.4em;