Skip to content
Snippets Groups Projects
Commit 57f703b4 authored by Nora Hansen's avatar Nora Hansen :alien:
Browse files

Merge branch 'Lighting' into 'main' 

Menu and sliders

Closes #19

See merge request !7
parents 2cdc5c0e 8ed0dfd9
No related branches found
No related tags found
1 merge request!7Menu and sliders
Show whitespace changes
Inline Side-by-side
assets/MenuIconClose.png 0 → 100644
+ 0
− 0
View file @ 57f703b4
assets/MenuIconClose.png

2.3 KiB

assets/MenuIconOpen.png 0 → 100644
+ 0
− 0
View file @ 57f703b4
assets/MenuIconOpen.png

2.19 KiB

assets/reset.png 0 → 100644
+ 0
− 0
View file @ 57f703b4
assets/reset.png

3.61 KiB

src/wxs.three.js
+ 66
− 18
View file @ 57f703b4
......@@ -96,14 +96,30 @@ var wxs3 = wxs3 || {};
{
antialias: false // Disabled for performance
}
);
// this.renderer.shadowMap.enabled = true;
this.renderer.setSize(this.dim.width, this.dim.height);
};
ns.ThreeDMap.prototype.createScene = function () {
this.scene = new THREE.Scene();
this.scene.add(new THREE.AmbientLight(0xeeeeee));
var ambLight = new THREE.AmbientLight(0xeeeeee);
ambLight.intensity = 1.0;
// Trying directional lighting
//this.dirLight = new THREE.DirectionalLight(0xFFFF00, 0.5);
// this.dirLight.castShadow = true; // Let light cast shadows
// var cameraHeight = (this.dim.metersHeight / 2) / Math.tan((45 / 2) * Math.PI / 180); // Height of camera
// this.dirLight.position.set(this.dim.width,this.dim.height*2,cameraHeight*400); // Attempting to place light...
this.scene.add(ambLight);
// this.scene.add(this.dirLight);
// const dirLightHelper = new THREE.DirectionalLightHelper( this.dirLight, 1 ); // Create mesh to visualise light
// this.scene.add( dirLightHelper );
};
// Camera func
......@@ -138,7 +154,7 @@ var wxs3 = wxs3 || {};
var centerX;
//this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
this.controls = new THREE.TrackballControls(this.camera);
this.controls = new THREE.TrackballControls(this.camera, this.renderer.domElement);
// // If using OrbitControls,
// // Limit vertical rotation (radians)
......@@ -152,10 +168,11 @@ var wxs3 = wxs3 || {};
centerX = (this.dim.minx + this.dim.maxx) / 2;
centerY = (this.dim.miny + this.dim.maxy) / 2;
this.controls.target = new THREE.Vector3(centerX, centerY, 0);
// Save the initial state of the controls, giving the ability to reset them
// Save the initial state of the controls, giving the ability to reset them (for OrbitControls)
//this.controls.saveState();
};
// Loading manager. For displaying a message while textures are loading
ns.ThreeDMap.prototype.createManager = function () {
this.loadingManager = new THREE.LoadingManager();
......@@ -357,12 +374,9 @@ var wxs3 = wxs3 || {};
// Change texture between normal map and map merged with areaplans
ns.ThreeDMap.prototype.changeTexture = function() {
let i = null;
var temp = null;
var button = document.getElementById("plansButton");
button.innerHTML = this.overlayOn ? "Vis reguleringsplaner" : "Skjul reguleringsplaner";
this.overlayOn = !this.overlayOn;
for (i in this.foregroundGroup.children) {
......@@ -376,6 +390,24 @@ var wxs3 = wxs3 || {};
this.backgroundGroup.children[i].material[0] = this.backgroundGroup.children[i].material[1];
this.backgroundGroup.children[i].material[1] = temp;
}
}
ns.ThreeDMap.prototype.changeOpacity = function(reset) {
var i = null;
var opacityRange = document.getElementById("opacityRange")
if(!reset) {
opacityVal = opacityRange.value / 10.0;
} else {
var opacityVal = 0.5;
opacityRange.value = "5.0";
}
for (i in this.foregroundGroup.children) {
this.foregroundGroup.children[i].material[0].uniforms.u_opacity.value = opacityVal;
}
}
ns.ThreeDMap.prototype.mainTileLoader = function (tileName) {
......@@ -464,10 +496,10 @@ var wxs3 = wxs3 || {};
};
var activeUrl, activeOverlayUrl;
// if (this.dim.wmsUrl)
activeOverlayUrl=WMTSCalls[i].url.wms;
if (this.dim.wmsUrl)
activeOverlayUrl=WMTSCalls[i].url.wms; // Plans
// else
activeUrl=WMTSCalls[i].url.cache_WMTS;
activeUrl=WMTSCalls[i].url.cache_WMTS; // Map
// TODO: Create a loader for images based on the WCS-loader. This allows us to check if the image actually loads and reload if something fails. Also, we can use wireframes as a placeholder.
// Load texture for terrains. The function which was used before was deprecated, so it has been changed
......@@ -475,7 +507,6 @@ var wxs3 = wxs3 || {};
activeUrl,
//THREE.UVMapping
)
var overlayTexture = new THREE.TextureLoader(this.loadingManager).load(activeOverlayUrl,);
this.material = new THREE.MeshStandardMaterial(
......@@ -486,10 +517,12 @@ var wxs3 = wxs3 || {};
//wireframe: true
}
);
this.materialShader = new THREE.ShaderMaterial({
uniforms: {
u_texture: { type: 't', value: texture},
u_overlay: { type: 't', value: overlayTexture}
u_overlay: { type: 't', value: overlayTexture},
u_opacity: { type: 'f', value: 0.5}
},
vertexShader: `
......@@ -506,6 +539,7 @@ var wxs3 = wxs3 || {};
varying vec2 vUv;
uniform sampler2D u_texture;
uniform sampler2D u_overlay;
uniform float u_opacity;
void main() {
vec4 color1 = texture2D(u_texture, vUv);
vec4 color2 = texture2D(u_overlay, vUv);
......@@ -514,7 +548,7 @@ var wxs3 = wxs3 || {};
color2.rgb = color1.rgb;
}
gl_FragColor = mix(color1, color2, 0.5);
gl_FragColor = mix(color1, color2, u_opacity);
}
`
});
......@@ -529,12 +563,14 @@ var wxs3 = wxs3 || {};
}
else {
geometry = new THREE.PlaneGeometry(WMTSCalls[i].tileSpanX, WMTSCalls[i].tileSpanY);
this.material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
this.material = new THREE.MeshStandardMaterial({ color: 0xff0000, wireframe: true });
}
this.mesh = new THREE.Mesh(
geometry,
textures
);
this.mesh.castShadow = true;
this.mesh.receiveShadow = true;
this.mesh.position.x = WMTSCalls[i].bounds.minx + (WMTSCalls[i].tileSpanX / 2);
this.mesh.position.y = WMTSCalls[i].bounds.miny + (WMTSCalls[i].tileSpanY / 2);
this.mesh.tileName = {
......@@ -782,6 +818,18 @@ var wxs3 = wxs3 || {};
}
}
// Increase/decrease Z scale / height differences
// @param plus - True if increase, false if decrease
ns.ThreeDMap.prototype.changeScale = function(reset) {
if(!reset) {
var slider = document.getElementById("scaleRange");
this.foregroundGroup.scale.z = slider.value;
} else {
this.foregroundGroup.scale.z = 2.0;
document.getElementById("scaleRange").value = "2.0";
}
}
// Zoom in/out on map, called by html buttons
// @param plus - True if [+] was clicked, false if [-] was clicked
ns.ThreeDMap.prototype.buttonZoom = function(plus) {
......@@ -806,7 +854,7 @@ var wxs3 = wxs3 || {};
// Checks if anything hasn't loaded properly
function initialCheck() {
var threeChk, trackChk;
var threeChk;
threeChk = THREE.Scene(); // Create a random scene just to check if THREE is loaded
errorCheck(threeChk, 1); // ThreeJS not loaded
......
wxs.three.html
+ 109
− 49
View file @ 57f703b4
......@@ -28,50 +28,104 @@
font-size: 20px;
}
.menuContainer {
/* Menu styling */
#menuContainer {
position: fixed;
z-index: 9997;
top: 0;
}
#menuContent {
transition: 0.2s;
border-radius: 5px;
padding: 2px;
margin-left: -500px;
width: 200px;
background-color: #FFFFFF;
opacity: 0;
}
.menuElement {
padding: 2px;
margin: 2px;
font-size: 13px;
width: 100%;
}
#menuCheckbox {
opacity: 0;
position: absolute;
}
#menuCheckbox:checked ~ #menuContent {
margin-left: 5px;
opacity: 1;
}
/* Burger menu icon */
#menuIcon {
caret-color: transparent;
opacity: 0.7;
border-radius: 5px;
margin: 5px;
width: 35px;
height: 35px;
background-image: url('assets/MenuIconOpen.png');
background-color: #FFFFFF;
background-size: 100%;
}
#menuIcon:hover {
opacity: 1;
transition: 0.2s;
}
input:checked ~ #menuIcon {
opacity: 0.9;
background-image: url('assets/MenuIconClose.png');
}
input:checked ~ #menuIcon:hover {
opacity: 1;
}
.resetImg {
height: 100%;
}
.defaultValueButton {
border-radius: 10px;
height: 20px;
width: 20px;
padding: 1px;
}
/* For bottom buttons and loading message*/
.wrapper {
position: fixed;
z-index: 9998;
bottom: 0;
margin-bottom: 5px;
}
/* Buttons styling */
.ButtonContainer {
display: inline-block;
width :45px;
border-radius: 10px;
margin-right: 5px;
bottom: 0;
}
/* Loading message */
.loadingContainer {
display: inline-block;
}
#loadingDiv {
display: inline-block;
bottom: 0;
margin-left: 2px;
}
#loadingImg {
display: inline-block;
}
#loadingText {
font-size: 20px;
display: inline-block;
bottom: 0;
}
/* Buttons styling */
.ButtonContainer {
display: inline-block;
width :45px;
margin-right: 5px;
bottom: 0;
}
.Buttons {
text-align: center;
/* text-align: center; */
background-color: white;
opacity: 0.7;
border: none;
......@@ -88,17 +142,16 @@
background-color: rgba(234,240,255,255);
transition: 0.1s;
}
/* Zoom buttons */
.zButton {
color: #223442;
font-size: 20px;
height: 30px;
width: 100%;
}
#plusButton {
border-bottom: 0.5px solid #dddddd;
margin-top: 2px;
/* margin-top: 2px; */
border-radius: 10px 10px 0 0;
}
#minusButton {
......@@ -108,41 +161,48 @@
border-radius: 0 0 10px 10px;
}
#resetButton {
color: #223442;
border-radius: 10px;
margin-top: 2px;
height: 45px;
width: 100%;
padding:8px;
}
#plansButton {
font-size: 16px;
border-radius: 10px;
height:30px;
}
img {
height: 100%;
}
</style>
</head>
<body>
<!-- Error message, shown if something is wrong-->
<div id="errorMsg"></div>
<!-- Simple zoom buttons, had to put them here to call the buttonZoom functions -->
<div id="menu" class="menuContainer" >
<button id="plansButton" class="Buttons" onclick="threeDMap.changeTexture()">Vis reguleringsplaner</button>
<div id="menuContainer">
<label for="menuCheckbox">
<input id="menuCheckbox" type="checkbox" />
<div id="menuIcon"></div>
<div id="menuContent">
<div id="plansCheckbox" class="menuElement">
<input type="checkbox" id="planCheckbox" onclick="threeDMap.changeTexture()"/>
<label for="planCheckbox">Reguleringsplaner</label>
</div>
<div id="scaleContainer" class="menuElement">
<div>Høydeoverdriving</div>
<input type="range" step="0.1" id="scaleRange" min="0.1" max="10.0" value="2" oninput="threeDMap.changeScale()"/>
<button class="Buttons defaultValueButton" onclick="threeDMap.changeScale(true)" value="Standardverdi">
<img id="circleArrow" class="resetImg"src="assets/reset.png" alt="default"/>
</button>
</div>
<div id="scaleContainer" class="menuElement">
<div>Opasitet</div>
<input type="range" step="0.1" id="opacityRange" min="0.0" max="10.0" value="5.0" oninput="threeDMap.changeOpacity()"/>
<button class="Buttons defaultValueButton" onclick="threeDMap.changeOpacity(true)" value="Standardverdi">
<img id="circleArrow" class="resetImg"src="assets/reset.png" alt="default"/>
</button>
</div>
</div>
</label>
</div>
<div class="wrapper">
<div id="buttonPanel" class="ButtonContainer">
<input id="plusButton" class="Buttons zButton" type="button" onclick="threeDMap.buttonZoom(true)" value="+"/>
<input id="minusButton" class="Buttons zButton" type="button" onclick="threeDMap.buttonZoom(false)" value="-" />
<!-- <input id="resetButton" class="Buttons" type="button" onclick="threeDMap.resetCameraPos()" value="Reset" /> -->
<!--
<button id="resetButton" class="Buttons" onclick="threeDMap.resetCameraPos()">
<img src="assets/camera-reset.png" alt="cameraresetbutton" />
<img id="resetImg" class="resetImg" src="assets/camera-reset.png" alt="cameraresetbutton" />
</button>
-->
</div>
<div id="loadingDiv" class="LoadingContainer">
<img id="loadingImg" src="https://upload.wikimedia.org/wikipedia/commons/a/a3/Lightness_rotate_36f_cw.gif" width="30px" alt="Loading gif" />
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment