kopia lustrzana https://github.com/OpenDroneMap/WebODM
dat.gui CSS fixes, stats display
rodzic
4353739dd7
commit
2ff833b3a7
|
@ -1,4 +1,6 @@
|
|||
.dg {
|
||||
color: white;
|
||||
|
||||
/** Clear list styles */
|
||||
/* Auto-place container */
|
||||
/* Auto-placed GUI's */
|
||||
|
@ -18,7 +20,7 @@
|
|||
width: 100%;
|
||||
clear: both; }
|
||||
.dg.ac {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
|
|
@ -86,7 +86,7 @@ class ModelView extends React.Component {
|
|||
// }
|
||||
|
||||
componentDidMount() {
|
||||
var canvas = this.canvas;
|
||||
var container = this.container;
|
||||
|
||||
var sceneProperties = {
|
||||
path: "/static/app/test/conv/cloud.js",
|
||||
|
@ -137,7 +137,7 @@ class ModelView extends React.Component {
|
|||
var earthControls;
|
||||
var controls;
|
||||
|
||||
var progressBar = new ProgressBar();
|
||||
var progressBar = new ProgressBar(container);
|
||||
|
||||
var pointcloudPath = sceneProperties.path;
|
||||
|
||||
|
@ -215,9 +215,8 @@ class ModelView extends React.Component {
|
|||
setMaterial(sceneProperties.material);
|
||||
|
||||
// dat.gui
|
||||
gui = new dat.GUI({
|
||||
//height : 5 * 32 - 1
|
||||
});
|
||||
gui = new dat.GUI({autoPlace:false});
|
||||
$(gui.domElement).prependTo(container);
|
||||
|
||||
var params = {
|
||||
"points(m)": pointCountTarget,
|
||||
|
@ -377,17 +376,18 @@ class ModelView extends React.Component {
|
|||
});
|
||||
|
||||
// stats
|
||||
var stats = new Stats();
|
||||
stats = new Stats();
|
||||
stats.domElement.style.position = 'absolute';
|
||||
stats.domElement.style.top = '0px';
|
||||
stats.domElement.style.margin = '5px';
|
||||
document.body.appendChild( stats.domElement );
|
||||
container.appendChild( stats.domElement );
|
||||
|
||||
}
|
||||
|
||||
const initThree = () => {
|
||||
|
||||
var width = canvas.clientWidth;
|
||||
var height = canvas.clientHeight;
|
||||
var width = container.clientWidth;
|
||||
var height = container.clientHeight;
|
||||
var aspect = width / height;
|
||||
var near = 0.1;
|
||||
var far = 1000*1000;
|
||||
|
@ -406,7 +406,7 @@ class ModelView extends React.Component {
|
|||
renderer = new THREE.WebGLRenderer();
|
||||
renderer.setSize(width, height);
|
||||
renderer.autoClear = false;
|
||||
canvas.appendChild(renderer.domElement);
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
skybox = Potree.utils.loadSkybox("/static/app/test/resources/textures/skybox/");
|
||||
|
||||
|
@ -697,20 +697,10 @@ class ModelView extends React.Component {
|
|||
}
|
||||
|
||||
if(stats && showStats){
|
||||
document.getElementById("lblNumVisibleNodes").style.display = "";
|
||||
document.getElementById("lblNumVisiblePoints").style.display = "";
|
||||
stats.domElement.style.display = "";
|
||||
|
||||
stats.domElement.style.display = 'block';
|
||||
stats.update();
|
||||
|
||||
if(pointcloud){
|
||||
document.getElementById("lblNumVisibleNodes").innerHTML = "visible nodes: " + pointcloud.numVisibleNodes;
|
||||
document.getElementById("lblNumVisiblePoints").innerHTML = "visible points: " + Potree.utils.addCommas(pointcloud.numVisiblePoints);
|
||||
}
|
||||
}else if(stats){
|
||||
document.getElementById("lblNumVisibleNodes").style.display = "none";
|
||||
document.getElementById("lblNumVisiblePoints").style.display = "none";
|
||||
stats.domElement.style.display = "none";
|
||||
}else if (stats){
|
||||
stats.domElement.style.display = 'none';
|
||||
}
|
||||
|
||||
camera.fov = fov;
|
||||
|
@ -863,8 +853,8 @@ class ModelView extends React.Component {
|
|||
|
||||
this.render = function(){
|
||||
{// resize
|
||||
var width = canvas.clientWidth;
|
||||
var height = canvas.clientHeight;
|
||||
var width = container.clientWidth;
|
||||
var height = container.clientHeight;
|
||||
var aspect = width / height;
|
||||
|
||||
camera.aspect = aspect;
|
||||
|
@ -988,8 +978,8 @@ class ModelView extends React.Component {
|
|||
// render with splats
|
||||
this.render = function(renderer){
|
||||
|
||||
var width = canvas.clientWidth;
|
||||
var height = canvas.clientHeight;
|
||||
var width = container.clientWidth;
|
||||
var height = container.clientHeight;
|
||||
|
||||
initHQSPlats();
|
||||
|
||||
|
@ -1136,8 +1126,8 @@ class ModelView extends React.Component {
|
|||
};
|
||||
|
||||
var resize = function(){
|
||||
var width = canvas.clientWidth;
|
||||
var height = canvas.clientHeight;
|
||||
var width = container.clientWidth;
|
||||
var height = container.clientHeight;
|
||||
var aspect = width / height;
|
||||
|
||||
var needsResize = (rtColor.width != width || rtColor.height != height);
|
||||
|
@ -1193,8 +1183,8 @@ class ModelView extends React.Component {
|
|||
renderer.render(scene, camera);
|
||||
|
||||
if(pointcloud){
|
||||
var width = canvas.clientWidth;
|
||||
var height = canvas.clientHeight;
|
||||
var width = container.clientWidth;
|
||||
var height = container.clientHeight;
|
||||
|
||||
var octreeSize = pointcloud.pcoGeometry.boundingBox.size().x;
|
||||
|
||||
|
@ -1293,7 +1283,8 @@ class ModelView extends React.Component {
|
|||
render(){
|
||||
return (<div className="model-view">
|
||||
<div
|
||||
ref={(domNode) => { this.canvas = domNode; }}
|
||||
className="container"
|
||||
ref={(domNode) => { this.container = domNode; }}
|
||||
style={{height: "100%", width: "100%"}}
|
||||
onContextMenu={(e) => {e.preventDefault();}}></div>
|
||||
</div>);
|
||||
|
|
|
@ -9,4 +9,19 @@
|
|||
background: -ms-radial-gradient(center, ellipse cover, rgba(79,79,79,1) 0%,rgba(22,22,22,1) 100%);
|
||||
background: radial-gradient(ellipse at center, rgba(79,79,79,1) 0%,rgba(22,22,22,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#161616',GradientType=1 );
|
||||
}
|
||||
.container{
|
||||
position: relative;
|
||||
padding: 0;
|
||||
}
|
||||
.dg{
|
||||
&.main{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
.c{
|
||||
select{
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
|
||||
function ProgressBar(){
|
||||
function ProgressBar(container){
|
||||
this._progress = 0;
|
||||
this._message = "";
|
||||
|
||||
|
@ -14,7 +14,7 @@ function ProgressBar(){
|
|||
//this.elProgress.innerHTML = "progress";
|
||||
|
||||
this.element.innerHTML = "";
|
||||
this.element.style.position = "fixed";
|
||||
this.element.style.position = "absolute";
|
||||
this.element.style.bottom = "40px";
|
||||
this.element.style.width = "200px";
|
||||
this.element.style.marginLeft = "-100px";
|
||||
|
@ -39,11 +39,13 @@ function ProgressBar(){
|
|||
|
||||
this.elProgressMessage.style.position = "absolute";
|
||||
this.elProgressMessage.style.width = "100%";
|
||||
this.elProgressMessage.style.fontSize = "10px";
|
||||
|
||||
this.elProgressMessage.innerHTML = "loading 1 / 10";
|
||||
|
||||
|
||||
|
||||
document.body.appendChild(this.element);
|
||||
container.appendChild(this.element);
|
||||
this.element.appendChild(this.elProgress);
|
||||
this.element.appendChild(this.elProgressMessage);
|
||||
|
||||
|
|
Ładowanie…
Reference in New Issue