Welcome to reprint, reprint with the article source link ~~, I hope my experience can help you, have a problem you can click my avatar plus my wechat this article only to provide a solution to the problems encountered, for those who urgently want to achieve functional effect, I hope to be able to slightly sink down to watch, or directly watch the train of thought, The code of this article can not be used directly, the complete code is only the problem solved in this article to use the code, if directly used may have an error, as long as you modify the code can be used

Potree realizes the screenshot process

Potree captures the current image and saves it in Base64 format

– reference –

CSDN Threejs Screenshots CSDN three.js Get screenshots of personal blog JS screenshots and screenshots of three.js scenes

– Major version –

Potreejs 1.6

Thinking –

2, Check the source code of Potree.js, using Potree implementation

– process –

1. How to view webGL and three.js screenshots

1.1, screenshots (will not capture things)

After searching on the Internet, I found that html2Canvas. Js was used in most of the methods. This method needs to download an extra plug-in, so another method is recommended:

1) html2canvas. Js screenshots

/ / method a html2canvas (document. GetElementsByTagName (" canvas "), {allowTaint: true, tainTest: false, onrendered: Var dataUrlBase64 = canvas.todataURL (); function(canvas){// base64 = canvas; }});Copy the code

② Renderer direct screenshot

/ / method 2 var dataUrlBase64 = the renderer. DomElement accordingly. ToDataURL ();Copy the code

1.2. Normal interception

JPG should be black (not captured here), PNG should be transparent, scene rendering such as lighting, loading model is not captured (others said), there are two methods:

PreserveDrawingBuffer :true in the renderer – whether to save in the buffer to manually clear or overwrite, this default is false.

Renderer = new WebGLRenderer({preserveDrawingBuffer :true});Copy the code

② Render the scene and camera before taking a screenshot, it won’t refresh the screen in real time

// rederer.render(scene, camera)Copy the code

2, view the source code of Potree.js, using potree implementation

2.1. Locate the potree rendering position through the first screenshot scheme

Finally locate the code, look for the class name of the code, and then find where the code is rendered

2.2. No black screen

① Directly modify potreejs source code

this.renderer = new THREE.WebGLRenderer({alpha: true, premultipliedAlpha: false, preserveDrawingBuffer :true });
Copy the code

Modify the code as follows:

(2) through the render

The transformation code is as follows:

viewer.renderer.render(viewer.overlay,viewer.overlayCamera);
Copy the code

If it does not work, it is possible to call the potree method directly.

viewer.render();
Copy the code

– Complete code –

View. viewer = new Potree. viewer (document.getelementByid ("potree_render_area")); // Screenshot code viewer.render(); var dataUrlBase64 =viewer.renderer.domElement.toDataURL();Copy the code