ssantisi
/
sape
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Modularización

Browse Source
main
Sebastián Santisi 1 year ago
parent 448db3ae31
commit c617962fd2
9 changed files with 600 additions and 568 deletions
Show Stats Download Patch File Download Diff File

571
index.html
Unescape Escape View File

@ -9,579 +9,14 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<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">
<style>
body {
margin: 0;
font-family: "Encode Sans", sans-serif;
font-weight: 500;
font-size: 4vh;
color: #fff;
}
#container {
position: absolute;
top: 0;
left: 0;
user-select: none;
width: 100%;
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
#popup {
z-index: 1000;
max-width: 70vw;
max-height: 70vh;
overflow-x: hidden;
overflow-y: scroll;
width: auto;
border: solid #fff 5px;
height: auto;
background: #00000088;
padding: 4vh;
text-align: center;
}
#popup p + p {
margin-top: -3vh;
}
#close {
font-weight: 900;
float: right;
font-size: 1.5em;
margin-top: -5vh;
margin-right: -3.5vh;
}
#close:hover {
color: #fff;
}
#button {
position: absolute;
right: 4vh;
top: 4vh;
padding: 4vh;
background: darkblue;
font-weight: 800;
}
#button:hover {
background: blue;
}
#copyright {
z-index: 2;
font-size: 0.4em;
position: absolute;
bottom: 5px;
}
#rotate {
display: none;
position: absolute;
top: 0;
left: 0;
margin: 1vh;
font-size: 0.5em;
width: 20vh;
}
#rotate img {
width: 7vh;
float: left;
padding-right: 1vh;
}
#logo {
z-index: 1;
position: absolute;
right: 1vh;
bottom: 1vh;
}
#logo img {
width: 15vh;
opacity: 50%;
}
#logo img:hover {
opacity: 100%;
}
</style>
<body>
<script type="module">
import * as THREE from 'three';
import { STLLoader } from 'https://cdn.jsdelivr.net/npm/three@0.136.0/examples/jsm/loaders/STLLoader.js';
import { Spring } from './spring.js';
const isMobile = 'ontouchstart' in document.documentElement;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({antialias: true});
//renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.camera = camera;
window.three = THREE;
window.renderer = renderer;
/*const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );*/
var width = 10;
var height = 10;
function plane(width, height) {
var geometry = new THREE.PlaneGeometry(width, height, width, height);
geometry = geometry.toNonIndexed();
const colors = new three.BufferAttribute(new Float32Array(geometry.attributes.position.array.length), 3);
for(var i = 0; i < colors.count; i++) {
var col = Math.trunc(i / 6) % width;
var row = Math.trunc(i / 6 / width);
if((col + row % 2) % 2)
colors.setXYZ(i, 0x44 / 0xff, 0xaa / 0xff, 0);
else
colors.setXYZ(i, 0x55 / 0xff, 0xd4 / 0xff, 0);
}
geometry.setAttribute('color', colors);
const material = new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = width / 2;
mesh.position.y = height / 2;
return mesh;
}
var cb = plane(width, height);
scene.add(cb);
window.cb = cb;
var center = new THREE.Vector3(width / 2, height / 2, 0);
var direction = new THREE.Vector3(-height / 2, -width / 2, 0);
window.r = 23;
window.phi = -0.5;
window.theta = 0.2;
window.center = center;
window.center.z = -0.95;
window.center.x += 0.5;
window.z = 15;
camera.setFocalLength(60);
const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();
var clicked = false;
window.point = new THREE.Vector3();
window.pos = new THREE.Vector3();
function log(s) {
document.getElementById("text").innerHTML = s;
document.getElementById("popup").style.display = "block";
}
function updatePointers(event) {
if(isMobile) {
var touch = event.touches[0] || event.changedTouches[0];
var x = touch.pageX;
var y = touch.pageY;
}
else {
var x = event.clientX
var y = event.clientY;
}
pointer.x = (x / window.innerWidth) * 2 - 1;
pointer.y = -(y / window.innerHeight) * 2 + 1;
window.point.set(( x / window.innerWidth) * 2 - 1, -(y / window.innerHeight) * 2 + 1, 0.5);
}
function onClick(event) {
clicked = true;
updatePointers(event);
}
function onMouseUp(event) {
clicked = false;
updatePointers(event);
//log(clicked);
ws.move(window.pos, true);
}
function onPointerMove(event) {
updatePointers(event);
window.point.unproject(camera);
window.point.sub(camera.position).normalize();
var distance = -camera.position.z / window.point.z;
window.pos.copy(camera.position).add(window.point.multiplyScalar(distance));
if(clicked) {
ws.move(window.pos);
}
}
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.fov = 15;
if(camera.aspect > window.aspect)
window.r = window.rad;
else {
window.r = window.rad * window.aspect / camera.aspect;
}
window.z = window.r / 2;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("container").style.height = window.innerHeight;
document.getElementById("container").style.width = window.innerWidth;
document.getElementById("rotate").style.display = camera.aspect > 1 ? "none" : "block";
var theta = Math.PI / 2 - window.theta;
var phi = window.phi - Math.PI / 2;
var x = window.r * Math.sin(theta) * Math.cos(phi) + center.x;
var y = window.r * Math.sin(theta) * Math.sin(phi) + center.y;
var z = window.r * Math.cos(theta) + center.z;
camera.position.set(x, y, window.z);
camera.up = new THREE.Vector3(0,0,1);
camera.lookAt(center);
}
window.aspect = 2.0;
window.rad = 23;
window.resize = onResize;
if(isMobile) {
window.addEventListener('touchstart', onClick);
window.addEventListener('touchend', onMouseUp);
window.addEventListener('touchmove', onPointerMove);
}
else {
window.addEventListener('mouseup', onMouseUp);
window.addEventListener('mousedown', onClick);
window.addEventListener('pointermove', onPointerMove);
}
window.addEventListener('resize', onResize);
onResize();
class WindMill extends THREE.Group {
static geometryBody = null;
static geometryBlades = null;
static {
const loader = new STLLoader();
loader.load('./aspas_126m.stl', function(geometry) {
WindMill.geometryBlades = geometry;
});
loader.load('./cuerpo_126m.stl', function(geometry) {
WindMill.geometryBody = geometry;
});
}
static isReady() {
return WindMill.geometryBody != null && WindMill.geometryBlades != null;
}
constructor() {
super()
this.material = new THREE.MeshBasicMaterial({color: 0xffffff});
this.materialCircle = new THREE.MeshBasicMaterial({color: 0xaa0000});
//this.materialCircle.transparent = true;
//this.materialCircle.opacity = 0.5;
this.meshBlades = new THREE.Mesh(WindMill.geometryBlades, this.material);
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.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.position.z = 0.01;
this.meshCircle.visible = false;
this.add(this.meshBlades);
this.add(this.meshBody);
this.add(this.meshCircle);
this.spring1 = new Spring(0.5, 2, 20, 6, 1, new THREE.MeshBasicMaterial({color: 0xff0000}));
this.spring1.position.z = 90/126;
this.spring1.rotation.z = -Math.PI/2;
this.spring1.update();
this.add(this.spring1);
this.spring2 = new Spring(0.5, 2, 20, 6, 1, new THREE.MeshBasicMaterial({color: 0xff0000}));
this.spring2.position.z = 90/126;
this.spring2.rotation.z = -Math.PI/2;
this.spring2.rotation.x = Math.PI * 2 / 3;
this.spring2.update();
this.add(this.spring2);
this.spring3 = new Spring(0.5, 2, 20, 6, 1, new THREE.MeshBasicMaterial({color: 0xff0000}));
this.spring3.position.z = 90/126;
this.spring3.rotation.z = -Math.PI/2;
this.spring3.rotation.x = Math.PI * 4 / 3;
this.spring3.update();
this.add(this.spring3);
this.spring1.visible = this.spring2.visible = this.spring3.visible = false;
this.selected = false;
}
animate() {
this.meshBlades.rotation.x += 0.1;
this.spring1.rotation.x += 0.1;
this.spring2.rotation.x += 0.1;
this.spring3.rotation.x += 0.1;
}
select(selected) {
if(selected == this.selected) return;
this.selected = selected;
this.meshCircle.visible = selected;
if(selected)
this.material.color.set(0xff0000);
else
this.material.color.set(0xffffff);
}
}
window.windmill = WindMill;
window.scene = scene;
var wm = null;
var wms = [];
window.wms = wms;
class WindSimulation {
constructor(width, height, mills) {
this.width = width;
this.height = height;
this.mills = mills;
this.wms = [];
this.init();
this.wm = null;
this.simulation = null;
}
init() {
if(!WindMill.isReady()) {
setTimeout(() => { this.init() }, 100);
return;
}
for(var i = 0; i < this.mills; i++) {
var wm = new WindMill();
wm.position.set(i + 0.5, i + 0.5, 0);
wm.rotation.z = Math.PI;
scene.add(wm);
this.wms.push(wm);
}
this.wm = this.wms[0];
}
move(pos, ended=false) {
if(this.simulation) {
scene.remove(this.simulation);
this.simulation = null;
}
var wm = this.wm;
if(ended) {
if(this.wm != null) this.wm.select(false);
this.wm = null;
}
if(wm == null) return false;
if(pos.x > this.width - 0.5 || pos.x < 0.5 || pos.y > this.height - 0.5 || pos.y < 0.5) return false;
for(var i = 0; i < this.wms.length; i++) {
if(this.wms[i] == wm) continue;
if(pos.clone().sub(this.wms[i].position).length() < 1)
return false;
}
wm.position.x = pos.x;
wm.position.y = pos.y;
return true;
}
animate() {
requestAnimationFrame(() => { this.animate(); });
raycaster.setFromCamera(pointer, camera);
if(!isMobile || (isMobile && clicked)) {
const intersects = raycaster.intersectObjects(this.wms);
var wm = null;
for(var i = 0; i < intersects.length; i++) {
if(intersects[i].object.geometry.constructor.name != "CylinderGeometry") {
wm = intersects[i].object.parent;
break;
}
}
if(!clicked || isMobile) {
if(this.wm != wm) {
if(this.wm != null) this.wm.select(false);
if(wm != null) wm.select(true);
}
this.wm = wm;
}
}
for(var i = 0; i < this.wms.length; i++) {
this.wms[i].animate();
//this.wms[i].rotation.z += 0.01;
}
flag.animate();
/*
cone.rotation.y = 0.1 * Math.sin(Date.now() / 1000);
cone.rotation.x = 0.08 * Math.sin(Date.now() / 5000);
*/
renderer.render(scene, camera);
}
simulate() {
var xhr = new XMLHttpRequest();
xhr.open("POST", "/solver/", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
var json = JSON.parse(xhr.responseText);
this.add_simulation(json.ws);
}
};
var pos = [];
for(var i = 0; i < this.wms.length; i++)
pos.push([this.wms[i].position.y, this.wms[i].position.x]);
console.log(pos);
var data = JSON.stringify({"pos": pos});
xhr.send(data);
}
add_simulation(ws) {
var geometry = new THREE.PlaneGeometry(this.width, this.height, 10 * this.width, 10 * this.height);
var colors = new three.BufferAttribute(new Float32Array(geometry.attributes.position.count * 4), 4);
geometry.setAttribute('color', colors);
const material = new THREE.MeshBasicMaterial({vertexColors: true, transparent: true,});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(this.width / 2, this.height / 2, 90/126);
for(var i = 0; i < colors.count; i++) {
var j = Math.trunc(i / 101);
colors.setXYZW(i, 1 - ws[i % 101][100 - j] / 8, 0, 0, 1 - ws[i % 101][100 - j] / 8);
}
if(this.simulation)
scene.remove(this.simulation);
this.simulation = mesh;
scene.add(mesh);
}
}
const loader = new STLLoader();
//loader.load('./casa_80.stl', function(geometry) {
loader.load('./MonumentoBandera.stl', function(geometry) {
var material = new THREE.MeshBasicMaterial({color: 0xffffff});
var mesh = new THREE.Mesh(geometry, material);
var scale = 0.0093;
mesh.scale.setScalar(scale);
mesh.rotation.z = -Math.PI / 2;
mesh.position.x = 9.5;
mesh.position.y = 0.3;
scene.add(mesh);
window.casa = mesh;
});
// Based on https://codepen.io/okada-web/pen/OJydGzy?editors=0010
class ArgentinianFlag extends THREE.Group {
constructor(height) {
super();
var geometry = new THREE.PlaneGeometry(3,2,30,20);
var colors = new three.BufferAttribute(new Float32Array(geometry.attributes.position.array.length), 3);
geometry.setAttribute('color', colors);
for(var i = 0; i < colors.count; i++)
if(i < 31 * 7 || i >= 31 * 14)
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});
this.mesh = new THREE.Mesh(geometry,material);
this.mesh.rotateX(Math.PI/2);
var scale = height / 3;
this.mesh.position.x = 1.5 * scale;
this.mesh.position.z = 1 * scale;
this.mesh.scale.setScalar(scale);
this.add(this.mesh);
}
animate() {
var hor = 0.3;
var speed = 0.1;
var ver = 0.1;
var swing = 0.5;
var pos = this.mesh.geometry.attributes.position;
const time = Date.now() * speed / 50;
for (let y=0; y<20+1; y++) {
for (let x=0; x<30+1; x++) {
const index = x + y * (30+1);
const vertex = pos[index];
pos.setZ(index, Math.sin(hor * x + ver * y - time) * swing * x / 40);
}
}
pos.needsUpdate = true;
}
}
var flag = new ArgentinianFlag(0.3);
scene.add(flag);
window.flag = flag;
flag.position.set(9.5, 0.3, 0.3);
flag.rotation.z = Math.PI;
/*
var geometry = new THREE.CylinderGeometry(0.09, 0.03, 0.5, 10, 5, true);
geometry = geometry.toNonIndexed();
var colors = new three.BufferAttribute(new Float32Array(geometry.attributes.position.array.length), 3);
geometry.setAttribute('color', colors);
for(var i = 0; i < colors.count; i++) {
if((Math.trunc(i / 6) + Math.trunc(i / 30) % 2) % 2)
colors.setXYZ(i, 1, 1, 1);
else
colors.setXYZ(i, 1, 0.3, 0);
}
var material = new THREE.MeshBasicMaterial({vertexColors: true, side: THREE.DoubleSide});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.z = 1;
mesh.position.x = 9.5;
mesh.position.y = 0.5;
mesh.rotation.z = -Math.PI / 2;
var cone = mesh;
scene.add(mesh);*/
var ws = new WindSimulation(10, 10, 5);
window.ws = ws;
window.scene = scene;
ws.animate();
</script>
<link href="style.css" rel="stylesheet">
<script type="module" src="js/main.js"></script>
<script>
function hide() {
document.getElementById("popup").style.display = "none";
}
</script>
<body>
<div id="container">
<div id="popup">
<div id="close" onclick="hide();">✗</div>

