minorua / Qgis2threejs

3D map visualization and web export plugin for QGIS
http://minorua.github.io/Qgis2threejs/docs/
GNU General Public License v2.0
512 stars 91 forks source link

wireframe mode not trasparency #108

Closed vancori closed 3 years ago

vancori commented 7 years ago

Hi, I need to see the DTM in 3D mode, using the plug Qgis2threejs. I can see it in wire frame mode but I need to see it in “hidden line” mode, so avoiding the transparency of wireframe. How can I do?

DigDigDig commented 7 years ago

Do you have an example of what you want to accomplish?

The Three.JS EdgesGeometry helper might be useful in this situation, but I'm not quite sure exactly what you're going for...

https://threejs.org/docs/#api/geometries/EdgesGeometry

vancori commented 7 years ago

I am currently working on a project with QGIS for an intervisibility analysis of a wind turbine plant. Among the various documents, I have to do is to show the 3D simulation from the various photographic points of view, how you should see this wind turbine (in Collada 3D file). Instead of using the DEM model, the view is required in Wireframe mode, but not in transparent form, from which to see through! but in full color, so as to simulate the shape of the ground. I have read the Qgis2threejs guide but I can't find the solution. In the settings for the section DEM, there is, in the display type, the "Enable shading" item: sett should be that, but it does not render the wireframe grid unclear It should come this way: dem1

DigDigDig commented 7 years ago

I think I understand what you want to accomplish. Someone else might have a more elegant solution, but here is a quick and dirty method for you:

  1. Copy your base DEM layer and hit export to Qgis2threejs.
  2. Under the DEM tab select 'Display Type: Solid Color', and set that to white.
  3. Under the additional DEM tab select 'Display Type: Solid Color', and set that to black.
  4. Make sure that the resampling setting is the same between the DEM and additional DEM layers.
  5. Export your model.
  6. Use your console or write a short javascript file that contains the following commands, substituting 'DEM_copy' for whatever the layer name of you additional DEM layer is.
app.scene.autoUpdate = true;
project.getLayerByName("DEM_copy").queryableObjects[0].position.z = .01;
project.getLayerByName("DEM_copy").queryableObjects[0].material.wireframe = true;

I turned the opacity of my black wireframe layer (DEM_copy) down a little bit.

You can turn the opacity of your original DEM down as well if you want to see the wireframe pass through the terrain.

example-test
vancori commented 7 years ago

Yes. The problem is this, that you've identified. You have been very kind, to give me your solution now, which I see should work. I tried it last night, but I have difficulty with the Python part, because I'm not a programmer. Using QGIS with Ubuntu, how else can it be resolved?

DigDigDig commented 7 years ago

There isn't any Python in this solution. What are the names of your DEM layers? If I have them then can write up an html and js file and drop them here for you to copy into your export folder.

vancori commented 7 years ago

Ok ... I have set the settings as you said, and save the project in FileExport.html mode? Within an directory in mode Output HTML file path folder? Here is the folder created on the desktop eolico_folder

The name of the first DEM is "DTM_dbtopo_5m" The second DEM is "DTM_dbtopo2_5m"

DigDigDig commented 7 years ago

Go ahead and replace the modello_eolico.html file with the one I've posted here:

https://gist.github.com/DigDigDig/ec7e6c38b213ddb22ebc60cb98a405ba

That should do the trick for you.

-DigDigDig

vancori commented 7 years ago

No, it does not work. There are two other DEM files too, one is the turbine in COLLADA model, and the other are the viewpoint. viewdem

vancori commented 7 years ago

waiting moment.. I try to do another attempt. I enter the code directly into html files created in the tmp folder

DigDigDig commented 7 years ago

I think that you may be exporting the file wrong. Can you check for error messages in your web browser when you have the HTML file open? That's the first step in debugging this.

It might be a good idea to send a screenshot of your dat-gui panel as well, that way we can see what layers you are working with.

example-test2

vancori commented 7 years ago

OK right now! I'm very happy. layer_ok

I made the change the html file on the ubuntu tmp directory, and then saved the files externally. I think you should implement the direct editing in the plugin, which could be useful in many situations You've been very kind. Thanks a lot

DigDigDig commented 7 years ago

Nice! Glad you got it working!

lisamcravey commented 6 years ago

Hiya, I'm trying to do the exact same thing! And not sure how to go about the step below. Can anyone give me a quick how to on this please?!

Use your console or write a short javascript file that contains the following commands, substituting 'DEM_copy' for whatever the layer name of you additional DEM layer is. app.scene.autoUpdate = true; project.getLayerByName("DEM_copy").queryableObjects[0].position.z = .01; project.getLayerByName("DEM_copy").queryableObjects[0].material.wireframe = true;

lisamcravey commented 6 years ago

It's ok I got it! Just opened the html in Dreamweaver and literally pasted in the code :) Thanks!

minorua commented 3 years ago

Add quad wireframe option was added in version 2.6. Solid color material + the wireframe option can do this job. Thanks.