31:[] 2f:{"title":"3D planets with Three.js","cells":[{"id":0,"value":"md`# 3D planets with Three.js\n\nA minimal Three.js example of a textured sphere with controls. [Textures source](https://www.solarsystemscope.com/textures/)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"viewof planet = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"{\n const renderer = new THREE.WebGLRenderer();\n const size = Math.min(width, 600); \n renderer.setSize(size, size); renderer.setPixelRatio(devicePixelRatio);\n\n const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000).translateZ(2.8);\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n controls.minDistance = 1.12; controls.maxDistance = 10;\n\n const scene = new THREE.Scene();\n const map = await loadTexture(`https://solartextures.b-cdn.net/2k_${planet}.jpg`);\n scene.add(new THREE.Mesh(new THREE.SphereBufferGeometry(1, 32, 32), new THREE.MeshBasicMaterial({map})));\n \n renderer.render(scene, camera);\n controls.addEventListener(\"change\", () => renderer.render(scene, camera));\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n\n return renderer.domElement;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"loadTexture = {\n const loader = new THREE.TextureLoader();\n return url => new Promise(resolve => loader.load(url, resolve));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.108.0/build/three.min.js\");\n await require(\"three@0.108.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}