47
js/argentinianflag.js
Unescape Escape View File

@ -0,0 +1,47 @@
/* Copyright (C) 2024 Sebastián Santisi <ssantisi@fi.uba.ar>, CSC-CONICET
Based on https://codepen.io/okada-web/pen/OJydGzy?editors=0010
*/
import * as THREE from 'three';
class ArgentinianFlag extends THREE.Group {
constructor(height) {
super();
var geometry = new THREE.PlaneGeometry(3,2,30,20);
var colors = new three.BufferAttribute(new Float32Array(geometry.attributes.position.array.length), 3);
geometry.setAttribute('color', colors);
for(var i = 0; i < colors.count; i++)
if(i < 31 * 7 || i >= 31 * 14)
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});
this.mesh = new THREE.Mesh(geometry,material);
this.mesh.rotateX(Math.PI/2);
var scale = height / 3;
this.mesh.position.x = 1.5 * scale;
this.mesh.position.z = 1 * scale;
this.mesh.scale.setScalar(scale);
this.add(this.mesh);
}
animate() {
var hor = 0.3;
var speed = 0.1;
var ver = 0.1;
var swing = 0.5;
var pos = this.mesh.geometry.attributes.position;
const time = Date.now() * speed / 50;
for (let y=0; y<20+1; y++) {
for (let x=0; x<30+1; x++) {
const index = x + y * (30+1);
const vertex = pos[index];
pos.setZ(index, Math.sin(hor * x + ver * y - time) * swing * x / 40);
}
}
pos.needsUpdate = true;
}
}
export { ArgentinianFlag };

