threejs-webgl

Create a Scene, PerspectiveCamera, and WebGLRenderer, then add lights and meshes before running a requestAnimationFrame loop that calls renderer.render. The bundled setup_scene.py script generates this boilerplate with configurable camera, lighting, and shadow options.

MeshStandardMaterial is the recommended choice for realistic PBR rendering with roughness and metalness workflows. Use MeshPhysicalMaterial for glass, clearcoat, or transmission effects, and MeshBasicMaterial or MeshLambertMaterial when performance matters more than realism.

Yes, Three.js provides a WebGPURenderer imported from three/webgpu as a modern alternative to WebGLRenderer. It uses setAnimationLoop instead of requestAnimationFrame and supports tone mapping configuration.

Use GLTFLoader combined with DRACOLoader, setting the decoder path before loading. After loading, traverse the model to enable shadows on meshes and use AnimationMixer to play embedded animations.

Leaks come from not calling dispose on geometries, materials, and textures, while low FPS usually stems from too many draw calls, large textures, or excessive shadow-casting lights. Use InstancedMesh for repeated objects and the optimization checklist to profile with renderer.info.

Fix z-fighting by increasing the near plane distance, reducing the far plane, or enabling material.polygonOffset. For washed-out colors, set texture.colorSpace to SRGBColorSpace for diffuse maps and configure renderer.outputColorSpace.