SpiritLink

평면 ( 3개의 점 )과 직선 (원점과 방향)의 교차점을 구하는 방법이다.

수학적 개념보다 코드가 더 이해가 빠른거 같다.

Unity 상에서 C#코드를 통해 계산했습니다. (Intersect Triangle)

무한 평면 기준

    private bool IntersectTriangle(Vector3 RayOrigin, Vector3 RayDirection, Vector3 V0, Vector3 V1, Vector3 V2)
   {
      Vector3 edge1 = V1 - V0;
      Vector3 edge2 = V2 - V0;

      Vector3 pvec = Vector3.Cross(RayDirection, edge2);

      dot = Vector3.Dot(edge1, pvec);

      Vector3 tvec;
      if (dot > 0) tvec = RayOrigin - V0;
      else
      {
         tvec = V0 - RayOrigin;
         dot = -dot;
      }

      if (dot < 0.0001f)
         return false;

      u = Vector3.Dot(tvec, pvec);
//    if (u < 0.0f || u > dot)
//       return false;

      Vector3 qvec = Vector3.Cross(tvec, edge1);

      v = Vector3.Dot(RayDirection, qvec);
//    if (v < 0.0f || u + v > dot) return false;

      t = Vector3.Dot(edge2, qvec);
      float flnvDet = 1.0f / dot;

      t *= flnvDet;
      u *= flnvDet;
      v *= flnvDet;

      return true;
   }

코드 자체의 원리는

1. 3개의 점을 통해서 2개의 직선을 구한다.

2. 2개의 직선을 외적해서 법선 벡터를 구한다.

3. 내적을 통해 직선의 방향을 결정한다.

3 - 1 유한 평면의 경우 내적을 통해 u를 계산, 평면의 좌, 우를 넘어갔는지 판단한다.

3 - 2 유한 평면의 경우 내적을 통해 v를 계산, 평면의 위, 아래를 넘어갔는지 판단한다.

if (IntersectTriangle(Line.position, Line.forward, P0.position, P1.position, P2.position))
{
   Vector3 point = Line.position + (Line.forward * t);
   Gizmos.DrawSphere(point, 0.1f);
}

true 일때만 교차점이 생기고 , 교차점은 직선의 원점 + 직선의 방향 * t로 구하면 된다.

유한 평면 기준

IntersectTriangle의 주석처리된 부분을 풀어주면 유한 평면에서만 충돌하는지 검사 가능

using System.Collections;
using System.Collections.Generic;
using System.ComponentModel.Design;
using UnityEditor;
using UnityEngine;

public class PlaneLineCollision : MonoBehaviour
{

   public Transform P0;
   public Transform P1;
   public Transform P2;
   public Transform Line;

   public float dot;
   public float t;
   public float u;
   public float v;

   private void OnDrawGizmos()
   {
      Gizmos.color = Color.cyan;
      Gizmos.DrawLine(P0.position, P1.position);
      Gizmos.DrawLine(P1.position, P2.position);
      Gizmos.DrawLine(P2.position,P0.position);

      Gizmos.color = Color.red;
      Gizmos.DrawSphere(Line.position, 0.05f);

      Gizmos.color = Color.green;
      Gizmos.DrawRay(Line.position, Line.forward * 3);

      Vector3 L1 = P1.position - P0.position;
      Vector3 L2 = P2.position - P0.position;
      Vector3 Cross = Vector3.Cross(L1, L2);


      // 1, 평면의 법선 벡터와 직선의 내적을 검사, 0일경우 Pass
      
      Vector3 startPos = (P0.position + P1.position + P2.position) / 3;

      Gizmos.color = Color.yellow;
      Gizmos.DrawRay(startPos, Cross.normalized * 5);

      dot = Vector3.Dot(Line.forward, Cross.normalized);

      if (IntersectTriangle(Line.position, Line.forward, P0.position, P1.position, P2.position))
      {
         Vector3 point = Line.position + (Line.forward * t);
         Gizmos.DrawSphere(point, 0.1f);
      }

      // 2. 교점의 계산
   }

   private bool IntersectTriangle(Vector3 RayOrigin, Vector3 RayDirection, Vector3 V0, Vector3 V1, Vector3 V2)
   {
      Vector3 edge1 = V1 - V0;
      Vector3 edge2 = V2 - V0;

      Vector3 pvec = Vector3.Cross(RayDirection, edge2);

      dot = Vector3.Dot(edge1, pvec);

      Vector3 tvec;
      if (dot > 0) tvec = RayOrigin - V0;
      else
      {
         tvec = V0 - RayOrigin;
         dot = -dot;
      }

      if (dot < 0.0001f)
         return false;

      u = Vector3.Dot(tvec, pvec);
//    if (u < 0.0f || u > dot)
//       return false;

      Vector3 qvec = Vector3.Cross(tvec, edge1);

      v = Vector3.Dot(RayDirection, qvec);
//    if (v < 0.0f || u + v > dot) 
//       return false;

      t = Vector3.Dot(edge2, qvec);
      float flnvDet = 1.0f / dot;

      t *= flnvDet;
      u *= flnvDet;
      v *= flnvDet;

      return true;
   }
}

Three js 에서 애니메이션 재생시 애니메이션 한개마다 FBX 파일을 로드, 처리하는건 불필요하다고 판단되어

3D Max에서 JD 파일로 모델을 애니메이션 정보와 함께 출력했다.

JD 파일을 이용해서 씬에 출력 및 애니메이션을 재생해보자.

JDLoader.min.js