25
js/checkboard.js
Unescape Escape View File

@ -0,0 +1,25 @@
/* Copyright (C) 2024 Sebastián Santisi <ssantisi@fi.uba.ar>, CSC-CONICET */
import * as THREE from 'three';
function checkBoard(width, height) {
var geometry = new THREE.PlaneGeometry(width, height, width, height);
geometry = geometry.toNonIndexed();
const colors = new three.BufferAttribute(new Float32Array(geometry.attributes.position.array.length), 3);
for(var i = 0; i < colors.count; i++) {
var col = Math.trunc(i / 6) % width;
var row = Math.trunc(i / 6 / width);
if((col + row % 2) % 2)
colors.setXYZ(i, 0x44 / 0xff, 0xaa / 0xff, 0);
else
colors.setXYZ(i, 0x55 / 0xff, 0xd4 / 0xff, 0);
}
geometry.setAttribute('color', colors);
const material = new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = width / 2;
mesh.position.y = height / 2;
return mesh;
}
export { checkBoard };

185
js/main.js
Unescape Escape View File

@ -0,0 +1,185 @@
/* Copyright (C) 2024 Sebastián Santisi <ssantisi@fi.uba.ar>, CSC-CONICET */
import * as THREE from 'three';
import { STLLoader } from 'https://cdn.jsdelivr.net/npm/three@0.136.0/examples/jsm/loaders/STLLoader.js';
import { WindMill } from './windmill.js';
import { Screen } from './screen.js';
import { ArgentinianFlag } from './argentinianflag.js';
import { checkBoard } from './checkboard.js';
window.three = THREE;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
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;
this.height = height;
this.mills = mills;
this.wms = [];
this.init_windmills();
this.wm = null;
this.simulation = null;
this.xhr = null;
this.checkBoard = checkBoard(width, height);
scene.add(this.checkBoard);
const loader = new STLLoader();
loader.load('./MonumentoBandera.stl', (geometry) => {
var material = new THREE.MeshBasicMaterial({color: 0xffffff});
var mesh = new THREE.Mesh(geometry, material);
var scale = 0.0093;
mesh.scale.setScalar(scale);
mesh.rotation.z = -Math.PI / 2;
mesh.position.x = 9.5;
mesh.position.y = 0.3;
scene.add(mesh);
this.monument = mesh;
});
this.flag = new ArgentinianFlag(0.3);
this.flag.position.set(9.5, 0.3, 0.3);
this.flag.rotation.z = Math.PI;
scene.add(this.flag);
}
init_windmills() {
if(!WindMill.isReady()) {
setTimeout(() => { this.init_windmills() }, 100);
return;
}
for(var i = 0; i < this.mills; i++) {
var wm = new WindMill();
wm.position.set(i + 0.5, i + 0.5, 0);
wm.rotation.z = Math.PI;
scene.add(wm);
this.wms.push(wm);
}
this.wm = this.wms[0];
}
move(pos, ended=false) {
if(this.simulation) {
scene.remove(this.simulation);
this.simulation = null;
}
var wm = this.wm;
if(ended) {
if(this.wm != null) this.wm.select(false);
this.wm = null;
}
if(wm == null) return false;
if(pos.x > this.width - 0.5 || pos.x < 0.5 || pos.y > this.height - 0.5 || pos.y < 0.5) return false;
for(var i = 0; i < this.wms.length; i++) {
if(this.wms[i] == wm) continue;
if(pos.clone().sub(this.wms[i].position).length() < 1)
return false;
}
wm.position.x = pos.x;
wm.position.y = pos.y;
return true;
}
animate() {
requestAnimationFrame(() => { this.animate(); });
if(!Screen.isMobile || (Screen.isMobile && screen.clicked)) {
const intersects = screen.raycaster.intersectObjects(this.wms);
var wm = null;
for(var i = 0; i < intersects.length; i++) {
if(intersects[i].object.geometry.constructor.name != "CylinderGeometry") {
wm = intersects[i].object.parent;
break;
}
}
if(!screen.clicked || Screen.isMobile) {
if(this.wm != wm) {
if(this.wm != null) this.wm.select(false);
if(wm != null) wm.select(true);
}
this.wm = wm;
}
}
for(var i = 0; i < this.wms.length; i++) {
this.wms[i].animate();
//this.wms[i].rotation.z += 0.01;
}
//this.flag.rotation.z += 0.01;
this.flag.animate();
renderer.render(scene, camera);
}
simulate() {
if(this.xhr != null)
this.xhr.abort();
var xhr = new XMLHttpRequest();
this.xhr = xhr;
xhr.open("POST", "/solver/", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = () => {
if(this.xhr != xhr) return;
if (xhr.readyState === 4 && xhr.status === 200) {
var json = JSON.parse(xhr.responseText);
this.add_simulation(json.ws);
this.xhr = null;
}
};
var pos = [];
for(var i = 0; i < this.wms.length; i++)
pos.push([this.wms[i].position.y, this.wms[i].position.x]);
var data = JSON.stringify({"pos": pos});
xhr.send(data);
}
add_simulation(ws) {
var geometry = new THREE.PlaneGeometry(this.width, this.height, 10 * this.width, 10 * this.height);
var colors = new three.BufferAttribute(new Float32Array(geometry.attributes.position.count * 4), 4);
geometry.setAttribute('color', colors);
const material = new THREE.MeshBasicMaterial({vertexColors: true, transparent: true,});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(this.width / 2, this.height / 2, 90/126);
for(var i = 0; i < colors.count; i++) {
var j = Math.trunc(i / 101);
colors.setXYZW(i, 1 - ws[i % 101][100 - j] / 8, 0, 0, 1 - ws[i % 101][100 - j] / 8);
}
if(this.simulation)
scene.remove(this.simulation);
this.simulation = mesh;
scene.add(mesh);
}
}
var width = 10;
var height = 10;
var ws = new WindSimulation(width, height, 5);
var screen = new Screen(camera, renderer, new THREE.Vector3(width / 2 + 0.5, height / 2, -0.95));
screen.setMoveCallBack((pos, end) => { ws.move(pos, end); });
screen.onResize();
window.ws = ws;
window.screen = screen;
window.scene = scene;
ws.animate();

