2b:null 2c:["$","title",null,{"children":"3D planets with Three.js | Volodymyr Agafonkin | Observable"}] 31:[] 2f:{"id":"fffc9b71bd2f3e91","slug":"3d-planets-with-three-js","title":"3D planets with Three.js","thumbnail":"7ffee952c4a443742de9ce77b374c6f19367e0c382f342510952b613b48a8c4f","access_level":"public","create_time":"$D2019-09-25T15:26:40.816Z","update_time":"$D2019-09-27T10:24:42.171Z","view_time":null,"first_public_time":"$D2019-09-25T18:17:39.915Z","fork":false,"stars":46,"starred":false,"owner":{"type":"team","id":"78f29d059906819a","login":"mourner","name":"Volodymyr Agafonkin","avatar_url":"https://avatars-next.observableusercontent.com/02cfd655debb6fc593dfe4bcacd9520f73e6b33cedef382248d08ecc40822a1b","tier":"starter_2024"},"version":304,"publish_version":304,"role":null,"authored":false,"authors":[{"type":"individual","id":"3954cddf6608132f","login":"mourner","name":"Volodymyr Agafonkin","avatar_url":"https://avatars-next.observableusercontent.com/02cfd655debb6fc593dfe4bcacd9520f73e6b33cedef382248d08ecc40822a1b","tier":null}],"members":[{"type":"individual","id":"3954cddf6608132f","login":"mourner","name":"Volodymyr Agafonkin","avatar_url":"https://avatars-next.observableusercontent.com/02cfd655debb6fc593dfe4bcacd9520f73e6b33cedef382248d08ecc40822a1b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":47,"collection":{"id":"05c3a5b5466d0c69","slug":"explorables","title":"Explorables","owner":{"id":"78f29d059906819a","login":"mourner","name":"Volodymyr Agafonkin"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined"},{"id":205,"value":"viewof planet = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"