From 3327a0e5238cd0e94aaf968da24c05c7b37721f4 Mon Sep 17 00:00:00 2001 From: Fabien Benetou Date: Fri, 13 Jan 2023 15:23:06 +0100 Subject: [PATCH] Tile generation and scaling --- index.html | 71 ++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 64 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 51b19d5..c068127 100644 --- a/index.html +++ b/index.html @@ -1327,14 +1327,15 @@ function draw( position ){ } // the goal is to associate objects as shape with volume to code snippet -function addGltfFromURLAsTarget( url, scale=1 ){ +function addGltfFromURLAsTarget( url, scale=1, position="0 1.7 -0.3" ){ var el = document.createElement("a-entity") AFRAME.scenes[0].appendChild(el) el.setAttribute("gltf-model", url) - el.setAttribute("position", "0 1.7 -0.3") // arbitrary for test + el.setAttribute("position", position) el.setAttribute("scale", scale + " " + scale + " " + scale) targets.push(el) + return el // consider https://sketchfab.com/developers/download-api/downloading-models/javascript } @@ -1876,6 +1877,60 @@ function loadFromMastodon(statusesURL="https://mastodon.pirateparty.be/api/v1/ac } ) ) } +const tile_URL = "../content/KenneyHexTiles/" +const tile_extension = ".glb" +const tiles = ["building_cabin", "building_castle", "building_dock", "building_farm", "building_house", "building_market", "building_mill", "building_mine", "building_sheep", "building_smelter", "building_tower", "building_village", "building_wall", "building_water", "dirt", "dirt_lumber", "grass", "grass_forest", "grass_hill", "path_corner", "path_cornerSharp", "path_crossing", "path_end", "path_intersectionA", "path_intersectionB", "path_intersectionC", "path_intersectionD", "path_intersectionE", "path_intersectionF", "path_intersectionG", "path_intersectionH", "path_start", "path_straight", "river_corner", "river_cornerSharp", "river_crossing", "river_end", "river_intersectionA", "river_intersectionB", "river_intersectionC", "river_intersectionD", "river_intersectionE", "river_intersectionF", "river_intersectionG", "river_intersectionH", "river_start", "river_straight", "sand", "sand_rocks", "stone", "stone_hill", "stone_mountain", "stone_rocks", "unit_boat", "unit_house", "unit_houseLarge", "unit_mill", "unit_tower", "unit_tree", "unit_wallTower", "water", "water_island", "water_rocks",] +const tiles_types_full = [ "building_", "river_", "sand", "stone", "water"] +const tiles_types_parts = [ "unit_", "path_" ] +const tiles_types = [ ...tiles_types_full, ...tiles_types_parts] +const tiles_full = tiles.filter( t => { let present = false; tiles_types_full.map(m => { if (t.indexOf(m)>-1) present = true; }); return present} ) + +function displayAllTiles(){ + const scale = 1/10 + let last_type = null + tiles.map( (t) => { + let x = -1*scale + if (!last_type) n = 0 + tiles_types.map( (tile_type,ttn) => { + if (t.indexOf(tile_type) > -1) { + x = ttn/10 + if (tile_type != last_type) n = 0 + last_type = tile_type + } + } ) + let el = addGltfFromURLAsTarget( tile_URL+t+tile_extension, .09, ""+x+" 0.7 -"+n*scale ) + // el.class = ... + n++ + } ) + // could consider a new spawner type so that picking a tile clones it first +} +// try generating at scale, e.g 2, a landscape to explore based on type + // with scale adjusting as jxr line to be the Wondering pills/drinks/mushroom to change scale + // cf similar commands to move a class, consequently could add class after addGltfFromURLAsTarget + +function randomTileFull(){ + return tiles_full[Math.floor(Math.random()*tiles_full.length)] +} + +function generateRandomPlace(){ + let scale = 1/10 + // let y = -2 // lifesize, scale 1 + let y = 1.4 // dollhouse, scale 1/10 + for (let i=0;i<10;i++){ + for (let j=0;j<10;j++){ + el = addGltfFromURLAsTarget( tile_URL+randomTileFull()+tile_extension, 1*scale, + ""+(i+(j%2?0:1/2))*scale+" "+y+" -"+(j*8.5/10)*scale) + el.className += "tiles" + } + } +} + +function rescalePlace(scale = 10, yoffset=-1){ + let places = Array.from( document.querySelectorAll(".tiles") ) + places.map( e => { scl = e.getAttribute("scale"); e.setAttribute("scale", scl.x*scale+ " " + scl.y*scale + " " + scl.z*scale) } ) + places.map( e => { pos = e.getAttribute("position"); e.setAttribute("position", pos.x*scale+ " " + (pos.y+yoffset) + " " + pos.z*scale) } ) +} + // could change model opacity based on hand position, fading out when within a (very small here) safe space
@@ -1909,15 +1964,17 @@ function loadFromMastodon(statusesURL="https://mastodon.pirateparty.be/api/v1/ac - + + - + - - - + + +