ThreeJS Examples Syllabus

Category 1: Fundamentals - Geometry, Camera, and Basic Rendering (幾何、相機和基本渲染)

Focus: Core concepts and basic 3D scene setup

Examples to cover (~30):

Basics: webgl_geometries, webgl_camera, webgl_camera_array, webgl_camera_logarithmicdepthbuffer
Basic Geometry: webgl_geometry_cube, webgl_geometry_shapes, webgl_geometry_colors, webgl_geometry_dynamic
Parametric & Advanced: webgl_geometries_parametric, webgl_geometry_convex, webgl_geometry_terrain
Text: webgl_geometry_text, webgl_geometry_text_shapes, webgl_geometry_text_stroke
Special: webgl_geometry_minecraft, webgl_geometry_teapot, webgl_geometry_nurbs
Extrusion: webgl_geometry_extrude_shapes, webgl_geometry_extrude_splines
Tools: webgl_helpers, webgl_geometry_spline_editor, webgl_geometry_terrain_raycast
CSG: webgl_geometry_csg
Lookup: webgl_geometry_colors_lookuptable

Category 2: Materials, Textures & Visual Effects (材質、紋理和視覺效果)

Focus: Materials system, texture mapping, and visual enhancements

Examples to cover (~50):

Basic Materials: webgl_materials_blending, webgl_materials_blending_custom, webgl_materials_channels, webgl_materials_wireframe, webgl_materials_toon, webgl_materials_alphahash
Texture Mapping: webgl_materials_texture_anisotropy, webgl_materials_texture_canvas, webgl_materials_texture_filters, webgl_materials_texture_manualmipmap, webgl_materials_texture_partialupdate, webgl_materials_texture_rotation
Advanced Materials: webgl_materials_bumpmap, webgl_materials_normalmap, webgl_materials_normalmap_object_space, webgl_materials_displacementmap
PBR Materials: webgl_materials_physical_clearcoat, webgl_materials_physical_transmission, webgl_materials_physical_transmission_alpha, webgl_materials_subsurface_scattering
Environment Maps: webgl_materials_cubemap, webgl_materials_cubemap_dynamic, webgl_materials_cubemap_refraction, webgl_materials_cubemap_mipmaps, webgl_materials_cubemap_render_to_mipmaps, webgl_materials_envmaps, webgl_materials_envmaps_exr, webgl_materials_envmaps_groundprojected, webgl_materials_envmaps_hdr, webgl_materials_matcap
Video/Webcam: webgl_materials_video, webgl_materials_video_webcam
Special: webgl_materials_car, webgl_materials_modified
Effects: webgl_effects_anaglyph, webgl_effects_ascii, webgl_effects_parallaxbarrier, webgl_effects_peppersghost, webgl_effects_stereo
Special Rendering: webgl_mirror, webgl_refraction, webgl_portal

Category 3: Lighting & Shadows (光線與陰影)

Focus: Different light types, shadow mapping techniques

Examples to cover (~25):

Light Types: webgl_lights_hemisphere, webgl_lights_physical, webgl_lights_pointlights, webgl_lights_spotlight, webgl_lights_spotlights, webgl_lights_rectarealight
Light Probes: webgl_lightprobe, webgl_lightprobe_cubecamera
Shadows: webgl_shadowmap, webgl_shadowmap_performance, webgl_shadowmap_pointlight, webgl_shadowmap_viewer, webgl_shadowmap_vsm, webgl_shadowmesh, webgl_shadow_contact
Advanced Shadows: webgl_shadowmap_csm, webgl_shadowmap_pcss, webgl_shadowmap_progressive
Lens Effects: webgl_lensflares
Global Illumination: webgl_simple_gi
Tone Mapping: webgl_tonemapping
Color Space: webgl_test_wide_gamut, webgl_furnace_test, webgl_pmrem_test

Category 4: Animation & Character Control (動畫和角色控制)

Focus: Keyframe animation, skeletal animation, morphing

Examples to cover (~25):

