// 1. Import Three.js przez import map (nowoczesny sposob)
import * as THREE from 'three';

// 2. Scena — kontener na wszystkie obiekty 3D
const scene = new THREE.Scene();

// 3. Kamera — perspektywa widza
const camera = new THREE.PerspectiveCamera(
  75,                                    // FOV (stopnie)
  window.innerWidth / window.innerHeight,  // aspect ratio
  0.1,                                   // near (bliska plaszczyzna)
  100                                    // far (daleka plaszczyzna)
);
camera.position.set(0, 0, 5);

// 4. Renderer — rysuje scene na canvas
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 5. Renderuj jedna klatke
renderer.render(scene, camera);

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/"
  }
}
</script>
<script type="module">
  import * as THREE from 'three';
  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
</script>

const scene = new THREE.Scene();

// Tlo sceny (kolor)
scene.background = new THREE.Color(0x0a0e14);

Fog — obiekty znikaja w oddali
scene.fog = new THREE.Fog(0x0a0e14, 10, 40);
// 0x0a0e14 = kolor mgly, 10 = blisko, 40 = daleko

// Dodawanie obiektow
scene.add(mesh);
scene.add(light);

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const controls = new OrbitControls(camera, renderer.domElement);

// Damping — plynnosc ruchu (wymaga controls.update() w petli)
controls.enableDamping = true;
controls.dampingFactor = 0.06;

// Ograniczenia
controls.minDistance = 3;   // najblizej
controls.maxDistance = 25;  // najdalej
controls.maxPolarAngle = Math.PI / 2; // nie schodz pod podloge

const renderer = new THREE.WebGLRenderer({
  antialias: true,          // wygładza krawedzie
  alpha: true,               // przezroczyste tlo
  powerPreference: 'high-performance'
});

// Rozmiar canvas = rozmiar okna
renderer.setSize(window.innerWidth, window.innerHeight);

// Pixel ratio — ostrosc na ekranach Retina/HiDPI
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

// Tone mapping — realistyczne kolory
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.0;

document.body.appendChild(renderer.domElement);

const clock = new THREE.Clock();

function animate() {
  const delta = clock.getDelta();     // czas od ostatniej klatki
  const elapsed = clock.getElapsedTime(); // calkowity czas

  controls.update();
  renderer.render(scene, camera);
}

renderer.setAnimationLoop(animate);

// Prostopadloscian 1x1x1
const box = new THREE.BoxGeometry(1, 1, 1);

// Kula — promien 0.7, 32 segmentow w szerokosci i wysokosci
const sphere = new THREE.SphereGeometry(0.7, 32, 32);

// Pierscien — promien 0.5, grubosc 0.2
const torus = new THREE.TorusGeometry(0.5, 0.2, 16, 64);

// Stozek — promien 0.6, wysokosc 1.2, 32 segmenty
const cone = new THREE.ConeGeometry(0.6, 1.2, 32);

// Trojkat z 3 wierzcholkow
const vertices = new Float32Array([
  0,  1,  0,   // wierzchotek 1 (gora)
  -1, -1, 0,   // wierzchotek 2 (dol lewo)
  1,  -1, 0    // wierzchotek 3 (dol prawo)
]);

const geom = new THREE.BufferGeometry();
geom.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

const material = new THREE.MeshStandardMaterial({
  color: 0xa78bfa,       // kolor bazowy
  roughness: 0.3,      // 0 = lustro, 1 = matowy
  metalness: 0.7,      // 0 = dielektryk, 1 = metal
  flatShading: false,  // true = plaszczyznowy shading
  wireframe: false     // true = tryb siatki
});

const glass = new THREE.MeshPhysicalMaterial({
  color: 0xffffff,
  roughness: 0.1,
  metalness: 0,
  transmission: 0.9,       // przezroczystosc (szklo)
  thickness: 0.5,
  clearcoat: 1,            // polysk lakieru
  clearcoatRoughness: 0.1,
  ior: 1.5                 // wspolczynnik zalamania
});

// Ambient — wypelnia cienie
const ambient = new THREE.AmbientLight(0x404040, 0.4);
scene.add(ambient);

// Directional — glowne zrodlo (slonce)
const dir = new THREE.DirectionalLight(0xffffff, 1.5);
dir.position.set(5, 8, 5);
dir.castShadow = true;
scene.add(dir);

// Point — swiatlo punktowe
const point = new THREE.PointLight(0x22d3ee, 2, 10);
point.position.set(-3, 2, 2);
scene.add(point);

