threejs

Create a THREE.Scene, a PerspectiveCamera with position and field of view, and a WebGLRenderer with antialias enabled. Add meshes built from geometry and material to the scene, then call renderer.render inside a requestAnimationFrame loop.

Track mousedown, mousemove, and mouseup events on the renderer's DOM element, then update camera position based on mouse deltas and call camera.lookAt. Add a wheel event listener to adjust camera.position.z for zooming.

Black screens usually occur when objects are not added to the scene, the camera is positioned inside objects, or lit materials like MeshStandardMaterial are used without any lights. Verify scene.add calls, camera position, and that renderer.render runs in the animation loop.

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

Yes, use @react-three/fiber and @react-three/drei instead of vanilla Three.js patterns, wrapping the Canvas in a container with explicit dimensions. Avoid creating multiple WebGL contexts since the GPU context lives inside Tauri's webview.

Use THREE.Raycaster with a normalized mouse Vector2, call raycaster.setFromCamera with the camera, then intersectObjects against your clickable meshes. The first intersected object in the returned array is the clicked target.