threejs-skills

Create a THREE.Scene, a PerspectiveCamera, and a WebGLRenderer, then add meshes built from geometry and materials. Run a requestAnimationFrame loop that calls renderer.render(scene, camera) each frame to display the scene.

Use THREE.Raycaster with a normalized mouse Vector2, call raycaster.setFromCamera(mouse, camera), then intersectObjects on your clickable meshes. The first intersected object is the one the user clicked.

THREE.OrbitControls is an example module not included in the r128 CDN build, so importing it fails. Implement custom drag-and-scroll camera controls with mouse event listeners instead.

A black screen usually means objects were not added to the scene, the camera is inside the geometry, lit materials have no lights, or renderer.render() is never called. Check each of these in order.

No, CapsuleGeometry was introduced in r142 and is unavailable in r128. Combine a CylinderGeometry with two SphereGeometry caps, or build custom BufferGeometry vertices as an alternative.

Reuse geometries and materials across meshes, limit particle counts to a few thousand, lower geometry segment counts, and dispose of unused geometry, materials, and textures. For many identical objects, use InstancedMesh.