Membuat Object Cones, Torus dan TorusKnot

by

Modul ini akan membahas singkat membuat object Cones (kerucut), Torus (bentuk donut) dan TorusKnot (simpul donut).

Untuk template dasar dapat gunakan code berikut

var scene, camera, renderer, mesh;

init();

function init(){
  scene = new THREE.Scene();
  scene.background = new THREE.Color('grey');
  
  camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 1000 );
  camera.position.set(0, 1, 12);
  
  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();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
  
  const controls = new THREE.OrbitControls( camera, renderer.domElement );
  controls.target.set(0,0,0);
  controls.update();
   
  const assetPath = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2666677/';
  
  const alpha = new THREE.TextureLoader().load(`${assetPath}dots.jpg`);
  const tex = new THREE.TextureLoader().load(`${assetPath}bricks-diffuse3.png`);
  
  const cubemap = new THREE.CubeTextureLoader()
	.setPath( `${assetPath}skybox1_` )
	.load( [
		'px.jpg',
		'nx.jpg',
		'py.jpg',
		'ny.jpg',
		'pz.jpg',
		'nz.jpg'
	] );
  
  scene.background = cubemap;
  
  const material = new THREE.MeshStandardMaterial({color:0xffff00, metalness:0.95, roughness:0.01, envMap: cubemap});
  
  //Add meshes here
  
  
  window.addEventListener( 'resize', resize, false);
  
  update();
}

function update(){
  requestAnimationFrame( update );
	renderer.render( scene, camera );
  if (mesh!==undefined){
    mesh.rotation.y += 0.01;
    mesh.rotation.y -= 0.01;
  }
}

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

Cones

Untuk membuat cones, digunakan object cylinder dengan top radius = 0.

const cones = new THREE.CylinderGeometry(0, 3, 7, 25);

Torus

Untuk membuat torus (donut), digunakan method TorusGeometry() dengan parameter:

  • radius – Radius dari torus, dihitung dari center torus ke center tube. Default adalah 1.
  • tube — Radius dari tube. Default adalah 0.4.
  • radialSegments — Jumlah segment secara horizontal. Default adalah 8.
  • tubularSegments — Jumlah segement secara vertikal. Default adalah 6.

Untuk lebih detail lihat dokumentasi di https://threejs.org/docs/#api/en/geometries/TorusGeometry

const donut = new THREE.TorusGeometry(1, 0.5, 10, 20);

TorusKnot

Untuk membuat simpul berbentuk donut, digunakan method TorusKnotGeometry() dengan parameter:

radius – Radius dari torus. Default adalah 1.
tube — Radius dari tube. Default adalah 0.4.
tubularSegments — Jumlah segment horizontal, default adalah 64.
radialSegments — Jumlah segement vertikal, default is 8.
p dan q untuk mengatur kompleksitas simpul, silakan bereksperimen, karena akan lebih jelas.

Untuk lebih detail lihat di https://threejs.org/docs/#api/en/geometries/TorusKnotGeometry

const knot = new THREE.TorusKnotGeometry(1, 0.5, 60, 16, 2, 3);

Berikut hasil akhir dari code untuk membuat object-object diatas, atau bisa kunjungi https://codepen.io/SkillPlus/pen/VwWBOqa

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

Sharing is caring:

Leave a Comment