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;
}

canvas {
  width: "100vw";
  height: "100vh";
}

JavaScript

import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls";

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

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

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;

const geometry = new THREE.SphereGeometry(500, 128, 128);

const loader = new THREE.TextureLoader();
const textureA = loader.load("https://raw.githubusercontent.com/TheBjarne/3D_Konfig_FlyRender/refs/heads/main/03_Empty.png");
const textureB = loader.load("https://raw.githubusercontent.com/TheBjarne/3D_Konfig_FlyRender/refs/heads/main/03_Kitchen%20A.png");

for (const tex of [textureA, textureB]) {
  tex.mapping = THREE.EquirectangularReflectionMapping;
  tex.colorSpace = THREE.SRGBColorSpace;
  tex.wrapS = THREE.ClampToEdgeWrapping;
  tex.wrapT = THREE.ClampToEdgeWrapping;
}

const material = new THREE.ShaderMaterial({
  uniforms: {
    mapA: { value: textureA },
    mapB: { value: textureB },
    blendFactor: { value: 0.5 }
  },
  vertexShader: `
    varying vec3 vWorldDir;
    void main() {
      vec4 worldPos = modelMatrix * vec4(position, 1.0);
      vWorldDir = normalize(worldPos.xyz - cameraPosition);
      gl_Position = projectionMatrix * viewMatrix * worldPos;
    }
  `,
  fragmentShader: `
    precision highp float;
    uniform sampler2D mapA;
    uniform sampler2D mapB;
    uniform float blendFactor;
    varying vec3 vWorldDir;
    const float PI = 3.141592653589793;
    vec2 equirectUV(vec3 dir) {
      float u = atan(dir.z, dir.x) / (2.0 * PI) + 0.5;
      float v = asin(clamp(dir.y,...