diff --git a/app/static/app/js/ModelView.jsx b/app/static/app/js/ModelView.jsx index d9203d3a..f1e27f76 100644 --- a/app/static/app/js/ModelView.jsx +++ b/app/static/app/js/ModelView.jsx @@ -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() { var container = this.container; @@ -414,6 +357,7 @@ class ModelView extends React.Component { camera.position.set(-304, 372, 318); camera.rotation.y = -Math.PI / 4; camera.rotation.x = -Math.PI / 6; + //useOrbitControls(); earthControls = new THREE.EarthControls(camera, renderer, scenePointCloud); earthControls.addEventListener("proposeTransform", function(event){ @@ -431,10 +375,11 @@ class ModelView extends React.Component { // enable frag_depth extension for the interpolation shader, if available renderer.context.getExtension("EXT_frag_depth"); + var axisHelper = new THREE.AxisHelper( 35 ); + scene.add( axisHelper ); + // load pointcloud - if(!pointcloudPath){ - - }else if(pointcloudPath.indexOf("cloud.js") > 0){ + if(pointcloudPath.indexOf("cloud.js") > 0){ Potree.POCLoader.load(pointcloudPath, function(geometry){ pointcloud = new Potree.PointCloudOctree(geometry); @@ -449,7 +394,7 @@ class ModelView extends React.Component { referenceFrame.position.copy(sg.center).multiplyScalar(-1); referenceFrame.updateMatrixWorld(true); - + if(sg.radius > 50*1000){ camera.near = 10; }else if(sg.radius > 10*1000){ @@ -470,8 +415,6 @@ class ModelView extends React.Component { earthControls.pointclouds.push(pointcloud); - - if(sceneProperties.navigation === "Earth"){ useEarthControls(); }else if(sceneProperties.navigation === "Orbit"){ @@ -496,61 +439,11 @@ class ModelView extends React.Component { controls.target.copy(ct); } } - - }); - }else if(pointcloudPath.indexOf(".vpc") > 0){ - Potree.PointCloudArena4DGeometry.load(pointcloudPath, function(geometry){ - 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); - } - + + addObjModel(); }); + }else{ + throw new Error("pointcloudPath does not contain a reference to cloud.js"); } var grid = Potree.utils.createGrid(5, 5, 2); @@ -563,7 +456,6 @@ class ModelView extends React.Component { // background - // var texture = THREE.ImageUtils.loadTexture( '/static/app/test/resources/textures/background.gif' ); var texture = Potree.utils.createBackgroundTexture(512, 512); texture.minFilter = texture.magFilter = THREE.NearestFilter; @@ -589,6 +481,37 @@ class ModelView extends React.Component { var light = new THREE.AmbientLight( 0x555555 ); // soft white 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); + }); + }); + } + } diff --git a/app/static/app/js/vendor/potree/js/potree.js b/app/static/app/js/vendor/potree/js/potree.js index 148a9f85..b6f1a95b 100644 --- a/app/static/app/js/vendor/potree/js/potree.js +++ b/app/static/app/js/vendor/potree/js/potree.js @@ -1843,6 +1843,65 @@ Potree.PointCloudMaterial = function(parameters){ hemisphereLightSkyColor: { type: "fv", value: null }, hemisphereLightGroundColor: { 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]; @@ -4177,7 +4236,7 @@ Potree.PointCloudOctree.prototype.updateVisibility = function(camera, renderer){ if((typeof parent === "undefined" || parent instanceof Potree.PointCloudOctreeNode) && geometryNode.loaded){ var pcoNode = new Potree.PointCloudOctreeNode(); - var sceneNode = new THREE.PointCloud(geometry, this.material); + var sceneNode = new THREE.Points(geometry, this.material); sceneNode.visible = false; pcoNode.name = geometryNode.name; @@ -4330,7 +4389,7 @@ Potree.PointCloudOctree.prototype.updateMaterial = function(material, visibleNod material.spacing = this.pcoGeometry.spacing; material.near = camera.near; 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 if(material.pointSizeType){ @@ -4671,7 +4730,7 @@ Potree.PointCloudOctree.prototype.getProfile = function(start, end, width, depth var pointsFound = 0; - if(object instanceof THREE.PointCloud){ + if(object instanceof THREE.Points){ var geometry = object.geometry; var positions = geometry.attributes.position; var p = positions.array; @@ -4734,7 +4793,7 @@ Potree.PointCloudOctree.prototype.getProfile = function(start, end, width, depth if(object == this || object.level < depth){ for(var i = 0; i < object.children.length; i++){ var child = object.children[i]; - if(child instanceof THREE.PointCloud){ + if(child instanceof THREE.Points){ var sphere = child.boundingSphere.clone().applyMatrix4(child.matrixWorld); if(cutPlane.distanceToSphere(sphere) < sphere.radius){ stack.push(child); @@ -4995,7 +5054,7 @@ Potree.PointCloudOctree.prototype.createDEM = function(node){ var world = sceneNode.matrixWorld; var boundingBox = sceneNode.boundingBox.clone().applyMatrix4(world); - var bbSize = boundingBox.size(); + var bbSize = boundingBox.getSize(); var positions = sceneNode.geometry.attributes.position.array; var demSize = 64; var demMArray = new Array(demSize*demSize); @@ -5174,7 +5233,7 @@ Potree.PointCloudOctree.prototype.getDEMHeight = function(position){ var box = dem.boundingBox2D; var insideBox = 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 demHeight = 0; @@ -5299,9 +5358,9 @@ Potree.PointCloudOctree.prototype.generateTerain = function(){ } 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); }; @@ -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)); } - var line = new THREE.Line(geometry, material, THREE.LinePieces); + var line = new THREE.Line(geometry, material, THREE.LineSegments); line.receiveShadow = true; return line; } @@ -8236,7 +8295,7 @@ Potree.Volume = function(args){ this.add(this.box); 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.label = new Potree.TextSprite("0"); @@ -8634,7 +8693,7 @@ Potree.PointCloudArena4D.prototype.updateMaterial = function(camera, renderer){ this.material.far = camera.far; this.material.minSize = 3; - var bbSize = this.boundingBox.size(); + var bbSize = this.boundingBox.getSize(); this.material.bbSize = [bbSize.x, bbSize.y, bbSize.z]; }; @@ -8785,7 +8844,7 @@ Potree.PointCloudArena4D.prototype.update = function(camera, renderer){ }else{ this.loadQueue.push(element); } - }else if(node instanceof THREE.PointCloud){ + }else if(node instanceof THREE.Points){ if(this.numVisiblePoints + node.pcoGeometry.numPoints > pointcloud.visiblePointsTarget){ break; } @@ -8811,7 +8870,7 @@ Potree.PointCloudArena4D.prototype.update = function(camera, renderer){ var sphere = child.boundingSphere; 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 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; if(geometryNode.loaded === true){ 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.numPoints = proxy.numPoints; node.boundingBox = geometryNode.boundingBox; @@ -9493,7 +9552,7 @@ Potree.PointCloudArena4DGeometry.load = function(url, callback){ geometry.offset = offset; 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.loadHierarchy(); @@ -9569,7 +9628,7 @@ Potree.PointCloudArena4DGeometry.prototype.loadHierarchy = function(){ if(stack.length > 0){ var parent = stack[stack.length-1]; node.boundingBox = parent.boundingBox.clone(); - var parentBBSize = parent.boundingBox.size(); + var parentBBSize = parent.boundingBox.getSize(); if(parent.hasLeft && !parent.left){ parent.left = node; @@ -9583,7 +9642,7 @@ Potree.PointCloudArena4DGeometry.prototype.loadHierarchy = function(){ } 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); }else{ @@ -9598,18 +9657,18 @@ Potree.PointCloudArena4DGeometry.prototype.loadHierarchy = function(){ } 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); } }else{ root = node; root.boundingBox = scope.boundingBox.clone(); 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); } - var bbSize = node.boundingBox.size(); + var bbSize = node.boundingBox.getSize(); node.spacing = ((bbSize.x + bbSize.y + bbSize.z) / 3) / 75; stack.push(node); diff --git a/package.json b/package.json index 2e0ef941..01b7fe63 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "react-hot-loader": "^3.0.0-beta.5", "sass-loader": "^4.0.2", "style-loader": "^0.13.1", - "three": "^0.71.0", + "three": "^0.83.0", "three-orbit-controls": "^82.1.0", "url-loader": "^0.5.7", "webpack": "^1.13.2",