002. 선그리기

 

Mesh를 사용하지 않고 선이나 원을 그려보자.

 

 

 

 

1. 먼저 renderer, scene, camera 를 설정

// 기본 세팅 코드 scene, camera, renderer

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  45, //field of view(시야각)
  window.innerWidth / window.innerHeight, //aspect ratio(종횡비)
  1, // near
  500 //far 절단면
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

camera.position.set(0, 0, 100);
camera.lookAt(0, 0, 0);

2. 다음은 재질을 정의해 보자(선을 그리기 위해서는 LineBasicMaterial나 LineDashedMaterial를 사용하면 됨)

const material = new THREE.LineBasicMaterial({ color: 0xfffff });

3. 꼭지점에 대한 기하학을 정의하자 (x좌표, y좌표, z좌표)

• 나는 마름모를 그려볼것임

const points = [];
points.push(new THREE.Vector3(-15, 0, 0));
points.push(new THREE.Vector3(0, 10, 0));
points.push(new THREE.Vector3(15, 0, 0));
points.push(new THREE.Vector3(0, -10, 0));
points.push(new THREE.Vector3(-15, 0, 0)); // 이 코드를 삭제한다면 마지막 꼭지점은 이어지지 않아서 선이 닫히지 않을것

const geometry = new THREE.BufferGeometry().setFromPoints(points);

4. 점과 재질을 생성하였으니 합쳐서 선을 만들수 있다. 그리고 render를 시켜보자.

const line = new THREE.Line(geometry, material);

scene.add(line);
renderer.render(scene, camera)

 

5. 뭔가 심심한 느낌이 들어 저번에 활용했던 애니메이팅 효과를 추가하였다.

function animate() {
    requestAnimationFrame(animate);
    line.rotation.y += 0.01; // y축 기준으로 돌수 있음
    renderer.render(scene, camera);
  }

animate()

              좌라란   ~