Threejs

import * as THREE from 'three';
// Scene, camera, rendererconst scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));document.body.appendChild(renderer.domElement);
// Create cubeconst geometry = new THREE.BoxGeometry();const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });const cube = new THREE.Mesh(geometry, material);scene.add(cube);
// Add lightscene.add(new THREE.AmbientLight(0xffffff, 0.5));const dirLight = new THREE.DirectionalLight(0xffffff, 1);dirLight.position.set(5, 5, 5);scene.add(dirLight);
camera.position.z = 5;
// Animation loopfunction animate() {  requestAnimationFrame(animate);  cube.rotation.x += 0.01;  cube.rotation.y += 0.01;  renderer.render(scene, camera);}animate();
// Responsivewindow.addEventListener('resize', () => {  camera.aspect = window.innerWidth / window.innerHeight;  camera.updateProjectionMatrix();  renderer.setSize(window.innerWidth, window.innerHeight);});

// Built-in geometriesconst box = new THREE.BoxGeometry(1, 1, 1);const sphere = new THREE.SphereGeometry(0.5, 32, 32);const plane = new THREE.PlaneGeometry(10, 10);
// Custom BufferGeometryconst geometry = new THREE.BufferGeometry();const vertices = new Float32Array([  -1, -1,  0,  // vertex 0   1, -1,  0,  // vertex 1   1,  1,  0,  // vertex 2  -1,  1,  0   // vertex 3]);geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
// Indices for trianglesconst indices = new Uint16Array([0, 1, 2, 0, 2, 3]);geometry.setIndex(new THREE.BufferAttribute(indices, 1));
// Instancing for many copiesconst count = 1000;const instancedMesh = new THREE.InstancedMesh(geometry, material, count);const dummy = new THREE.Object3D();
for (let i = 0; i < count; i++) {  dummy.position.set(    (Math.random() - 0.5) * 20,    (Math.random() - 0.5) * 20,    (Math.random() - 0.5) * 20  );  dummy.updateMatrix();  instancedMesh.setMatrixAt(i, dummy.matrix);}scene.add(instancedMesh);

