2 / 4

Sukurk index.html — tuščia 3D drobė

Jokių įrankių, jokio „build" — vienas failas, kurį atidarai naršyklėje. Sukurk aplanką ir jame index.html.

Kas viduje:

<script type="importmap"> — pasako naršyklei, kad import ... from 'three' reiškia Three.js iš CDN (interneto). Būtinas, kad trumpas vardas three suveiktų.
<style> — html, body { margin: 0; height: 100% } ir canvas { display: block }. Be šito drobė paliktų 8px tarpą ir slinkties juostą.
Scena su fono spalva (0x0b1026 — tamsi kosmoso mėlyna). Kol kas jokių objektų — tik fonas įrodo, kad piešiama.
Kamera ir atvaizduotojas (WebGLRenderer). document.body.appendChild(renderer.domElement) prideda drobę į puslapį.
Atvaizdavimo ciklas animate() su requestAnimationFrame — perpiešia kadras po kadro.
resize klausytojas — drobė lieka per visą langą jį keičiant.

Patikrink. Atidaryk index.html naršyklėje (dukart spustelėk failą arba nutempk į naršyklės langą). Turi pamatyti:

Visas langas užpildytas vientisa tamsiai mėlyna spalva (0b1026).
Jokių objektų, jokios slinkties juostos. Keisdamas lango dydį — spalva
persitempia per visą plotą.

Tuščia mėlyna drobė = 3D konvejeris veikia. Objektus dėsim kitą pamoką.

Spąstai. Praleisk <script type="importmap"> bloką (arba suklysk CDN adrese) ir atidaryk puslapį. Ekranas lieka baltas ir tuščias, o naršyklės konsolėje (F12 → Console) raudonai:
Uncaught TypeError: Failed to resolve module specifier "three".
Relative references must start with either "/", "./", or "../".
Naršyklė nežino, kas yra „three", nes import map jai to nepasakė. Grąžink import map bloką su teisingu CDN adresu — ir drobė atgyja. Šitą klaidą pamatysi bene pirmą, todėl įsidėmėk: jei ekranas baltas — pirmiausia atverk konsolę.

index.html SUKURTI

Sukurk šį failą kataloge ./

<!DOCTYPE html>
<html lang="lt">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Saulės sistema</title>
	<style>
		/* Fill the whole window; no margin, no scrollbars. Without this the
		   canvas leaves an 8px gap and shows a scrollbar. */
		html, body { margin: 0; height: 100%; }
		canvas { display: block; }
	</style>
	<!-- Import map: lets us write `import ... from 'three'` with a CDN URL. -->
	<script type="importmap">
	{ "imports": { "three": "https://unpkg.com/three@0.160.0/build/three.module.js" } }
	</script>
</head>
<body>
	<script type="module">
		import * as THREE from 'three';

		// 1) The scene: the world. For now it is empty — just a background color.
		const scene = new THREE.Scene();
		scene.background = new THREE.Color(0x0b1026); // deep space blue

		// 2) The camera: our viewpoint into the scene.
		const camera = new THREE.PerspectiveCamera(
			75, window.innerWidth / window.innerHeight, 0.1, 1000
		);
		camera.position.z = 5;

		// 3) The renderer: draws the scene onto a <canvas>.
		const renderer = new THREE.WebGLRenderer({ antialias: true });
		renderer.setSize(window.innerWidth, window.innerHeight);
		renderer.setPixelRatio(window.devicePixelRatio);
		document.body.appendChild(renderer.domElement); // add the canvas to the page

		// The render loop: redraw every frame (~60 fps).
		function animate() {
			requestAnimationFrame(animate);
			renderer.render(scene, camera);
		}
		animate();

		// Keep it filling the window when the window resizes.
		window.addEventListener('resize', () => {
			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize(window.innerWidth, window.innerHeight);
		});
	</script>
</body>
</html>