2f:[] 2d:{"title":"Textured globe","cells":[{"id":0,"value":"md`# Textured globe\n\nHere's how to use [X3Dom](https://www.x3dom.org/) to texture a globe with an image.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"scene = {\n let size = width < 600 ? width : 600;\n yield html`\n \n \n \n\t\t\t\t\n\t\t\t\t \n\t\t\t\t \n\t\t\t\t\n\t\t\t\t \n\t\t\t\n \n `;\n x3dom.reload();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"x3dom = require('x3dom').catch(() => window['x3dom'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"## Notes on CORS issues\n\nIf you want to load the image for the texture directly from a web server, you need to consider potential [Cross Origin Resouce issues or CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), which is a mechanism that allows a server to indicate any origins from which a browser should permit loading resources. Most web servers are set up to disallow any such access. That's why the NetworkError is raised in the following code:","pinned":false,"hidden":false,"mode":"md"},{"id":113,"value":"fetch(\n \"https://www.richelle-gama.org/antarctica/Thermohaline_Circulation_alt-v1.png\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"There are a few ways around this issue. \n\n### Set up CORS on your domain:\n\nOne possibility, would be to [modify the CORS settings on the server](https://stackoverflow.com/questions/29150384/how-to-allow-cross-domain-request-in-apache2). The CORS settings on [https://upload.wikimedia.org](https://upload.wikimedia.org), for example, are set to allow cross-origin access from anywhere, which is why the following works:","pinned":false,"hidden":false,"mode":"md"},{"id":117,"value":"fetch(\n \"https://upload.wikimedia.org/wikipedia/commons/b/b0/Thermohaline_circulation.png\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"There are [security risks associated with that approach](https://stackoverflow.com/questions/12001269/what-security-risks-exist-when-setting-access-control-allow-origin-to-accept-all) so it's not generally recommended, unless the domain is dedicated for that purpose and care is taken that no sensitive information is within that domain.\n\n### Use a proxy\n\nMuch easier would be to fetch the image through a proxy. The following code, for example, grabs the image through a proxy, creates a [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) for it, and returns a local URL:","pinned":false,"hidden":false,"mode":"md"},{"id":130,"value":"local_imageURL = fetch(\n \"https://corsproxy.io/?https://www.richelle-gama.org/antarctica/Thermohaline_Circulation_alt-v1.png\"\n)\n .then((response) => response.blob())\n .then((imageBlob) => URL.createObjectURL(imageBlob))","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"That local URL can then be used to refer to the image:","pinned":false,"hidden":false,"mode":"md"},{"id":156,"value":"scene2 = {\n let size = width < 600 ? width : 600;\n yield html`\n \n \n \n\t\t\t\t\n\t\t\t\t \n\t\t\t\t \n\t\t\t\t\n\t\t\t\t \n\t\t\t\n \n `;\n x3dom.reload();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"### Put the whole thing on your web server\n\nThe reason a CORS error arises in the first place is because there are two different servers involved. If the webpage accessing the image is on the same server, no error should arise. The webpage could contain code that [embeds a notebook cell](https://observablehq.com/@observablehq/embeds) or just the fairly simple HTML that the cell uses in the first place.\n\n### Use a FileAttachment\n\nAs already noted, using a FileAttachment is the pretty standard way to get files into Observable.","pinned":false,"hidden":false,"mode":"md"}],"files":"$W2f","stdlib":"1","titling":"auto"}