Basic Animation: webgl_animation_keyframes, webgl_animation_multiple
Skinning: webgl_animation_skinning_blending, webgl_animation_skinning_additive_blending, webgl_animation_skinning_ik, webgl_animation_skinning_morph
Morph Targets: webgl_morphtargets, webgl_morphtargets_face, webgl_morphtargets_horse, webgl_morphtargets_sphere, webgl_morphtargets_webcam
Animation Groups: misc_animation_groups, misc_animation_keys
Instanced Animation: webgl_instancing_morph
Modifiers: webgl_modifier_curve, webgl_modifier_curve_instanced, webgl_modifier_edgesplit, webgl_modifier_simplifier, webgl_modifier_subdivision, webgl_modifier_tessellation

Category 5: Interaction & Controls (交互與控制)

Focus: User interaction, raycasting, controls

Examples to cover (~35):

Interactive: webgl_interactive_cubes, webgl_interactive_cubes_gpu, webgl_interactive_cubes_ortho, webgl_interactive_buffergeometry, webgl_interactive_lines, webgl_interactive_points, webgl_interactive_raycasting_points, webgl_interactive_voxelpainter
Raycasting: webgl_raycaster_bvh, webgl_raycaster_sprite, webgl_raycaster_texture, misc_raycaster_helper
Camera Controls: misc_controls_orbit, misc_controls_arcball, misc_controls_fly, misc_controls_map, misc_controls_pointerlock, misc_controls_trackball, misc_controls_transform, misc_controls_drag
Selection: misc_boxselection
Look At: misc_lookat
Layers: webgl_layers
Math: webgl_math_obb, webgl_math_orientation_transform

Category 6: Instancing, Performance & Advanced Geometry

Focus: Performance optimization, instancing, buffer geometry

Examples to cover (~50):

Instancing: webgl_instancing_dynamic, webgl_instancing_performance, webgl_instancing_raycast, webgl_instancing_scatter
Buffer Geometry: webgl_buffergeometry, webgl_buffergeometry_attributes_integer, webgl_buffergeometry_attributes_none, webgl_buffergeometry_custom_attributes_particles, webgl_buffergeometry_drawrange, webgl_buffergeometry_glbufferattribute, webgl_buffergeometry_indexed, webgl_buffergeometry_instancing, webgl_buffergeometry_instancing_billboards, webgl_buffergeometry_instancing_interleaved, webgl_buffergeometry_lines, webgl_buffergeometry_lines_indexed, webgl_buffergeometry_points, webgl_buffergeometry_points_interleaved, webgl_buffergeometry_rawshader, webgl_buffergeometry_selective_draw, webgl_buffergeometry_uint
Custom Attributes: webgl_custom_attributes, webgl_custom_attributes_lines, webgl_custom_attributes_points, webgl_custom_attributes_points2, webgl_custom_attributes_points3
Points & Particles: webgl_points_billboards, webgl_points_dynamic, webgl_points_sprites, webgl_points_waves
Lines: webgl_lines_colors, webgl_lines_dashed, webgl_lines_fat, webgl_lines_fat_raycasting, webgl_lines_fat_wireframe
LOD: webgl_lod
Batch: webgl_mesh_batch
Performance: webgl_performance, webgl_test_memory, webgl_test_memory2
Sprites: webgl_sprites

Category 7: File Loaders & Import/Export

Focus: Loading external 3D models and assets

Examples to cover (~70):

GLTF (Most Important): webgl_loader_gltf, webgl_loader_gltf_avif, webgl_loader_gltf_compressed, webgl_loader_gltf_dispersion, webgl_loader_gltf_instancing, webgl_loader_gltf_iridescence, webgl_loader_gltf_sheen, webgl_loader_gltf_transmission, webgl_loader_gltf_variants, webgl_loader_gltf_anisotropy
Common Formats: webgl_loader_fbx, webgl_loader_fbx_nurbs, webgl_loader_obj, webgl_loader_obj_mtl, webgl_loader_collada, webgl_loader_collada_kinematics, webgl_loader_collada_skinning, webgl_loader_draco, webgl_loader_stl, webgl_loader_ply
CAD Formats: webgl_loader_3dm, webgl_loader_3ds, webgl_loader_3mf, webgl_loader_3mf_materials, webgl_loader_amf, webgl_loader_ifc, webgl_loader_usdz, webgl_loader_kmz
Animation Formats: webgl_loader_bvh, webgl_loader_md2, webgl_loader_md2_control, webgl_loader_mdd
Point Cloud: webgl_loader_pcd, webgl_loader_xyz
Scientific: webgl_loader_pdb, webgl_loader_nrrd, webgl_loader_vtk
Other: webgl_loader_gcode, webgl_loader_ldraw, webgl_loader_lwo, webgl_loader_svg, webgl_loader_vox, webgl_loader_vrml, webgl_loader_ttf
Texture Loaders: webgl_loader_texture_dds, webgl_loader_texture_exr, webgl_loader_texture_ultrahdr, webgl_loader_texture_hdr, webgl_loader_texture_ktx, webgl_loader_texture_ktx2, webgl_loader_texture_lottie, webgl_loader_texture_pvrtc, webgl_loader_texture_rgbm, webgl_loader_texture_tga, webgl_loader_texture_tiff, webgl_loader_imagebitmap
Exporters: misc_exporter_draco, misc_exporter_gltf, misc_exporter_obj, misc_exporter_ply, misc_exporter_stl, misc_exporter_usdz, misc_exporter_exr, misc_exporter_ktx2

