mirror
/
OpenDroneMap-WebODM
kopia lustrzana https://github.com/OpenDroneMap/WebODM
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Updated potree code to run on latest version of three.js, still a few quirks to solve

pull/78/head
Piero Toffanin 2017-01-11 13:50:07 -05:00
rodzic 370cb1dfbe
commit 4c7c53e07d
3 zmienionych plików z 121 dodań i 139 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

155
app/static/app/js/ModelView.jsx
Wyświetl plik

@ -28,63 +28,6 @@ class ModelView extends React.Component {
}; };
} }
// componentDidMount() {
// let camera, controls, scene, renderer;
// const init = () => {
// camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
// camera.up = new THREE.Vector3( 0, 0, -1 );
// camera.position.set(0, 0, -20);
// scene = new THREE.Scene();
// const ambient = new THREE.AmbientLight(0xFFFFFF, 1.0);
// scene.add(ambient);
// var mtlLoader = new THREE.MTLLoader();
// mtlLoader.setTexturePath('/static/app/test/');
// mtlLoader.setPath('/static/app/test/');
// mtlLoader.load('odm_textured_model.mtl', function (materials) {
// materials.preload();
// const objLoader = new THREE.OBJLoader();
// objLoader.setMaterials(materials);
// objLoader.load('/static/app/test/odm_textured_model.obj', function (object) {
// scene.add(object);
// // Focus on object
// var bb = new THREE.Box3()
// bb.setFromObject(object);
// bb.getCenter(controls.target);
// controls.zoom = 5;
// });
// });
// renderer = new THREE.WebGLRenderer();
// renderer.setPixelRatio(window.devicePixelRatio);
// renderer.setSize($(canvas).width(), $(canvas).height());
// controls = new THREE.OrbitControls(camera, renderer.domElement);
// controls.enableDamping = true;
// controls.dampingFactor = 0.25;
// controls.enableZoom = true;
// controls.rotateSpeed = 0.5;
// controls.zoomSpeed = 1.5;
// canvas.appendChild(renderer.domElement);
// };
// function render() {
// requestAnimationFrame(render);
// controls.update();
// renderer.render(scene, camera);
// }
// init();
// render();
// }
componentDidMount() { componentDidMount() {
var container = this.container; var container = this.container;
@ -414,6 +357,7 @@ class ModelView extends React.Component {
camera.position.set(-304, 372, 318); camera.position.set(-304, 372, 318);
camera.rotation.y = -Math.PI / 4; camera.rotation.y = -Math.PI / 4;
camera.rotation.x = -Math.PI / 6; camera.rotation.x = -Math.PI / 6;
//useOrbitControls(); //useOrbitControls();
earthControls = new THREE.EarthControls(camera, renderer, scenePointCloud); earthControls = new THREE.EarthControls(camera, renderer, scenePointCloud);
earthControls.addEventListener("proposeTransform", function(event){ earthControls.addEventListener("proposeTransform", function(event){
@ -431,10 +375,11 @@ class ModelView extends React.Component {
// enable frag_depth extension for the interpolation shader, if available // enable frag_depth extension for the interpolation shader, if available
renderer.context.getExtension("EXT_frag_depth"); renderer.context.getExtension("EXT_frag_depth");
// load pointcloud var axisHelper = new THREE.AxisHelper( 35 );
if(!pointcloudPath){ scene.add( axisHelper );
}else if(pointcloudPath.indexOf("cloud.js") > 0){ // load pointcloud
if(pointcloudPath.indexOf("cloud.js") > 0){
Potree.POCLoader.load(pointcloudPath, function(geometry){ Potree.POCLoader.load(pointcloudPath, function(geometry){
pointcloud = new Potree.PointCloudOctree(geometry); pointcloud = new Potree.PointCloudOctree(geometry);
@ -470,8 +415,6 @@ class ModelView extends React.Component {
earthControls.pointclouds.push(pointcloud); earthControls.pointclouds.push(pointcloud);
if(sceneProperties.navigation === "Earth"){ if(sceneProperties.navigation === "Earth"){
useEarthControls(); useEarthControls();
}else if(sceneProperties.navigation === "Orbit"){ }else if(sceneProperties.navigation === "Orbit"){
@ -497,60 +440,10 @@ class ModelView extends React.Component {
} }
} }
addObjModel();
}); });
}else if(pointcloudPath.indexOf(".vpc") > 0){ }else{
Potree.PointCloudArena4DGeometry.load(pointcloudPath, function(geometry){ throw new Error("pointcloudPath does not contain a reference to cloud.js");
pointcloud = new Potree.PointCloudArena4D(geometry);
pointcloud.visiblePointsTarget = 500*1000;
//pointcloud.applyMatrix(new THREE.Matrix4().set(
// 1,0,0,0,
// 0,0,1,0,
// 0,-1,0,0,
// 0,0,0,1
//));
referenceFrame.add(pointcloud);
flipYZ();
referenceFrame.updateMatrixWorld(true);
var sg = pointcloud.boundingSphere.clone().applyMatrix4(pointcloud.matrixWorld);
referenceFrame.position.sub(sg.center);
referenceFrame.position.y += sg.radius / 2;
referenceFrame.updateMatrixWorld(true);
camera.zoomTo(pointcloud, 1);
initGUI();
pointcloud.material.interpolation = false;
pointcloud.material.pointSizeType = Potree.PointSizeType.ATTENUATED;
earthControls.pointclouds.push(pointcloud);
if(sceneProperties.navigation === "Earth"){
useEarthControls();
}else if(sceneProperties.navigation === "Orbit"){
useOrbitControls();
}else if(sceneProperties.navigation === "Flight"){
useFPSControls();
}else{
console.warning("No navigation mode specivied. Using OrbitControls");
useOrbitControls();
}
if(sceneProperties.cameraPosition != null){
var cp = new THREE.Vector3(sceneProperties.cameraPosition[0], sceneProperties.cameraPosition[1], sceneProperties.cameraPosition[2]);
camera.position.copy(cp);
}
if(sceneProperties.cameraTarget != null){
var ct = new THREE.Vector3(sceneProperties.cameraTarget[0], sceneProperties.cameraTarget[1], sceneProperties.cameraTarget[2]);
camera.lookAt(ct);
}
});
} }
var grid = Potree.utils.createGrid(5, 5, 2); var grid = Potree.utils.createGrid(5, 5, 2);
@ -563,7 +456,6 @@ class ModelView extends React.Component {
// background // background
// var texture = THREE.ImageUtils.loadTexture( '/static/app/test/resources/textures/background.gif' );
var texture = Potree.utils.createBackgroundTexture(512, 512); var texture = Potree.utils.createBackgroundTexture(512, 512);
texture.minFilter = texture.magFilter = THREE.NearestFilter; texture.minFilter = texture.magFilter = THREE.NearestFilter;
@ -590,6 +482,37 @@ class ModelView extends React.Component {
var light = new THREE.AmbientLight( 0x555555 ); // soft white light var light = new THREE.AmbientLight( 0x555555 ); // soft white light
scenePointCloud.add( light ); scenePointCloud.add( light );
function addObjModel(){
var cube = new THREE.Mesh( new THREE.CubeGeometry( 10, 10, 10 ), new THREE.MeshNormalMaterial() );
cube.position.copy(referenceFrame.position);
console.log(referenceFrame.position);
scenePointCloud.add(cube);
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setTexturePath('/static/app/test/');
mtlLoader.setPath('/static/app/test/');
mtlLoader.load('odm_textured_model.mtl', function (materials) {
materials.preload();
const objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.load('/static/app/test/odm_textured_model.obj', function (object) {
// object.position.copy(referenceFrame.position);
// object.updateMatrixWorld(true);
// pointcloud.rotateY(THREE.Math.degToRad(-30));
// pointcloud.rotateZ(THREE.Math.degToRad(60));
referenceFrame.add(object);
});
});
}
} }
function flipYZ(){ function flipYZ(){

99
app/static/app/js/vendor/potree/js/potree.js vendored
Wyświetl plik

@ -1843,6 +1843,65 @@ Potree.PointCloudMaterial = function(parameters){
hemisphereLightSkyColor: { type: "fv", value: null }, hemisphereLightSkyColor: { type: "fv", value: null },
hemisphereLightGroundColor: { type: "fv", value: null }, hemisphereLightGroundColor: { type: "fv", value: null },
hemisphereLightDirection: { type: "fv", value: null }, hemisphereLightDirection: { type: "fv", value: null },
directionalLights: { value: [], properties: {
direction: {},
color: {},
shadow: {},
shadowBias: {},
shadowRadius: {},
shadowMapSize: {}
} },
directionalShadowMap: { value: [] },
directionalShadowMatrix: { value: [] },
spotLights: { value: [], properties: {
color: {},
position: {},
direction: {},
distance: {},
coneCos: {},
penumbraCos: {},
decay: {},
shadow: {},
shadowBias: {},
shadowRadius: {},
shadowMapSize: {}
} },
spotShadowMap: { value: [] },
spotShadowMatrix: { value: [] },
pointLights: { value: [], properties: {
color: {},
position: {},
decay: {},
distance: {},
shadow: {},
shadowBias: {},
shadowRadius: {},
shadowMapSize: {}
} },
pointShadowMap: { value: [] },
pointShadowMatrix: { value: [] },
hemisphereLights: { value: [], properties: {
direction: {},
skyColor: {},
groundColor: {}
} },
rectAreaLights: { value: [], properties: {
color: {},
position: {},
width: {},
height: {}
} }
}; };
this.defaultAttributeValues.normal = [0,0,0]; this.defaultAttributeValues.normal = [0,0,0];
@ -4177,7 +4236,7 @@ Potree.PointCloudOctree.prototype.updateVisibility = function(camera, renderer){
if((typeof parent === "undefined" || parent instanceof Potree.PointCloudOctreeNode) && geometryNode.loaded){ if((typeof parent === "undefined" || parent instanceof Potree.PointCloudOctreeNode) && geometryNode.loaded){
var pcoNode = new Potree.PointCloudOctreeNode(); var pcoNode = new Potree.PointCloudOctreeNode();
var sceneNode = new THREE.PointCloud(geometry, this.material); var sceneNode = new THREE.Points(geometry, this.material);
sceneNode.visible = false; sceneNode.visible = false;
pcoNode.name = geometryNode.name; pcoNode.name = geometryNode.name;
@ -4330,7 +4389,7 @@ Potree.PointCloudOctree.prototype.updateMaterial = function(material, visibleNod
material.spacing = this.pcoGeometry.spacing; material.spacing = this.pcoGeometry.spacing;
material.near = camera.near; material.near = camera.near;
material.far = camera.far; material.far = camera.far;
material.uniforms.octreeSize.value = this.pcoGeometry.boundingBox.size().x; material.uniforms.octreeSize.value = this.pcoGeometry.boundingBox.getSize().x;
// update visibility texture // update visibility texture
if(material.pointSizeType){ if(material.pointSizeType){
@ -4671,7 +4730,7 @@ Potree.PointCloudOctree.prototype.getProfile = function(start, end, width, depth
var pointsFound = 0; var pointsFound = 0;
if(object instanceof THREE.PointCloud){ if(object instanceof THREE.Points){
var geometry = object.geometry; var geometry = object.geometry;
var positions = geometry.attributes.position; var positions = geometry.attributes.position;
var p = positions.array; var p = positions.array;
@ -4734,7 +4793,7 @@ Potree.PointCloudOctree.prototype.getProfile = function(start, end, width, depth
if(object == this || object.level < depth){ if(object == this || object.level < depth){
for(var i = 0; i < object.children.length; i++){ for(var i = 0; i < object.children.length; i++){
var child = object.children[i]; var child = object.children[i];
if(child instanceof THREE.PointCloud){ if(child instanceof THREE.Points){
var sphere = child.boundingSphere.clone().applyMatrix4(child.matrixWorld); var sphere = child.boundingSphere.clone().applyMatrix4(child.matrixWorld);
if(cutPlane.distanceToSphere(sphere) < sphere.radius){ if(cutPlane.distanceToSphere(sphere) < sphere.radius){
stack.push(child); stack.push(child);
@ -4995,7 +5054,7 @@ Potree.PointCloudOctree.prototype.createDEM = function(node){
var world = sceneNode.matrixWorld; var world = sceneNode.matrixWorld;
var boundingBox = sceneNode.boundingBox.clone().applyMatrix4(world); var boundingBox = sceneNode.boundingBox.clone().applyMatrix4(world);
var bbSize = boundingBox.size(); var bbSize = boundingBox.getSize();
var positions = sceneNode.geometry.attributes.position.array; var positions = sceneNode.geometry.attributes.position.array;
var demSize = 64; var demSize = 64;
var demMArray = new Array(demSize*demSize); var demMArray = new Array(demSize*demSize);
@ -5174,7 +5233,7 @@ Potree.PointCloudOctree.prototype.getDEMHeight = function(position){
var box = dem.boundingBox2D; var box = dem.boundingBox2D;
var insideBox = box.containsPoint(pos2); var insideBox = box.containsPoint(pos2);
if(box.containsPoint(pos2)){ if(box.containsPoint(pos2)){
var uv = pos2.clone().sub(box.min).divide(box.size()); var uv = pos2.clone().sub(box.min).divide(box.getSize());
var xy = uv.clone().multiplyScalar(demSize); var xy = uv.clone().multiplyScalar(demSize);
var demHeight = 0; var demHeight = 0;
@ -5299,9 +5358,9 @@ Potree.PointCloudOctree.prototype.generateTerain = function(){
} }
geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) ); geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
var material = new THREE.PointCloudMaterial({size: 20, color: 0x00ff00}); var material = new THREE.PointsMaterial({size: 20, color: 0x00ff00});
var pc = new THREE.PointCloud(geometry, material); var pc = new THREE.Points(geometry, material);
scene.add(pc); scene.add(pc);
}; };
@ -5643,7 +5702,7 @@ Potree.utils.createGrid = function createGrid(width, length, spacing, color){
geometry.vertices.push(new THREE.Vector3(i*spacing-(spacing*width)/2, 0, +(spacing*length)/2)); geometry.vertices.push(new THREE.Vector3(i*spacing-(spacing*width)/2, 0, +(spacing*length)/2));
} }
var line = new THREE.Line(geometry, material, THREE.LinePieces); var line = new THREE.Line(geometry, material, THREE.LineSegments);
line.receiveShadow = true; line.receiveShadow = true;
return line; return line;
} }
@ -8236,7 +8295,7 @@ Potree.Volume = function(args){
this.add(this.box); this.add(this.box);
this.frame = new THREE.Line( boxFrameGeometry, new THREE.LineBasicMaterial({color: 0x000000})); this.frame = new THREE.Line( boxFrameGeometry, new THREE.LineBasicMaterial({color: 0x000000}));
this.frame.mode = THREE.LinePieces; this.frame.mode = THREE.LineSegments;
this.add(this.frame); this.add(this.frame);
this.label = new Potree.TextSprite("0"); this.label = new Potree.TextSprite("0");
@ -8634,7 +8693,7 @@ Potree.PointCloudArena4D.prototype.updateMaterial = function(camera, renderer){
this.material.far = camera.far; this.material.far = camera.far;
this.material.minSize = 3; this.material.minSize = 3;
var bbSize = this.boundingBox.size(); var bbSize = this.boundingBox.getSize();
this.material.bbSize = [bbSize.x, bbSize.y, bbSize.z]; this.material.bbSize = [bbSize.x, bbSize.y, bbSize.z];
}; };
@ -8785,7 +8844,7 @@ Potree.PointCloudArena4D.prototype.update = function(camera, renderer){
}else{ }else{
this.loadQueue.push(element); this.loadQueue.push(element);
} }
}else if(node instanceof THREE.PointCloud){ }else if(node instanceof THREE.Points){
if(this.numVisiblePoints + node.pcoGeometry.numPoints > pointcloud.visiblePointsTarget){ if(this.numVisiblePoints + node.pcoGeometry.numPoints > pointcloud.visiblePointsTarget){
break; break;
} }
@ -8811,7 +8870,7 @@ Potree.PointCloudArena4D.prototype.update = function(camera, renderer){
var sphere = child.boundingSphere; var sphere = child.boundingSphere;
var distance = sphere.center.distanceTo(camObjPos); var distance = sphere.center.distanceTo(camObjPos);
var radius = box.size().length() / 2; var radius = box.getSize().length() / 2;
var fov = camera.fov / 2 * Math.PI / 180.0; var fov = camera.fov / 2 * Math.PI / 180.0;
var pr = 1 / Math.tan(fov) * radius / Math.sqrt(distance * distance - radius * radius); var pr = 1 / Math.tan(fov) * radius / Math.sqrt(distance * distance - radius * radius);
@ -8912,7 +8971,7 @@ Potree.PointCloudArena4D.prototype.replaceProxy = function(proxy){
var geometryNode = proxy.geometryNode; var geometryNode = proxy.geometryNode;
if(geometryNode.loaded === true){ if(geometryNode.loaded === true){
var geometry = geometryNode.geometry; var geometry = geometryNode.geometry;
var node = new THREE.PointCloud(geometry, this.material); var node = new THREE.Points(geometry, this.material);
node.number = proxy.number; node.number = proxy.number;
node.numPoints = proxy.numPoints; node.numPoints = proxy.numPoints;
node.boundingBox = geometryNode.boundingBox; node.boundingBox = geometryNode.boundingBox;
@ -9493,7 +9552,7 @@ Potree.PointCloudArena4DGeometry.load = function(url, callback){
geometry.offset = offset; geometry.offset = offset;
var center = geometry.boundingBox.center(); var center = geometry.boundingBox.center();
var radius = geometry.boundingBox.size().length() / 2; var radius = geometry.boundingBox.getSize().length() / 2;
geometry.boundingSphere = new THREE.Sphere(center, radius); geometry.boundingSphere = new THREE.Sphere(center, radius);
geometry.loadHierarchy(); geometry.loadHierarchy();
@ -9569,7 +9628,7 @@ Potree.PointCloudArena4DGeometry.prototype.loadHierarchy = function(){
if(stack.length > 0){ if(stack.length > 0){
var parent = stack[stack.length-1]; var parent = stack[stack.length-1];
node.boundingBox = parent.boundingBox.clone(); node.boundingBox = parent.boundingBox.clone();
var parentBBSize = parent.boundingBox.size(); var parentBBSize = parent.boundingBox.getSize();
if(parent.hasLeft && !parent.left){ if(parent.hasLeft && !parent.left){
parent.left = node; parent.left = node;
@ -9583,7 +9642,7 @@ Potree.PointCloudArena4DGeometry.prototype.loadHierarchy = function(){
} }
var center = node.boundingBox.center(); var center = node.boundingBox.center();
var radius = node.boundingBox.size().length() / 2; var radius = node.boundingBox.getSize().length() / 2;
node.boundingSphere = new THREE.Sphere(center, radius); node.boundingSphere = new THREE.Sphere(center, radius);
}else{ }else{
@ -9598,18 +9657,18 @@ Potree.PointCloudArena4DGeometry.prototype.loadHierarchy = function(){
} }
var center = node.boundingBox.center(); var center = node.boundingBox.center();
var radius = node.boundingBox.size().length() / 2; var radius = node.boundingBox.getSize().length() / 2;
node.boundingSphere = new THREE.Sphere(center, radius); node.boundingSphere = new THREE.Sphere(center, radius);
} }
}else{ }else{
root = node; root = node;
root.boundingBox = scope.boundingBox.clone(); root.boundingBox = scope.boundingBox.clone();
var center = root.boundingBox.center(); var center = root.boundingBox.center();
var radius = root.boundingBox.size().length() / 2; var radius = root.boundingBox.getSize().length() / 2;
root.boundingSphere = new THREE.Sphere(center, radius); root.boundingSphere = new THREE.Sphere(center, radius);
} }
var bbSize = node.boundingBox.size(); var bbSize = node.boundingBox.getSize();
node.spacing = ((bbSize.x + bbSize.y + bbSize.z) / 3) / 75; node.spacing = ((bbSize.x + bbSize.y + bbSize.z) / 3) / 75;
stack.push(node); stack.push(node);

2
package.json
Wyświetl plik

@ -43,7 +43,7 @@
"react-hot-loader": "^3.0.0-beta.5", "react-hot-loader": "^3.0.0-beta.5",
"sass-loader": "^4.0.2", "sass-loader": "^4.0.2",
"style-loader": "^0.13.1", "style-loader": "^0.13.1",
"three": "^0.71.0", "three": "^0.83.0",
"three-orbit-controls": "^82.1.0", "three-orbit-controls": "^82.1.0",
"url-loader": "^0.5.7", "url-loader": "^0.5.7",
"webpack": "^1.13.2", "webpack": "^1.13.2",