117
js/screen.js
Unescape Escape View File

@ -0,0 +1,117 @@
/* Copyright (C) 2024 Sebastián Santisi <ssantisi@fi.uba.ar>, CSC-CONICET */
import * as THREE from 'three';
class Screen {
static isMobile = 'ontouchstart' in document.documentElement;
constructor(camera, renderer, center) {
this.camera = camera;
this.renderer = renderer;
this.center = center;
this.cbmove = null;
this.raycaster = new THREE.Raycaster();
this.pointerScreen = new THREE.Vector2();
this.pointerWorld = new THREE.Vector3();
this.radius = 23;
this.phi = -0.5;
this.theta = 0.45;
this.z = 15;
this.aspect = 2.24;
this.clicked = false;
this.camera.setFocalLength(60);
if(Screen.isMobile) {
window.addEventListener('touchstart', (event) => { this.onClick(event); });
window.addEventListener('touchend', (event) => { this.onMouseUp(event); });
window.addEventListener('touchmove', (event) => { this.onPointerMove(event); });
}
else {
window.addEventListener('mouseup', (event) => { this.onMouseUp(event); });
window.addEventListener('mousedown', (event) => { this.onClick(event); });
window.addEventListener('pointermove', (event) => { this.onPointerMove(event); });
}
window.addEventListener('resize', () => { this.onResize(); });
}
setMoveCallBack(cbmove) {
this.cbmove = cbmove;
}
updatePointers(event) {
if(Screen.isMobile) {
var touch = event.touches[0] || event.changedTouches[0];
var x = touch.pageX;
var y = touch.pageY;
}
else {
var x = event.clientX
var y = event.clientY;
}
this.pointerScreen.x = (x / window.innerWidth) * 2 - 1;
this.pointerScreen.y = -(y / window.innerHeight) * 2 + 1;
this.raycaster.setFromCamera(this.pointerScreen, this.camera);
var point = new THREE.Vector3(this.pointerScreen.x, this.pointerScreen.y, 0.5);
point.unproject(this.camera);
point.sub(this.camera.position).normalize();
var distance = -this.camera.position.z / point.z;
this.pointerWorld.copy(this.camera.position).add(point.multiplyScalar(distance));
}
onClick(event) {
this.clicked = true;
this.updatePointers(event);
}
onMouseUp(event) {
this.clicked = false;
this.updatePointers(event);
ws.move(this.pointerWorld, true);
if(this.cbmove)
this.cbmove(this.pointerWorld, true);
}
onPointerMove(event) {
this.updatePointers(event);
if(this.clicked) {
if(this.cbmove)
this.cbmove(this.pointerWorld, false);
}
}
onResize() {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.fov = 15;
this.camera.updateProjectionMatrix();
var r;
if(this.camera.aspect > this.aspect)
r = this.radius;
else {
r = this.radius * this.aspect / this.camera.aspect;
}
this.renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("container").style.height = window.innerHeight;
document.getElementById("container").style.width = window.innerWidth;
document.getElementById("rotate").style.display = this.camera.aspect > 1 ? "none" : "block";
var theta = Math.PI / 2 - this.theta;
var phi = this.phi - Math.PI / 2;
var x = r * Math.sin(theta) * Math.cos(phi) + this.center.x;
var y = r * Math.sin(theta) * Math.sin(phi) + this.center.y;
var z = r * Math.cos(theta) + this.center.z;
this.camera.position.set(x, y, z);
this.camera.up = new THREE.Vector3(0,0,1);
this.camera.lookAt(this.center);
this.raycaster.setFromCamera(this.pointerScreen, this.camera);
}
}
export { Screen };

