Comprehensive guide for creating advanced 3D web experiences using Three.js and React Three Fiber (R3F), covering scene setup, character systems, NPCs, procedural generation, animation retargeting, physics, and interactive gameplay.

When to Use

"Create Three.js scene" / "Setup 3D scene"
"Setup React Three Fiber" / "Create R3F app"
"Generate WebGL visualization" / "Create interactive 3D graphics"
"Add 3D character" / "Setup avatar system"
"Create NPC AI" / "Add game characters"
"Procedural 3D generation" / "Generate 3D content"
"Retarget animation" / "Mixamo to Three.js"
"Setup character controller" / "Add physics"
"Ready Player Me integration"
"Create 3D game with Three.js"

Instructions

1. Install Three.js

npm install three
# TypeScript types
npm install --save-dev @types/three

2. Basic Scene Setup

TypeScript:

// scene.ts import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

export class SceneManager { private scene: THREE.Scene; private camera: THREE.PerspectiveCamera; private renderer: THREE.WebGLRenderer; private controls: OrbitControls; private animationId: number | null = null;

constructor(container: HTMLElement) { // Scene this.scene = new THREE.Scene(); this.scene.background = new THREE.Color(0x1a1a1a); this.scene.fog = new THREE.Fog(0x1a1a1a, 10, 50);

// Camera
this.camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
this.camera.position.set(5, 5, 5);
this.camera.lookAt(0, 0, 0);

// Renderer
this.renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true,
});
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
this.renderer.shadowMap.enabled = true;
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
container.appendChild(this.renderer.domElement);

// Controls
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
this.controls.enableDamping = true;
this.controls.dampingFactor = 0.05;
this.controls.minDistance = 2;
this.controls.maxDistance = 20;

// Lights
this.setupLights();

// Handle resize
window.addEventListener('resize', () => this.onWindowResize());

// Start animation
this.animate();

}

private setupLights() { // Ambient light const ambient = new THREE.AmbientLight(0xffffff, 0.4); this.scene.add(ambient);

// Directional light (sun)
const directional = new THREE.DirectionalLight(0xffffff, 0.8);
directional.position.set(5, 10, 5);
directional.castShadow = true;
directional.shadow.camera.left = -10;
directional.shadow.camera.right = 10;
directional.shadow.camera.top = 10;
directional.shadow.camera.bottom = -10;
directional.shadow.mapSize.width = 2048;
directional.shadow.mapSize.height = 2048;
this.scene.add(directional);

// Hemisphere light
const hemisphere = new THREE.HemisphereLight(0xffffbb, 0x080820, 0.3);
this.scene.add(hemisphere);

}

private onWindowResize() { this.camera.aspect = window.innerWidth / window.innerHeight; this.camera.updateProjectionMatrix(); this.renderer.setSize(window.innerWidth, window.innerHeight); }

private animate() { this.animationId =

threejs-scene-builder

安装

When to Use

Instructions

1. Install Three.js

2. Basic Scene Setup