// Standard PBR materialconst material = new THREE.MeshStandardMaterial({  color: 0xffffff,  metalness: 0.5,  roughness: 0.5,  map: colorTexture,  normalMap: normalTexture,  roughnessMap: roughnessTexture,  metalnessMap: metalnessTexture,  envMap: environmentMap,  envMapIntensity: 1});
// Physical material (advanced PBR)const glassMaterial = new THREE.MeshPhysicalMaterial({  color: 0xffffff,  metalness: 0,  roughness: 0,  transmission: 1,     // Glass transparency  thickness: 0.5,  ior: 1.5,           // Index of refraction  envMapIntensity: 1});
// Shader material (custom)const shaderMaterial = new THREE.ShaderMaterial({  uniforms: {    time: { value: 0 },    color: { value: new THREE.Color(0xff0000) }  },  vertexShader: `    varying vec2 vUv;    void main() {      vUv = uv;      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);    }  `,  fragmentShader: `    uniform float time;    uniform vec3 color;    varying vec2 vUv;
    void main() {      gl_FragColor = vec4(color * sin(vUv.x * 10.0 + time), 1.0);    }  `});

// Ambient light (uniform everywhere)const ambient = new THREE.AmbientLight(0xffffff, 0.5);scene.add(ambient);
// Directional light (sun)const dirLight = new THREE.DirectionalLight(0xffffff, 1);dirLight.position.set(5, 10, 5);dirLight.castShadow = true;
// Shadow configurationdirLight.shadow.mapSize.width = 2048;dirLight.shadow.mapSize.height = 2048;dirLight.shadow.camera.left = -10;dirLight.shadow.camera.right = 10;dirLight.shadow.camera.top = 10;dirLight.shadow.camera.bottom = -10;scene.add(dirLight);
// Point light (bulb)const pointLight = new THREE.PointLight(0xffffff, 1, 100);pointLight.position.set(0, 5, 0);scene.add(pointLight);
// Enable shadows on rendererrenderer.shadowMap.enabled = true;renderer.shadowMap.type = THREE.PCFSoftShadowMap;
// Enable on objectsmesh.castShadow = true;mesh.receiveShadow = true;

const loader = new THREE.TextureLoader();
// Load color textureconst colorTexture = loader.load('texture.jpg');colorTexture.colorSpace = THREE.SRGBColorSpace; // Important for color accuracy
// Configure texturecolorTexture.wrapS = THREE.RepeatWrapping;colorTexture.wrapT = THREE.RepeatWrapping;colorTexture.repeat.set(4, 4);
// HDR environment mapimport { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
const rgbeLoader = new RGBELoader();rgbeLoader.load('environment.hdr', (texture) => {  texture.mapping = THREE.EquirectangularReflectionMapping;  scene.environment = texture;  scene.background = texture;});
// Cube texture (skybox)const cubeLoader = new THREE.CubeTextureLoader();const cubeTexture = cubeLoader.load([  'px.jpg', 'nx.jpg',  // +X, -X  'py.jpg', 'ny.jpg',  // +Y, -Y  'pz.jpg', 'nz.jpg'   // +Z, -Z]);scene.background = cubeTexture;

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const loader = new GLTFLoader();loader.load('model.glb', (gltf) => {  const model = gltf.scene;  scene.add(model);
  // Create animation mixer  const mixer = new THREE.AnimationMixer(model);
  // Play all animations  gltf.animations.forEach((clip) => {    const action = mixer.clipAction(clip);    action.play();  });
  // Update in animation loop  const clock = new THREE.Clock();  function animate() {    requestAnimationFrame(animate);    const delta = clock.getDelta();    mixer.update(delta);    renderer.render(scene, camera);  }  animate();});
// Procedural animationfunction animate() {  const time = clock.getElapsedTime();  mesh.rotation.y = time;  mesh.position.y = Math.sin(time) * 0.5;  requestAnimationFrame(animate);  renderer.render(scene, camera);}

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
// Setup Draco compression supportconst dracoLoader = new DRACOLoader();dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/');
const gltfLoader = new GLTFLoader();gltfLoader.setDRACOLoader(dracoLoader);
// Load modelgltfLoader.load('model.glb', (gltf) => {  const model = gltf.scene;
  // Enable shadows  model.traverse((child) => {    if (child.isMesh) {      child.castShadow = true;      child.receiveShadow = true;    }  });
  // Center and scale  const box = new THREE.Box3().setFromObject(model);  const center = box.getCenter(new THREE.Vector3());  model.position.sub(center);
  scene.add(model);});
// Async/Promise patternasync function loadModel(url) {  return new Promise((resolve, reject) => {    gltfLoader.load(url, resolve, undefined, reject);  });}
const gltf = await loadModel('model.glb');scene.add(gltf.scene);

const material = new THREE.ShaderMaterial({  uniforms: {    time: { value: 0 },    amplitude: { value: 0.5 }  },  vertexShader: `    uniform float time;    uniform float amplitude;    varying vec2 vUv;
    void main() {      vUv = uv;      vec3 pos = position;
      // Wave displacement      pos.z += sin(pos.x * 5.0 + time) * amplitude;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);    }  `,  fragmentShader: `    uniform float time;    varying vec2 vUv;
    void main() {      vec3 color = vec3(vUv, 0.5 + 0.5 * sin(time));      gl_FragColor = vec4(color, 1.0);    }  `});
// Update in animation loopfunction animate() {  material.uniforms.time.value = clock.getElapsedTime();  requestAnimationFrame(animate);  renderer.render(scene, camera);}

import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
// Create composerconst composer = new EffectComposer(renderer);
// Render scene passconst renderPass = new RenderPass(scene, camera);composer.addPass(renderPass);
// Bloom passconst bloomPass = new UnrealBloomPass(  new THREE.Vector2(window.innerWidth, window.innerHeight),  1.5,  // strength  0.4,  // radius  0.85  // threshold);composer.addPass(bloomPass);
// Use composer instead of rendererfunction animate() {  requestAnimationFrame(animate);  composer.render(); // NOT renderer.render()}
// Handle resizewindow.addEventListener('resize', () => {  camera.aspect = window.innerWidth / window.innerHeight;  camera.updateProjectionMatrix();  renderer.setSize(window.innerWidth, window.innerHeight);  composer.setSize(window.innerWidth, window.innerHeight);});

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// Camera controlsconst controls = new OrbitControls(camera, renderer.domElement);controls.enableDamping = true;
// Raycasting setupconst raycaster = new THREE.Raycaster();const mouse = new THREE.Vector2();
function onMouseClick(event) {  // Convert mouse to normalized coordinates  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  // Raycast from camera  raycaster.setFromCamera(mouse, camera);  const intersects = raycaster.intersectObjects(scene.children, true);
  if (intersects.length > 0) {    const object = intersects[0].object;    console.log('Clicked:', object);    console.log('Point:', intersects[0].point);
    // Highlight selected object    object.material.emissive.set(0x444444);  }}
window.addEventListener('click', onMouseClick);
// Update controls in animation loopfunction animate() {  requestAnimationFrame(animate);  controls.update(); // Required if enableDamping is true  renderer.render(scene, camera);}

// Dispose geometries, materials, texturesgeometry.dispose();material.dispose();texture.dispose();
// Remove from scenescene.remove(mesh);
// Dispose rendererrenderer.dispose();

window.addEventListener('resize', () => {  camera.aspect = window.innerWidth / window.innerHeight;  camera.updateProjectionMatrix();  renderer.setSize(window.innerWidth, window.innerHeight);  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));});