Camera Path

by

Pada modul ini kita akan membuat camera yang mengikuti path. Path ini dibuat menggunakan curve. File curve bisa didownload di https://github.com/mrdoob/three.js/tree/dev/examples/js/curves

Pada tutorial file curve sudah disimpan di cloud.

<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2666677/CurveExtras.js'></script>

Untuk template aplikasi three.js gunakan code dibawah.

var scene, camera, renderer, clock, tube;

init();

function init(){
  const assetPath = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/2666677/";
  
  clock = new THREE.Clock();
  
  scene = new THREE.Scene();
  const envMap = new THREE.CubeTextureLoader()
    .setPath(`${assetPath}skybox1_`)
    .load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
 	scene.background = envMap;
	
  camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 1000 );
  camera.position.set(0, 4, 57);//wide position
  camera.lookAt(0,1.5,0);
  
  const ambient = new THREE.HemisphereLight(0xffffbb, 0x080820);
  scene.add(ambient);
  
  const light = new THREE.DirectionalLight(0xFFFFFF, 1);
  light.position.set( 1, 10, 6);
  scene.add(light);
  
  renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
  
  //Add mesh here
  
  
  window.addEventListener( 'resize', resize, false);
  
  update();
}

function updateCamera(){
  
}

function update(){
  requestAnimationFrame( update );
  updateCamera();
	renderer.render( scene, camera );  
}

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

Menambahkan Curve

Curve yang akan digunakan adalah GrannyKnot (dari file CurveExtras.js). Tambahkan pada bagian //add mesh here

const curve = new THREE.Curves.GrannyKnot();

Kita gunakan curve diatas untuk membuat object. Object yang akan kita gunakan adalah TubeGeometry(). Parameter yang digunakan adalah:

  • path: menggunakan curve.
  • tubularSegments: jumlah segment, makin besar makin halus, namun berdampak terhadap performa.
  • radius: radius dari tube.
  • radialSegments: jumlah segment radial.
  • closed: boolean, jika true, maka tube akan tertutup.

const geometry = new THREE.TubeGeometry(curve, 100, 2, 8, true);
const material = new THREE.MeshBasicMaterial({color:0xeeeeee, wireframe:true, side:THREE.DoubleSide});

tube = new THREE.Mesh(geometry, material);

scene.add(tube);

Kemudian pada fungsi updateCamera, tambahkan code berikut.

Kode dibawah berfungsi untuk mengatur posisi kamera dan posisi yang dilihat kamera.

function updateCamera(){
  const time = clock.getElapsedTime();
  const looptime = 20;
  const t1 = (time % looptime) / looptime;
  const t2 = ((time + 0.1) % looptime) / looptime;
  const pos1 = tube.geometry.parameters.path.getPointAt(t1);
  const pos2 = tube.geometry.parameters.path.getPointAt(t2);
  
  camera.position.copy(pos1);
  camera.lookAt(pos2);
}
Sharing is caring:

Leave a Comment