Menggabungkan Object Menggunakan Method Group

by

Pada modul ini kita akan membuat bentuk capsule, yang merupakan penggabungan 2 sphere yang dibagi dua dengan 1 cylinder.

Untuk template dasar gunakan code berikut

var scene, camera, renderer, capsule;

init();

function init(){
  const assetPath = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2666677/';
  
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  camera.position.set(0, 0, 3);
  
  const ambient = new THREE.HemisphereLight(0xffffbb, 0x080820);
  scene.add(ambient);
  
  const light = new THREE.DirectionalLight(0xFFFFFF, 3);
  light.position.set(0,2,1);
  scene.add(light);
  
  renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
  
  const controls = new THREE.OrbitControls( camera, renderer.domElement );
  
  //Tambahkan object disini
  
  
  window.addEventListener( 'resize', resize, false);
  
  update();
}

function update(){
  requestAnimationFrame( update );
	renderer.render( scene, camera );
  capsule.rotation.z += 0.01;
}

function resize(){
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize( window.innerWidth, window.innerHeight );
}

Kita akan menambahkan object kapsul pada bagian //Tambahkan object disini.

Pertama buat sphere menggunakan method SphereGeometry(), parameter yang digunakan adalah:

  • radius : radius dari sphere, default adalah 1.
  • widthSegments — jumlah horizontal segments. Minimum value adalah 3, default adalah 32.
  • heightSegments — jumlah vertical segments. Minimum value adalah 2, default adalah 16.
  • phiStart — awal dari horizontal angle. Default adalah 0.
  • phiLength — akhir dari horizontal sweep angle size. Default adalah Math.PI * 2.
  • thetaStart — awal dari vertical angle. Default adalah 0.
  • thetaLength — akhir vertical angle . Default is Math.PI.

Perhatian, makin besar nilai width dan height segment, object makin halus. Namun dapat berefek ke performa. Dokumentasi lengkap SphereGeometry dapat dilihat di https://threejs.org/docs/#api/en/geometries/SphereGeometry

Jadi untuk membuat setengah bola untuk kapsul bagian atas, kita gunakan code berikut. Kita gunakan property wireframe: true agar lebih mudah melakukan debug.

const geometry = new THREE.SphereGeometry(1, 30, 20, 0, Math.PI*2, 0, Math.PI/2);
const material = new THREE.MeshLambertMaterial({wireframe: true});
const sphere = new THREE.Mesh(geometry, material);

Berikutnya kita tambahkan bagian cylinder. Gunakan method CylinderGeometry() dengan parameter:

Dokumentasi lengkap CylinderGeometri dapat dilihat di https://threejs.org/docs/?q=cylinder#api/en/geometries/CylinderGeometry

  • radiusTop — Radius bagian atas cylinder. Default adalah 1.
  • radiusBottom — Radius bagian bawah cylinder. Default adalah 1.
  • height — Tinggi dari cylinder. Default adalah 1.
  • radialSegments — Jumlah segmented faces dari cylinder. Default adalah 8
  • heightSegments — Jumalh faces terhadap tinggi cylinder. Default adalah 1.
  • openEnded — True berarti bagian atas dan bawah cylinder terbuka. Default adalah false, yang berarti bagian atas dan bawah cylinder tertutup.
const geometry2 = new THREE.CylinderGeometry(1,1,5,30,1,true);
const cylinder = new THREE.Mesh(geometry2, material);

Berikutnya buat tutup kapsul bagian bawah. Gunakan method clone dari geometry sphere sebelumnya. Kemudian rotate 180 derajat.

const sphere2 = sphere.clone();
sphere2.position.y = -2.5;
sphere2.rotation.x = Math.PI;

Agar menjadi object kapsul satu kesatuan, kita gunakan grouping.

capsule = new THREE.Group();
capsule.add(sphere);
capsule.add(cylinder);
capsule.add(sphere2);

Latihan

Silakan bereksperimen dengan mengubah material atau menambahkan image background seperti yang sudah dibahas pada modul sebelumnya.

Pada tutorial digunakan scene background seperti berikut.

  const envBg = new THREE.CubeTextureLoader().setPath(`${assetPath}skybox2_`).load(
    ['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']
  );
  scene.background = envBg;

Lalu pada pada deklarasi material kita tambahkan property envMap.

const material = new THREE.MeshLambertMaterial({envMap:envBg});

See the Pen ThreeJS Grouping by SkillPlus (@SkillPlus) on CodePen.

Sharing is caring:

Leave a Comment