threejs-skills

Create a THREE.Scene, a PerspectiveCamera, and a WebGLRenderer, then add meshes built from geometry and material to the scene. Render continuously inside renderer.setAnimationLoop and handle window resize to keep the camera aspect ratio correct.

Use THREE.Raycaster with a normalized mouse Vector2 to detect clicks and hovers on meshes. Call raycaster.setFromCamera with the camera, then intersectObjects against your clickable meshes to find the targeted object.

A black screen usually means objects were not added to the scene, the camera is inside the geometry, renderer.render is never called, or lit materials like MeshStandardMaterial are used without any lights. Check each of these in order.

THREE.Timer is recommended over THREE.Clock as of Three.js r183. Timer pauses when the tab is hidden, has a cleaner API, and integrates better with setAnimationLoop for frame-delta-based animation.

Yes, use an HTML import map pointing to the three module and three/addons on a CDN such as jsDelivr, then write module scripts directly in the page. This suits prototypes and demos, while production apps benefit from npm with Vite or webpack.

Reuse geometries and materials, use InstancedMesh for many identical objects, apply THREE.LOD for distance-based detail, and keep particle counts moderate. Dispose of geometries, materials, and textures when removing objects.