diff --git a/index.html b/index.html index 203acf5..25c2b0a 100644 --- a/index.html +++ b/index.html @@ -15,11 +15,29 @@ + @@ -33,9 +51,10 @@ function hide() {
¡SIMULAR!
+
?

Rotá tu
dispositivo

- + diff --git a/js/argentinianflag.js b/js/argentinianflag.js index 79479fe..4484dfb 100644 --- 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; diff --git a/js/checkboard.js b/js/checkboard.js index ff6420a..ed4650f 100644 --- 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; diff --git a/js/main.js b/js/main.js index d2e7022..2df352c 100644 --- 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; diff --git a/js/windmill.js b/js/windmill.js index 6b6957b..7fa79e7 100644 --- 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; diff --git a/style.css b/style.css index bd51fdc..83c9bcb 100644 --- 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;