// Spot — reflektor
const spot = new THREE.SpotLight(0xa78bfa, 3, 15, Math.PI / 6, 0.3);
spot.position.set(0, 6, 0);
scene.add(spot);

const clock = new THREE.Clock();

function animate() {
  const delta = clock.getDelta();     // sekundy od ostatniej klatki
  const elapsed = clock.getElapsedTime(); // sekundy od startu

  // ZLE — zalezy od FPS
  // mesh.rotation.x += 0.01;

  // DOBRZE — niezalezne od FPS
  mesh.rotation.x += delta * 0.5;
  mesh.rotation.y += delta * 0.8;

  // Funkcje trygonometryczne dla plynnych ruchow
  mesh.position.y = Math.sin(elapsed * 2) * 0.5;

  controls.update();
  renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);

import { TextureLoader } from 'three';

const loader = new TextureLoader();

// Laduj tekstury (async)
const colorMap = loader.load('textures/brick.jpg');
const normalMap = loader.load('textures/brick_normal.jpg');
const roughnessMap = loader.load('textures/brick_rough.jpg');

const material = new THREE.MeshStandardMaterial({
  map: colorMap,
  normalMap: normalMap,
  roughnessMap: roughnessMap,
  roughness: 0.8,
  metalness: 0.1
});

// Proceduralna tekstura szachownicy
const canvas = document.createElement('canvas');
canvas.width = 256; canvas.height = 256;
const ctx = canvas.getContext('2d');

for (let y = 0; y < 8; y++) {
  for (let x = 0; x < 8; x++) {
    ctx.fillStyle = (x + y) % 2 === 0 ? '#22d3ee' : '#0d1117';
    ctx.fillRect(x * 32, y * 32, 32, 32);
  }
}

const texture = new THREE.CanvasTexture(canvas);

const material = new THREE.MeshStandardMaterial({ map: texture });

// 1. Wlacz cienie w rendererze
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

// 2. Swiatlo rzuca cienie
const light = new THREE.DirectionalLight(0xffffff, 1.5);
light.castShadow = true;
light.shadow.mapSize.set(2048, 2048);
light.shadow.camera.near = 0.5;
light.shadow.camera.far = 30;
light.shadow.camera.left = -10;
light.shadow.camera.right = 10;
light.shadow.camera.top = 10;
light.shadow.camera.bottom = -10;
light.shadow.bias = -0.0005; // koryguje acne

// 3. Obiekty rzucaja cienie
cube.castShadow = true;

// 4. Obiekty odbieraja cienie
floor.receiveShadow = true;

const count = 5000;
const positions = new Float32Array(count * 3);
const colors = new Float32Array(count * 3);

for (let i = 0; i < count; i++) {
  // Pozycja w sferze
  const r = Math.random() * 8;
  const theta = Math.random() * Math.PI * 2;
  const phi = Math.acos(2 * Math.random() - 1);

  positions[i * 3] = r * Math.sin(phi) * Math.cos(theta);
  positions[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta);
  positions[i * 3 + 2] = r * Math.cos(phi);

  // Kolor per-czastka
  const c = new THREE.Color().setHSL(Math.random(), 0.7, 0.5);
  colors[i * 3] = c.r;
  colors[i * 3 + 1] = c.g;
  colors[i * 3 + 2] = c.b;
}

const geom = new THREE.BufferGeometry();
geom.setAttribute('position', new THREE.BufferAttribute(positions, 3));
geom.setAttribute('color', new THREE.BufferAttribute(colors, 3));

const material = new THREE.PointsMaterial({
  size: 0.08,
  vertexColors: true,
  transparent: true,
  opacity: 0.8,
  sizeAttenuation: true,  // mniejsze w oddali
  blending: THREE.AdditiveBlending,
  depthWrite: false
});

const particles = new THREE.Points(geom, material);
scene.add(particles);

import * as THREE from 'three/webgpu';
import { color, sin, time, positionLocal } from 'three/tsl';

const renderer = new THREE.WebGPURenderer({ antialias: true });
await renderer.init(); // asynchroniczna inicjalizacja!

// TSL material
const material = new THREE.MeshStandardNodeMaterial();

// Pulsujacy kolor
material.colorNode = color(0x22d3ee).mul(
  sin(time).mul(0.5).add(0.5)
);

// Falujaca geometria
material.positionNode = positionLocal.add(
  sin(time.add(positionLocal.y)).mul(0.1)
);