|
|
@ -103,6 +103,8 @@ interface WorldProperties { |
|
|
|
export default class StatisticsView extends Vue { |
|
|
|
world: World; |
|
|
|
worldProperties: WorldProperties = {}; |
|
|
|
alertTitle = ""; |
|
|
|
alertMessage = ""; |
|
|
|
|
|
|
|
// 'mounted' hook runs after initial render |
|
|
|
mounted() { |
|
|
@ -114,68 +116,12 @@ export default class StatisticsView extends Vue { |
|
|
|
this.world = newWorld; |
|
|
|
} catch (err) { |
|
|
|
console.log(err); |
|
|
|
this.alertTitle = "Mounting error"; |
|
|
|
this.alertMessage = err.message; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
public captureGraphics() { |
|
|
|
/** |
|
|
|
// from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#examples |
|
|
|
// Adds a blank image |
|
|
|
const dataBlob = document |
|
|
|
.querySelector("#scene-container") |
|
|
|
.firstChild.toBlob((blob) => { |
|
|
|
const newImg = document.createElement("img"); |
|
|
|
const url = URL.createObjectURL(blob); |
|
|
|
|
|
|
|
newImg.onload = () => { |
|
|
|
// no longer need to read the blob so it's revoked |
|
|
|
URL.revokeObjectURL(url); |
|
|
|
}; |
|
|
|
|
|
|
|
newImg.src = url; |
|
|
|
document.body.appendChild(newImg); |
|
|
|
}); |
|
|
|
**/ |
|
|
|
|
|
|
|
/** |
|
|
|
// Yields a blank page with the iframe below |
|
|
|
const dataUrl = document |
|
|
|
.querySelector("#scene-container") |
|
|
|
.firstChild.toDataURL("image/png"); |
|
|
|
**/ |
|
|
|
|
|
|
|
/** |
|
|
|
// Yields a blank page with the iframe below |
|
|
|
const dataUrl = this.world.renderer.domElement.toDataURL("image/png"); |
|
|
|
**/ |
|
|
|
|
|
|
|
/** |
|
|
|
// Show the image in a new tab |
|
|
|
const iframe = ` |
|
|
|
<iframe |
|
|
|
src="${dataUrl}" |
|
|
|
frameborder="0" |
|
|
|
style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" |
|
|
|
allowfullscreen> |
|
|
|
</iframe>`; |
|
|
|
const win = window.open(); |
|
|
|
win.document.open(); |
|
|
|
win.document.write(iframe); |
|
|
|
win.document.close(); |
|
|
|
**/ |
|
|
|
|
|
|
|
// from https://stackoverflow.com/a/17407392/845494 |
|
|
|
// This yields a file with funny formatting. |
|
|
|
//const image = const dataUrl.replace("image/png", "image/octet-stream"); |
|
|
|
|
|
|
|
/** |
|
|
|
// Yields a blank image at the bottom of the page |
|
|
|
// from https://discourse.threejs.org/t/save-screenshot-on-server/39900/3 |
|
|
|
const img = new Image(); |
|
|
|
img.src = this.world.renderer.domElement.toDataURL(); |
|
|
|
document.body.appendChild(img); |
|
|
|
**/ |
|
|
|
|
|
|
|
/** |
|
|
|
* This yields an SVG that only shows white and black highlights |
|
|
|
// from https://stackoverflow.com/questions/27632621/exporting-from-three-js-scene-to-svg-or-other-vector-format |
|
|
@ -183,16 +129,12 @@ export default class StatisticsView extends Vue { |
|
|
|
const rendererSVG = new SVGRenderer(); |
|
|
|
rendererSVG.setSize(window.innerWidth, window.innerHeight); |
|
|
|
rendererSVG.render(this.world.scene, this.world.camera); |
|
|
|
//document.body.appendChild(rendererSVG.domElement); |
|
|
|
ExportToSVG(rendererSVG, "test.svg"); |
|
|
|
} |
|
|
|
|
|
|
|
public setWorldProperty(propertyName, propertyValue) { |
|
|
|
this.worldProperties[propertyName] = propertyValue; |
|
|
|
} |
|
|
|
|
|
|
|
alertTitle = ""; |
|
|
|
alertMessage = ""; |
|
|
|
} |
|
|
|
|
|
|
|
function ExportToSVG(rendererSVG, filename) { |
|
|
|