30:T524,viewof options=view`

Use your mouse / touch to zoom and rotate.

${["obj",Inputs.radio(["sphere", "knot", "none"], {value:"sphere", label: "Shape:"})]}

${["mat",Inputs.radio(["reflect","refract"], {value:"reflect", label:"Material:"})]}

${["bg",Inputs.radio(["GAIA", "unWISE", "WISE", "SFD", "CMB"], {value:"GAIA", label: "Background:"})]}

Background image credits:

SFD Schlafly & Finkbeiner (2011) and Schlegel, Finkbeiner & Davis (1998)
WISE © NASA/JPL-Caltech/UCLA `31:T752,universe = { // WebGL rendering engine const renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(viewWidth, viewHeight); renderer.setPixelRatio(devicePixelRatio); renderer.outputEncoding = THREE.sRGBEncoding; // Camera const fov = 90; const aspect = viewWidth / viewHeight; const near = 1; const far = 100000; const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.set(0, 0, 1000); // Interactive mouse/touch controls const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.minDistance = 500; controls.maxDistance = 4000; controls.addEventListener("change", () => renderer.render(scene, camera)); invalidation.then(() => (controls.dispose(), renderer.dispose())); // Shapes const sphereGeom = new THREE.IcosahedronGeometry(320, 15); const knotGeom = new THREE.TorusKnotGeometry(180,80,1500,200); const mat = new THREE.MeshLambertMaterial({ envMap: textures[0], reflectivity:1.0, refractionRatio:0.9 }); const sphere = new THREE.Mesh(sphereGeom, mat); const knot = new THREE.Mesh(knotGeom, mat); knot.visible = false; // Scene const scene = new THREE.Scene(); const ambient = new THREE.AmbientLight(0xffffff); scene.add(ambient); scene.add(sphere); scene.add(knot); scene.background = textures[0]; // Initial render renderer.render(scene, camera); // Callbacks return Object.assign(renderer.domElement, { setOptions(opts) { const texture=textures[opts.bg]; texture.mapping = opts.mat=="reflect" ? THREE.EquirectangularReflectionMapping: THREE.EquirectangularRefractionMapping; scene.background = texture; mat.envMap = texture; sphere.visible = opts.obj=="sphere"; knot.visible = opts.obj=="knot"; mat.needsUpdate = true; renderer.render(scene, camera); } }); }32:[] 2e:{"title":"All-Sky Textures","cells":[{"id":242,"value":"# All-Sky Textures\n\nTry the standalone version [here](https://dkirkby.github.io/allsky/).\n\nDemonstrate the use of all-sky astronomical images that have been assembled into an equirectangular projection suitable for use as a WebGL texture. Based on this [THREE.js example](https://threejs.org/examples/#webgl_materials_envmaps).","pinned":false,"hidden":false,"mode":"md"},{"id":440,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"live = {\n universe.setOptions(options);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"viewHeight = Math.round(0.7*viewWidth)","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"viewWidth = Math.min(width, 1200)","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"textures = {\n const loader = new THREE.TextureLoader();\n const load = url => new Promise(async resolve => loader.load(url, resolve));\n const base = \"https://dkirkby.github.io/allsky/img/\";\n const URLs = {\n GAIA: base+\"Gaia_EDR3_flux.jpg\",\n unWISE: base+\"unwise-neo6.jpg\",\n WISE: base+\"WISE-equi.jpg\",\n SFD: base+\"sfd.jpg\",\n CMB: base+\"Planck2018.jpg\",\n };\n const entries = Object.entries(URLs).map(async ([name,url]) => {\n const texture = await load(url);\n texture.mapping = THREE.EquirectangularReflectionMapping;\n texture.encoding = THREE.sRGBEncoding;\n return [name,texture];\n });\n return Object.fromEntries(await Promise.all(entries));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.130.0/build/three.min.js\");\n await require(\"three@0.130.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"import {view} from \"@tomlarkworthy/view\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}