Category 8: Post-Processing & Advanced Rendering

Focus: Post-processing effects, render targets, advanced techniques

Examples to cover (~60):

Basic Post-Processing: webgl_postprocessing, webgl_postprocessing_advanced
Anti-Aliasing: webgl_postprocessing_fxaa, webgl_postprocessing_smaa, webgl_postprocessing_ssaa, webgl_postprocessing_taa
Bloom & Glow: webgl_postprocessing_unreal_bloom, webgl_postprocessing_unreal_bloom_selective
Depth Effects: webgl_postprocessing_dof, webgl_postprocessing_dof2, webgl_postprocessing_ssao, webgl_postprocessing_sao, webgl_postprocessing_gtao, webgl_postprocessing_material_ao
Reflections: webgl_postprocessing_ssr
Stylistic: webgl_postprocessing_outline, webgl_postprocessing_pixel, webgl_postprocessing_rgb_halftone, webgl_postprocessing_sobel, webgl_postprocessing_glitch, webgl_postprocessing_afterimage
Color Grading: webgl_postprocessing_3dlut, webgl_postprocessing_backgrounds, webgl_postprocessing_transition
Special Effects: webgl_postprocessing_godrays, webgl_postprocessing_masking, webgl_postprocessing_procedural
Render Targets: webgl_rtt, webgl_multiple_rendertargets, webgl_multisampled_renderbuffers
Clipping: webgl_clipping, webgl_clipping_advanced, webgl_clipping_intersection, webgl_clipping_stencil, webgl_clipculldistance
Depth & Texture: webgl_depth_texture, webgl_framebuffer_texture
Advanced Textures: webgl_texture2darray, webgl_texture2darray_compressed, webgl_texture2darray_layerupdate, webgl_texture3d, webgl_texture3d_partialupdate
Decals: webgl_decals
UBO: webgl_ubo, webgl_ubo_arrays
Multiple Views: webgl_multiple_elements, webgl_multiple_elements_text, webgl_multiple_scenes_comparison, webgl_multiple_views
Panoramas: webgl_panorama_cube, webgl_panorama_equirectangular, webgl_video_panorama_equirectangular
Read Buffer: webgl_read_float_buffer
Path Tracing: webgl_renderer_pathtracer
Render Target Array: webgl_rendertarget_texture2darray

Category 9: Shaders, GPGPU, Volumes & Special Techniques

Focus: Custom shaders, GPU computing, volumetric rendering

Examples to cover (~35):

Custom Shaders: webgl_shader, webgl_shader_lava, webgl_shaders_ocean, webgl_shaders_sky
GPGPU: webgl_gpgpu_birds, webgl_gpgpu_birds_gltf, webgl_gpgpu_water, webgl_gpgpu_protoplanet
Volumetric: webgl_volume_cloud, webgl_volume_instancing, webgl_volume_perlin
Water: webgl_water, webgl_water_flowmap
Marching Cubes: webgl_marchingcubes
Video: webgl_video_kinect
Workers: webgl_worker_offscreencanvas
Audio: webaudio_orientation, webaudio_sandbox, webaudio_timing, webaudio_visualizer
CSS Integration: css2d_label, css3d_molecules, css3d_orthographic, css3d_periodictable, css3d_sandbox, css3d_sprites, css3d_youtube
SVG: svg_lines, svg_sandbox
Physics: physics_ammo_break, physics_ammo_cloth, physics_ammo_instancing, physics_ammo_rope, physics_ammo_terrain, physics_ammo_volume, physics_jolt_instancing, physics_rapier_instancing
Game: games_fps
Tests: misc_uv_tests