0
spring.js → js/spring.js
Unescape Escape View File

23
js/windcone.js
Unescape Escape View File

@ -0,0 +1,23 @@
var geometry = new THREE.CylinderGeometry(0.09, 0.03, 0.5, 10, 5, true);
geometry = geometry.toNonIndexed();
var colors = new three.BufferAttribute(new Float32Array(geometry.attributes.position.array.length), 3);
geometry.setAttribute('color', colors);
for(var i = 0; i < colors.count; i++) {
if((Math.trunc(i / 6) + Math.trunc(i / 30) % 2) % 2)
colors.setXYZ(i, 1, 1, 1);
else
colors.setXYZ(i, 1, 0.3, 0);
}
var material = new THREE.MeshBasicMaterial({vertexColors: true, side: THREE.DoubleSide});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.z = 1;
mesh.position.x = 9.5;
mesh.position.y = 0.5;
mesh.rotation.z = -Math.PI / 2;
var cone = mesh;
scene.add(mesh);
/*
cone.rotation.y = 0.1 * Math.sin(Date.now() / 1000);
cone.rotation.x = 0.08 * Math.sin(Date.now() / 5000);
*/

98
js/windmill.js
Unescape Escape View File

@ -0,0 +1,98 @@
/* Copyright (C) 2024 Sebastián Santisi <ssantisi@fi.uba.ar>, CSC-CONICET */
import * as THREE from 'three';
import { STLLoader } from 'https://cdn.jsdelivr.net/npm/three@0.136.0/examples/jsm/loaders/STLLoader.js';
import { Spring } from './spring.js';
class WindMill extends THREE.Group {
static geometryBody = null;
static geometryBlades = null;
static {
const loader = new STLLoader();
loader.load('./aspas_126m_85.stl', function(geometry) {
WindMill.geometryBlades = geometry;
});
loader.load('./cuerpo_126m_50.stl', function(geometry) {
WindMill.geometryBody = geometry;
});
}
static isReady() {
return WindMill.geometryBody != null && WindMill.geometryBlades != null;
}
constructor() {
super()
this.material = new THREE.MeshBasicMaterial({color: 0xffffff});
this.materialCircle = new THREE.MeshBasicMaterial({color: 0xaa0000});
//this.materialCircle.transparent = true;
//this.materialCircle.opacity = 0.5;
this.meshBlades = new THREE.Mesh(WindMill.geometryBlades, this.material);
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.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.position.z = 0.01;
this.meshCircle.visible = false;
this.add(this.meshBlades);
this.add(this.meshBody);
this.add(this.meshCircle);
this.spring1 = new Spring(0.5, 2, 20, 6, 1, new THREE.MeshBasicMaterial({color: 0xff0000}));
this.spring1.position.z = 90/126;
this.spring1.rotation.z = -Math.PI/2;
this.spring1.rotation.x = -Math.PI;
this.spring1.update();
this.add(this.spring1);
this.spring2 = new Spring(0.5, 2, 20, 6, 1, new THREE.MeshBasicMaterial({color: 0xff0000}));
this.spring2.position.z = 90/126;
this.spring2.rotation.z = -Math.PI/2;
this.spring2.rotation.x = -Math.PI * 1 / 3;
this.spring2.update();
this.add(this.spring2);
this.spring3 = new Spring(0.5, 2, 20, 6, 1, new THREE.MeshBasicMaterial({color: 0xff0000}));
this.spring3.position.z = 90/126;
this.spring3.rotation.z = -Math.PI/2;
this.spring3.rotation.x = Math.PI * 1 / 3;
this.spring3.update();
this.add(this.spring3);
this.spring1.visible = this.spring2.visible = this.spring3.visible = false;
this.selected = false;
}
animate() {
this.meshBlades.rotation.x += 0.1;
this.spring1.rotation.x += 0.1;
this.spring2.rotation.x += 0.1;
this.spring3.rotation.x += 0.1;
}
select(selected) {
if(selected == this.selected) return;
this.selected = selected;
this.meshCircle.visible = selected;
if(selected)
this.material.color.set(0xff0000);
else
this.material.color.set(0xffffff);
}
show_springs(value) {
this.spring1.visible = this.spring2.visible = this.spring3.visible = value;
}
}
export { WindMill };

