경로 따라 가기

강 의 를 시작 하기 전에 먼저 이전 사례 프레젠테이션 주소:http://www.yxyy.name/example/...다운로드 주소:https://github.com/buglas/exa... > supPath.html
원리
1. 경 로 는 필수 대상 에 따라 이동 물체 와 경로

예 를 들 어 비행기 와 비행기 이동 노선

2. 고려 해 야 할 상황:

물체 의 이동 방향 과 위 치 는 반드시 경로 의 제약 을 받 아야 한다

물체 의 회전 방향 이 경로 에 의 해 제약 을 받 는 지 여부

회전 방향 은 경로 의 제약 을 받 지 않 습 니 다.
회전 방향 은 경로 에 의 해 제약 을 받는다.
3. 물체 의 회전 방향 이 경로 의 제약 을 받 으 려 면 두 가지 실현 방식 이 있다.

하 드 회전: 물체 회전 각 도 는 그 가 있 는 선분 의 방향 과 일치 합 니 다 (가설 경 로 는 선분 으로 구성 되 어 있 습 니 다).

물 체 는 전환점 에서 회전 하 는 것 이 비교적 경직 되 어 있다.위의 그림 과 같다.

부 드 러 운 회전: 물 체 는 경로 의 전환점 에서 지나치게 매끄럽다.

물체 가 전환점 에서 회전 하 는 것 은 과도 하고 회전 이 원활 하 다.다음 그림:

4. 소프트 회전 을 실현 하 는 사고방식 은 두 가지 가 있다.

미리 원활 한 전환점: 애니메이션 전에 경 로 를 원활 하 게 처리 합 니 다.위의 그림 처럼.

실시 간 원활 한 전환점: 물 체 는 이동 과정 에서 자신의 다음 위 치 를 원활 하 게 처리한다.다음 그림 을 보십시오.

5. 미리 부 드 러 운 가운데 물체 가 따 르 는 경 로 는 이미 수정 되 었 기 때문에 그의 이동 궤적 도 최초의 경로 와 일치 하지 않 을 것 이다.
6. 실시 간 으로 원활 하면 물체 의 회전 속성 과 위치 속성 을 분리 할 수 있다. 그림 과 같다.

원활 한 회전 각도 만 있 고 물 체 는 원시 경 로 를 따라 이동한다

원활 한 회전 각도 와 이동 위치.물체 의 위 치 는 두 점 의 위치 에 따라 삽입 값 으로 계산 할 것 이다.뒤의 사례 는 상세 하 게 설명 할 것 이다.

2. 예시: 실시 간 으로 원활 한 방식 으로 경 로 를 따라 갑 니 다.
이 예 는 three. js 기초 가 필요 합 니 다. three. js 부분 에 대해 저 는 간단 한 개술 만 하 겠 습 니 다.
1. 장면 구축:

//  html   canvas
const canvas = document.querySelector('#c');
const width = canvas.clientWidth;
const height = canvas.clientHeight;
//   
const renderer = new THREE.WebGLRenderer({canvas});
renderer.setSize(width, height, false);
//  
const fov = 45;
const aspect = width / height;
const near = 0.01;
const far = 10;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 2, 0);
camera.updateProjectionMatrix();
//  
const scene = new THREE.Scene();

2. 경로 그리 기

let curve;
let curveObject;
{
  const points = [
      [0.5,0,0.5],
      [-0.5,0,0.5],
      [-0.5,0,-0.5],
  ];
  curve = new THREE.CatmullRomCurve3(
      points.map((p, ndx) => {
          return (new THREE.Vector3()).set(...p);
      }),
      true,
      'catmullrom',
      0.01
  );
  {
      const points = curve.getPoints(6);
      const geometry = new THREE.BufferGeometry().setFromPoints(points);
      const material = new THREE.LineBasicMaterial({color: 0xff0000});
      curveObject = new THREE.Line(geometry, material);
      scene.add(curveObject);
  };
}

THREE. CatmullRomCurve 3 는 수학 개념의 곡선 으로 나타 나 려 면 n 개의 선 으로 세분 화 되 어야 한다.

curve. getPoints (6) 는 곡선 을 6 단 으로 세분 화한 후의 정점 집합 을 얻 는 것 이다.

BufferGeometry (). setFromPoints (points) 는 정점 으로 모델 링 을 하고 뒤의 선형 소재 와 격자 는 자세히 말 하지 않 습 니 다.

3. 운동 물 체 를 만든다.먼저 간단 한 box 로 자동 차 를 표시 합 니 다.비행기 라면 모형 을 가 져 와 야 합 니 다.먼저 요점 을 말 하 다.

let car;
{
    const geometry =new THREE.BoxBufferGeometry(.1,.1,.2);
    const material = new THREE.MeshBasicMaterial( {color: 0xcccccc} );
    car = new THREE.Mesh( geometry, material );
    scene.add(car);
}

4. 애니메이션 경로 따라 가기

//    
const carPosition = new THREE.Vector3();
//     
const carTarget = new THREE.Vector3();
function render(time) {
    //           
    let distance = time*0.0002;  // convert to seconds
    {
        //         
        const targetOffset = 0.1;
        //          。getPointAt      。
        curve.getPointAt(distance % 1, carPosition);
        //            
        curve.getPointAt((distance + targetOffset) % 1, carTarget);
        //    
        car.position.copy(carPosition);
        //     
        car.lookAt(carTarget);
        //    
        //car.position.lerpVectors(carPosition, carTarget, 0.5);
    }
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
requestAnimationFrame(render);

주: {} 패키지 코드 의 작성 법 은 let const 명령 의 블록 급 역할 영역 과 관련 이 있 습 니 다. 이렇게 하면 변수 가 상층 대상 의 네 임 스페이스 를 오염 시 키 는 것 을 피 할 수 있 습 니 다.
인 스 턴 스 효과 데모:http://www.yxyy.name/funk/도로
인 스 턴 스 원본 파일:https://github.com/buglas/fun... > 경로 따라 가기. html
참조 사이트 주소:https://threejsfundamentals.o...