Category 10: WebGPU & WebXR (Future of 3D Web)

Focus: Next-generation graphics API and VR/AR

Examples to cover (~180):

WebGPU (~157 examples):

Basics: webgpu_camera, webgpu_camera_array, webgpu_camera_logarithmicdepthbuffer, webgpu_sandbox
Materials: webgpu_materials, webgpu_materials_basic, webgpu_materials_alphahash, webgpu_materials_arrays, webgpu_materials_displacementmap, webgpu_materials_envmaps, webgpu_materials_envmaps_bpcem, webgpu_materials_lightmap, webgpu_materials_matcap, webgpu_materials_sss, webgpu_materials_transmission, webgpu_materials_toon, webgpu_materials_video, webgpu_clearcoat
Lighting: webgpu_lights_custom, webgpu_lights_ies_spotlight, webgpu_lights_phong, webgpu_lights_physical, webgpu_lights_rectarealight, webgpu_lights_selective, webgpu_lights_spotlight, webgpu_lights_tiled, webgpu_lightprobe, webgpu_lightprobe_cubecamera
Compute Shaders: webgpu_compute_audio, webgpu_compute_birds, webgpu_compute_geometry, webgpu_compute_particles, webgpu_compute_particles_rain, webgpu_compute_particles_snow, webgpu_compute_points, webgpu_compute_sort_bitonic, webgpu_compute_texture, webgpu_compute_texture_pingpong, webgpu_compute_water
TSL (Three Shading Language): webgpu_tsl_angular_slicing, webgpu_tsl_compute_attractors_particles, webgpu_tsl_earth, webgpu_tsl_editor, webgpu_tsl_galaxy, webgpu_tsl_halftone, webgpu_tsl_interoperability, webgpu_tsl_procedural_terrain, webgpu_tsl_raging_sea, webgpu_tsl_transpiler, webgpu_tsl_vfx_flames, webgpu_tsl_vfx_linkedparticles, webgpu_tsl_vfx_tornado
Post-Processing: All webgpu_postprocessing_* examples (~30)
Advanced: Shadows, instancing, skinning, volumes, particles, loaders, etc.

WebXR (~24 examples):

AR: webxr_ar_cones, webxr_ar_hittest, webxr_ar_lighting, webxr_ar_plane_detection
VR Interaction: webxr_vr_handinput, webxr_vr_handinput_cubes, webxr_vr_handinput_profiles, webxr_vr_handinput_pointerclick, webxr_vr_handinput_pointerdrag, webxr_vr_handinput_pressbutton
VR Experiences: webxr_vr_layers, webxr_vr_panorama, webxr_vr_panorama_depth, webxr_vr_rollercoaster, webxr_vr_sandbox, webxr_vr_teleport, webxr_vr_video
XR General: webxr_xr_ballshooter, webxr_xr_controls_transform, webxr_xr_cubes, webxr_xr_dragging, webxr_xr_dragging_custom_depth, webxr_xr_haptics, webxr_xr_paint, webxr_xr_sculpt
WebGPU XR: webgpu_xr_cubes

📊 Summary Statistics

Category	Topic	# Examples
1	Fundamentals	~30
2	Materials & Textures	~50
3	Lighting & Shadows	~25
4	Animation	~25
5	Interaction & Controls	~35
6	Performance & Instancing	~50
7	Loaders & File I/O	~70
8	Post-Processing	~60
9	Shaders & Special	~35
10	WebGPU & WebXR	~180
Total		~560

🎯 Teaching Approach Recommendations

Lesson Structure: Each lesson should be 2-3 hours with:

Theory introduction (20%)
Live coding demonstration (40%)
Student hands-on practice (40%)

Key Examples to Demo Live: Focus on 5-8 representative examples per lesson, show others as reference

Progressive Difficulty: Start simple in each lesson, build complexity

Practical Projects: End each lesson with a mini-project combining concepts

WebGPU Note: Lesson 10 is the longest - consider splitting if needed, as WebGPU is the future but may need more dedicated time

Post Views: 48

2025/11/11 by admin