Parcel Sandbox

by farazshaikh

HTML

<div id="root"></div>
<script type="importmap">
	{
		"imports": {
      "three": "https://unpkg.com/three/build/three.module.js",
		  "three/webgpu": "https://unpkg.com/three/build/three.webgpu.js",
			"three/tsl": "https://unpkg.com/three/build/three.tsl.js",
      "three/addons/": "https://unpkg.com/three/examples/jsm/"
		}
	}
</script>

CSS

body {
  font-family: sans-serif;
  margin: 0;
  background-color: red;
}

JavaScript

import * as THREE from "three"

const geometry = new THREE.SphereGeometry(500, 128, 128)
geometry.scale(-1, 1, 1)

function loadTexture(scene, url) {
    const textureLoader = new THREE.TextureLoader()
    const texture = textureLoader.load(url)

    texture.mapping = THREE.EquirectangularRefractionMapping
    texture.colorSpace = THREE.SRGBColorSpace

    texture.wrapS = THREE.ClampToEdgeWrapping
    texture.wrapT = THREE.ClampToEdgeWrapping

    const material = new THREE.MeshBasicMaterial({
        map: texture,
        side: THREE.DoubleSide,
        transparent: false,
        depthWrite: false,
        alphaTest: 0.1
    })

    const sphere = new THREE.Mesh(geometry, material)
    scene.add(sphere)
}

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight
)
camera.position.set(0, 0, 0.1)

const renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true,
    premultipliedAlpha: true
})
renderer.setSize(window.innerWidth, window.innerHeight)
window.document.body.appendChild(renderer.domElement)

loadTexture(
    scene,
    "https://raw.githubusercontent.com/TheBjarne/3D_Konfig_FlyRender/refs/heads/main/03_Empty.png"
)
loadTexture(
    scene,
    "https://raw.githubusercontent.com/TheBjarne/3D_Konfig_FlyRender/refs/heads/main/03_Kitchen%20A.png"
)

function animate() {
    requestAnimationFrame(animate)
    renderer.render(scene, camera)
}

animate()