JDLoader 파일을 먼저 index에 추가, 로드 시킨다. (검색해도 찾을수 있음)

jd파일을 json로드한뒤 parse 하면 다양한 정보들이 담겨서 나오는데 해당 데이터를 담아보자.

static jdModel( data )
{
    let meshes = [];
    let mixers = [];
    let actions = [];

    for( let i = 0; i < data.objects.length; ++i )
    {
        if( data.objects[i].type == "Mesh" || data.objects[i].type == "SkinnedMesh" )
        {
            let mesh = null;
            let matArray = this.createMaterials( data );
            if ( data.objects[i].type == "SkinnedMesh")
            {
                mesh = new THREE.SkinnedMesh( data.objects[i].geometry, matArray );
            }
            else
            {
                mesh = new THREE.Mesh( data.objects[i].geometry, matArray );
            }
            meshes.push( mesh );

            if( mesh && mesh.geometry.animations )
            {
                for(let j = 0, length = mesh.geometry.animations.length; j < length; j++)
                {
                    let mixer = new THREE.AnimationMixer( mesh );
                    mixers.push( mixer );
                    let action = mixer.clipAction( mesh.geometry.animations[j] );
                    action.play();
                    actions.push( action );
                }
            }
        }
        else if ( data.objects[i].type == "Line" )
        {
            let jd_color = data.objects[i].jd_object.color;
            let color1 = new THREE.Color( jd_color[0] / 255, jd_color[1] / 255, jd_color[2] / 255 );
            let material = new THREE.LineBasicMaterial({ color: color1 });  //{ color: new THREE.Color( 0xff0000 ) }
            let line = new THREE.Line( data.objects[i].geometry, material );
            // scene.add( line );

            if( line.geometry.animations )
            {
                for( let j = 0, length = mesh.geometry.animations.length; j < length; j++ )
                {
                    let mixer = new THREE.AnimationMixer( line );
                    mixers.push( mixer );
                    let action = mixer.clipAction( line.geometry.animations[j] );
                    action.play();
                    actions.push( actions );
                }
            }
        }
    }

    let object = {};
    object.meshes = meshes;
    object.mixers = mixers;
    object.actions = actions;
    return object;
}

static createMaterials( data )
{
    let matArray = [];
    for( let i = 0; i < data.materials.length; ++i )
    {
        let mat = new THREE.MeshPhongMaterial({});
        mat.copy( data.materials[i] );
        matArray.push( mat );
    }

    return matArray;
}

Static 함수로 처리했다.

기존의 JDModel 로드 방법에 일부 스크립트가 추가되었는데

반환되는 object내부에

meshes , mixers, actions가 담겨서 나오게 된다.

이 함수를 통해 오브젝트를 받은뒤

meshes에 들어있는 모든 오브젝트를 Scene에 등록해준다.

this.object = new THREE.Group();

let model = StaticMethodCall.jdModel( data );
for(let i = 0, length = model.meshes.length; i < length; i++)
    this.object.add( model.meshes[i] );

Group을 하나 만든뒤 씬에 등록하고 그 자식으로 넣어주는 방법이 편하다.

mixer는 애니메이션을 담당하므로 update함수에서 지속적으로 호출한다.

this.mixers[0].update( delta );

애니메이션을 재생, 정지 하고 싶을때는 Actions를 이용한다.

this.actions[1].stop();
this.actions[0].play();

Vector3 Direction to Quaternion (Rotation)

방향 벡터를 이용해서 쿼터니언 (로테이션) 구하기

this.front.subVectors( this.finalTarget, this.resultPos );
this.front.normalize();

현재 좌표에서 바라볼 대상의 좌표를 뺀다.

정규화 (Normalize) 하면 대상을 바라보는 Look Vector (front)가 생긴다.

this.up.set( 0, 1, 0);

Up vector를 설정한다. (일반적으로 0, 1, 0인 상황)

만약 지구와 같은 구체주변을 맴돈다면

this.up.copy( this.object.position );
this.up.normalize();

자신의 좌표를 이용해서 Up벡터를 구한다. (지구의 중점이 0, 0, 0 이라는 기준으로)

this.right.crossVectors( this.up, this.front );
this.right.normalize();

up벡터와 front벡터를 Cross 시켜서 Right 벡터를 구한다.

this.up.crossVectors( this.front, this.right );
this.up.normalize();

front와 right를 이용해서 다시 Up벡터를 구한다.

일반적으론 이렇게 나온 right, up, front에 적용시키면 로테이션이 적용된다.

이번은 Matrix를 이용해서 Quaternion을 구해보자.

Matrix mBasis = new Matrix(vRight.X, vRight.Y, vRight.Z, 0.0f,
    vUp.X, vUp.Y, vUp.Z, 0.0f,
    vDirection.X, vDirection.Y, vDirection.Z, 0.0f,
    0.0f, 0.0f, 0.0f, 1.0f);

Quaternion qrot = new Quaternion();
qrot.W = (float)Math.Sqrt(1.0f + mBasis.M11 + mBasis.M22 + mBasis.M33) / 2.0f;
double dfWScale = qrot.W * 4.0;
qrot.X = (float)((mBasis.M32 - mBasis.M23) / dfWScale);
qrot.Y = (float)((mBasis.M13 - mBasis.M31) / dfWScale);
qrot.Z = (float)((mBasis.M21 - mBasis.M12) / dfWScale);

이렇게 나온 쿼터니언 (Quaternion)을 이용해서 Rotation을 적용시키면 된다.