Latihan 1: Three.js Setup — Creative Web

Latihan 1 dari materi Three.js Setup di Creative Web — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Exercise ini jalan di Worker tanpa GPU dan tanpa three.js, jadi kamu membuat tiruan objek three.js sebagai object biasa, dengan bentuk yang meniru Scene, PerspectiveCamera dan Mesh. Kode awal sudah berisi bagian Setup, loop 10 frame dan lima console.log: biarkan semuanya. Isi lima fungsinya:

  1. createScene() mengembalikan { type: "Scene", children: [] }.
  2. createCamera(fov, aspect) mengembalikan { type: "PerspectiveCamera", fov: fov, aspect: aspect, position: { x: 0, y: 0, z: 5 } }.
  3. createMesh(geometryType, color) mengembalikan { type: "Mesh", geometry: geometryType, color: color, rotation: { x: 0, y: 0, z: 0 } }.
  4. addToScene(scene, object) memasukkan object ke daftar anak: scene.children.push(object).
  5. rotateMesh(mesh, rx, ry) menambah rotasi, seperti satu frame: mesh.rotation.x += rx dan mesh.rotation.y += ry.

Yang dinilai: lima baris console ini, persis dan berurutan:

  1. 2
  2. 75,1.5
  3. BoxGeometry,#3498db
  4. 0.10,0.20
  5. SphereGeometry

Satu cek lagi memanggil fungsimu dengan nilai lain: scene baru, satu mesh TorusGeometry yang ditambahkan lalu diputar rotateMesh(m, 0.25, 0.5), dan createCamera(60, 2). Hasilnya harus 1 anak, type "Scene", rotation.x 0.25, dan position.z kamera 5.

Hint