fixed textures and alignment on position 1

master
Fabien Benetou 2 years ago
parent 35ec84ca2a
commit 02aecdfb21
  1. 50
      index.html

@ -46,7 +46,7 @@ var currentGeoPose = null; // https://developer.mozilla.org/en-US/docs/Web/API/G
// otherwise have 2 fallbacks via menu
var positionsCurated = [
{ position:[50.8365354, 4.3581719], hotspots: []},
{ shortname: "baquets", worldposition:[83.03582, -346.4272], position:[49.3516400, 0.5461600], // way heavier!
{ shortname: "baquets", worldposition:[-38, 17], position:[49.3516400, 0.5461600], // way heavier!
offsetLandscapePosition: "-124.32254 0.78377 -46.41836", // TODO use, might prefer something easier to compute to add e.g Vector3, or do pose (position/rotation/scale) per id
// alternatively might show/hide per classname based on shortname
offsetWatersimPosition: "-124.32254 0.78377 -46.41836", // TODO use
@ -194,6 +194,7 @@ function fromOSMTo3DElements( josm, el ){
//var houses = josm.elements.filter( e => (e.type == "way" && e.tags && e.tags["add:housenumber"]) ).map( e => e.geometry)
var houses = josm.elements.filter( e => (e.type == "way" && e.tags && e.tags["building"]) )
.filter( i => !loadedosmways.includes(i.id) )
.filter( i => (i.id < 561974951 || i.id > 561974997) ) // does not seem present in the model (assuming sequential OSM list, as of now)
.map( e => e.geometry)
houses.map( e => { makeBuilding( e, buildingHeight*(1+Math.random()), el ) })
idfound = josm.elements.filter( e => (e.type == "way" && e.tags && e.tags["building"]) )
@ -255,7 +256,7 @@ function addWall(a, b, h, el, color=0x6d6a64){
const material = new THREE.MeshBasicMaterial({
color : new THREE.Color( 0x6d6a64 ).offsetHSL(0,0,-Math.random()/10),
side: THREE.DoubleSide,
map: loader.load('Visuals/TEXTURE_BAT/TEXTURE_BAT_Base_Color.jpg'),
//map: loader.load('Visuals/TEXTURE_BAT/TEXTURE_BAT_Base_Color.jpg'),
});
var mesh = new THREE.Mesh( geometry, material );
@ -334,25 +335,19 @@ function makeWay( points, height, el, color=0xCCCCCC ){
}
function makeLamp( treedata, el){
// <a-gltf-model position="-2 0 -6" scale="2 2 2" src="arbre.gltf"></a-gltf-model>
var tree = document.createElement("a-entity")
tree.setAttribute("position", AFRAME.utils.coordinates.stringify(
pointFromCoordinates( {lat:treedata.lat, lon:treedata.lon} )
) )
//tree.setAttribute("gltf-model", "Visuals/EXPORTS/EXPORTS_gltf/ModelsSolo/AA_Ruelle_Lampadaire.glb" )
tree.setAttribute("instanced-mesh-member", "mesh:#meshlamp")
el.appendChild( tree )
}
function makeTree( treedata, el){
// <a-gltf-model position="-2 0 -6" scale="2 2 2" src="arbre.gltf"></a-gltf-model>
var tree = document.createElement("a-entity")
tree.setAttribute("position", AFRAME.utils.coordinates.stringify(
pointFromCoordinates( {lat:treedata.lat, lon:treedata.lon} )
) )
//tree.setAttribute("gltf-model", "Visuals/EXPORTS/EXPORTS_gltf/AA_Ruelle_Arbre.glb" )
tree.setAttribute("instanced-mesh-member", "mesh:#meshtree")
el.appendChild( tree )
}
@ -371,16 +366,6 @@ function makeBuilding( points, height, el ){
var color = new THREE.Color( 0x8F8FFF ).offsetHSL(0,0,-Math.random());
make3DRoof( poly, building, height, color )
building.setAttribute("shadow", "")// somehow doesn't seem to receive it, only casts
/*
var inbuilding = document.createElement("a-entity")
inbuilding.className = "inbuilding"
building.appendChild( inbuilding )
makeWalls( poly, 0.2, inbuilding )
make3DFloor( poly, inbuilding )
inbuilding.setAttribute("scale", "1.1 1 1.1") // adds an horizontal offset instead of being centered on building
inbuilding.setAttribute("position", "-.2 0 -.2")
*/
}
function makeLine( poly, h, el ){
@ -679,8 +664,8 @@ function startExperience(){
</a-entity>
<a-gltf-model resetanimations="" position="6 6 9" scale="100 100 100" rotation="29 -160 -10" gltf-model="Visuals/ASSETS_3D/AA_Reset.glb" opacity="1"></a-gltf-model>
</a-entity>
<a-entity id="meshlamp" gltf-model="Visuals/EXPORTS/EXPORTS_gltf/ModelsSolo/AA_Ruelle_Lampadaire.glb" instanced-mesh ></a-entity>
<a-entity id="meshtree" gltf-model="Visuals/EXPORTS/EXPORTS_gltf/AA_Ruelle_Arbre.glb" instanced-mesh ></a-entity>
<a-entity id="meshlamp" gltf-model="Visuals/EXPORTS/EXPORTS_gltf/ModelsSolo/AA_Ruelle_Lampadaire.glb" instanced-mesh ></a-entity>
<a-entity id="meshtree" gltf-model="Visuals/EXPORTS/EXPORTS_gltf/AA_Ruelle_Arbre.glb" instanced-mesh ></a-entity>
<a-plane id="ground" visible=false position="0 -.5 0" rotation="-90 0 0" width="1000" height="1000" color="lightgrey"></a-plane>
<a-entity light="type: ambient; color: #BBB"></a-entity>
@ -689,22 +674,21 @@ function startExperience(){
animation__pos="property: position; from:-50 50 100; to: 50 50 100; dur: 20000; easing: linear; loop: true">
</a-entity>
<a-entity position="-70 0 -42" osm id="osm"></a-entity>
<a-entity position="0 -0.10 0" osm id="osm"></a-entity>
<!-- offset on test data for easier vr testing -->
<a-gltf-model class="models_ruelle" visible="" position="-139.95628 0.73 -34.3154" scale="1.2 1.2 1.2" rotation="0 -111.8545396388247 0" gltf-model="Visuals/EXPORTS/EXPORTS_gltf/AA_Quaidelaruelle.glb" listosmways=""></a-gltf-model>
<a-gltf-model class="models_baquets" visible="" position="33.17554 -1.33294 -293.0568" scale="1.2 1.2 1.2" rotation="0 170.2355012158848 0" gltf-model="Visuals/EXPORTS/EXPORTS_gltf/AA_Citedesbaquets.glb" listosmways=""></a-gltf-model>
<a-plane id="landscape" position="0 -12.5 0" scale="10 10 10" rotation="-90 0 -90" width="100" height="100" geometry="segmentsHeight: 128; segmentsWidth: 128"
material="src: ign_terrain_cached.jpg; displacementScale: 10; displacementMap: ign_elevation_cached.jpg;"></a-plane>
<!-- offset on test data for easier vr testing -->
<a-gltf-model class="models_ruelle" visible="" position="-139.95628 0.73 -34.3154" scale="1.2 1.2 1.2" rotation="0 -111.8545396388247 0" gltf-model="Visuals/EXPORTS/EXPORTS_gltf/AA_Quaidelaruelle.glb" listosmways=""></a-gltf-model>
<a-gltf-model class="models_baquets" visible="" position="-28.39341 0 10.05424" scale="" rotation="0 66.68655777527651 0" gltf-model="Visuals/EXPORTS/EXPORTS_gltf/AA_Citedesbaquets.glb" listosmways=""></a-gltf-model>
<a-plane id="landscape" position="1135.38323 -36.66906 -1784.89792" scale="50 50 50" rotation="-90.00021045914971 -96.34743691360897 0" width="100" height="100" geometry="segmentsHeight: 128; segmentsWidth: 128" material="src: ign_terrain_cached.jpg; displacementScale: 5; displacementMap: ign_elevation_cached.jpg" visible=""></a-plane>
<a-plane id="watersim" cerema="" position="0 -51.55 0" rotation="-90 90 0" src="Visuals/EAU/Eau_01.jpg"
material="displacementScale: 0.04; wireframe: false; displacementMap: "
geometry="segmentsHeight: 128; segmentsWidth: 128" scale="1000 1000 100"></a-plane>
<!-- animation might fail due texture.neddUpdate unset -->
<a-plane id="watersim" cerema="" position="0 -51.55 0" rotation="-90 90 0" src="Visuals/EAU/Eau_01.jpg"
material="displacementScale: 0.04; wireframe: false; displacementMap: "
geometry="segmentsHeight: 128; segmentsWidth: 128" scale="1000 1000 100"></a-plane>
<!-- animation might fail due texture.neddUpdate unset -->
<a-image id="debug_baquet_osm" src="baquet_osm.png" visible=false position="-235 1.1 145" rotation="-90 90 0" scale="200 200 200" material="opacity: 0.5" class=debug></a-image>
<a-image id="debug_ruelle_osm" src="ruelle_osm.png" visible=false position="-40 1 -220" rotation="-90 90 0" material="opacity: 0.5" scale="200 200 200" class="debug"></a-image>
<a-image id="debug_sim_cerema" src="" visible=false position="0 1.2 0" rotation="-90 90 0" material="opacity: 0.5" scale="1000 1000 1000" class="debug"></a-image>
<a-image id="debug_baquet_osm" src="baquet_osm.png" visible=false position="-235 1.1 145" rotation="-90 90 0" scale="200 200 200" material="opacity: 0.5" class=debug></a-image>
<a-image id="debug_ruelle_osm" src="ruelle_osm.png" visible=false position="-40 1 -220" rotation="-90 90 0" material="opacity: 0.5" scale="200 200 200" class="debug"></a-image>
<a-image id="debug_sim_cerema" src="" visible=false position="0 1.2 0" rotation="-90 90 0" material="opacity: 0.5" scale="1000 1000 1000" class="debug"></a-image>
<a-sky src="cloudsky.jpg"
animation="from: #000; to: #aaf; loop: true; dur: 20000; dir: alternate; loop:true; property: components.material.material.color; type: color;"
animation_texture="property: material.offset; to: 1 1; dur: 200; easing: linear; loop: true; dir: alternate;"

Loading…
Cancel
Save