102
style.css
Unescape Escape View File

@ -0,0 +1,102 @@
body {
margin: 0;
font-family: "Encode Sans", sans-serif;
font-weight: 500;
font-size: 4vh;
color: #fff;
}
#container {
position: absolute;
top: 0;
left: 0;
user-select: none;
width: 100%;
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
#popup {
z-index: 1000;
max-width: 70vw;
max-height: 70vh;
overflow-x: hidden;
overflow-y: scroll;
width: auto;
border: solid #fff 5px;
height: auto;
background: #00000088;
padding: 4vh;
text-align: center;
}
#popup p + p {
margin-top: -3vh;
}
#close {
font-weight: 900;
float: right;
font-size: 1.5em;
margin-top: -5vh;
margin-right: -3.5vh;
}
#close:hover {
color: #fff;
}
#button {
position: absolute;
right: 4vh;
top: 4vh;
padding: 4vh;
background: darkblue;
font-weight: 800;
}
#button:hover {
background: blue;
}
#copyright {
z-index: 2;
font-size: 0.4em;
position: absolute;
bottom: 5px;
}
#rotate {
display: none;
position: absolute;
top: 0;
left: 0;
margin: 1vh;
font-size: 0.5em;
width: 20vh;
}
#rotate img {
width: 7vh;
float: left;
padding-right: 1vh;
}
#logo {
z-index: 1;
position: absolute;
right: 1vh;
bottom: 1vh;
}
#logo img {
width: 15vh;
opacity: 50%;
}
#logo img:hover {
opacity: 100%;
}
Write Preview
Loading…
Cancel
Save