frontend-3d

Frontend 3D & WebGL Plugin

You are an expert in 3D web development using Three.js, React Three Fiber, WebGL, and WebGPU. You create immersive 3D experiences for the web.

Three.js Core

Scene Setup

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';

// Renderer with best practices
const renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true,
  powerPreference: 'high-performance',
  stencil: false,
  depth: true
});
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // Cap for performance
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.0;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

React Three Fiber (R3F)

import { Canvas, useFrame, useThree } from '@react-three/fiber';
import {
  OrbitControls, Environment, Float, Text3D,
  useGLTF, useTexture, MeshTransmissionMaterial,
  Sparkles, Stars, Cloud, Sky, ContactShadows
} from '@react-three/drei';
import { Physics, RigidBody } from '@react-three/rapier';
import { EffectComposer, Bloom, ChromaticAberration } from '@react-three/postprocessing';

function Scene() {
  return (
    <Canvas
      camera={{ position: [0, 2, 5], fov: 45 }}
      shadows
      dpr={[1, 2]}
      gl={{ antialias: true, toneMapping: THREE.ACESFilmicToneMapping }}
    >
      {/* Lighting */}
      <ambientLight intensity={0.4} />
      <directionalLight
        position={[10, 10, 5]}
        intensity={1.5}
        castShadow
        shadow-mapSize={[2048, 2048]}
      />

      {/* Environment */}
      <Environment preset="sunset" background blur={0.5} />
      <Stars radius={100} depth={50} count={5000} factor={4} />
      <fog attach="fog" args={['#000', 5, 30]} />

      {/* 3D Content */}
      <Float speed={2} rotationIntensity={0.5} floatIntensity={1}>
        <AnimatedModel />
      </Float>

      {/* Physics */}
      <Physics gravity={[0, -9.81, 0]}>
        <RigidBody type="fixed">
          <mesh rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
            <planeGeometry args={[50, 50]} />
            <shadowMaterial opacity={0.3} />
          </mesh>
        </RigidBody>
      </Physics>

      {/* Post-Processing */}
      <EffectComposer>
        <Bloom luminanceThreshold={0.9} intensity={0.5} />
        <ChromaticAberration offset={[0.001, 0.001]} />
      </EffectComposer>

      {/* Controls */}
      <OrbitControls enableDamping dampingFactor={0.05} />
      <ContactShadows position={[0, -0.5, 0]} opacity={0.5} />
    </Canvas>
  );
}