나는 공간에서 주어진 사각형 (face4)을 사용하고 있습니다. face4는 공간에서 어떤 각도/위치에있을 수 있습니다.Three.js 정렬 및 회전
나는 중심에 원환 체를 만들고 있습니다.
내가 다음 기준에 내 원환 체를 정렬하기 위해 노력하고있어 : 비행기가 수평으로 원환 체를 양분
1) (반 원은 평면의 양쪽)
2에 나타나도록) 원환 체가 평면에 수직입니다. 3) 원환 체가 직사각형면의 두 ("더 짧은") 변의 중간 점에 정렬되어 원환 체가 직사각형의 "더 긴"변을 등분 할 수 있도록합니다. face4.
예를 들어, 다음과 같이 보일 것이다 : 나는이 두 가지 축 회전을 수행해야합니다 같은 느낌
합니다. 하나는 얼굴에 맞추고, 다른 하나는 얼굴을 수직으로 만듭니다.
는 지금, 난 그냥 첫 번째 부분 (수직 걱정되지는 face4에 정렬)을 시도하고있어, 나는이 일을 해요 :
벡터의 두 세트의 두 개의 중간 점을 계산1) 얼굴에서
2) 내 축을 얻기 위해 다른 중간 점에서 하나의 중간 점을 빼서 토러스 축 종료를 결정합니다.
3) # 2의 외적 및와 Math.cos (endAxis와 회전 각도를 찾기 시작 원환
4)의 (0,1,0) 축선을 수행하여 회전축 찾기. 내가) 사진을 볼 희망로 점 (rotationAxis))
5)
불행히도 번역 회전 토러스
6),이 두 점을 "정렬"아니에요.
나는 (내가 새로운 것을 시도 할 때마다 theta를 반전하는 등) 다른 접근법을 시도하고 있지만, 예상 한대로 행동하지는 않습니다. 내 접근 방식이나 생각에 문제가 있습니까?
내가 사용하는 코드는 다음과 같습니다. (나는 의도적으로 내 사고에 도움이되는 많은 의견을 담은 긴 형태로 보관했다.)
this.createTorus = function (tubeMeshParams) {
var torusRadius = 5;
var torus = new THREE.TorusGeometry(torusRadius, 1.5, segments/10, 50);
fIndex = this.calculateFaceIndex();
//Determine midpoint of line AB on Face
var v1 = geometry.vertices[geometry.faces[fIndex].a];
var v2 = geometry.vertices[geometry.faces[fIndex].b];
var xMidAB = (v1.x + v2.x)/2;
var yMidAB = (v1.y + v2.y)/2;
var zMidAB = (v1.z + v2.z)/2;
var midpointAB = new THREE.Vector3(xMidAB, yMidAB, zMidAB);
//Determine midpoint of line CD on Face
var v3 = geometry.vertices[geometry.faces[fIndex].c];
var v4 = geometry.vertices[geometry.faces[fIndex].d];
var xMidCD = (v3.x + v4.x)/2;
var yMidCD = (v3.y + v4.y)/2;
var zMidCD = (v3.z + v4.z)/2;
var midpointCD = new THREE.Vector3(xMidCD, yMidCD, zMidCD);
//Determine Ending Torus axis
var endTorusAxis = new THREE.Vector3();
endTorusAxis.subVectors(midpointCD, midpointAB);
endTorusAxis.normalize();
//Direction vector of Torus (Y = 1)
var torusAxis = new THREE.Vector3(0, 1, 0);
//Find the axis of rotation through Cross Product
var rotationAxis = new THREE.Vector3();
rotationAxis.crossVectors(endTorusAxis, torusAxis);
if (rotationAxis.length() == 0) // Acounting for special case where the axis are aligned
{
rotationAxis.set(1, 0, 0);
}
rotationAxis.normalize();
//Now that we have the needed data, determine angle of rotation
var theta = Math.acos(endTorusAxis.dot(rotationAxis));
theta = -theta;
//Don't use position, rotate, scale
torus.matrixAutoUpdate = false;
//Rotate it
torus.applyMatrix(new THREE.Matrix4().makeRotationAxis(rotationAxis, theta));
// Create mesh and scale
torusLoop = new THREE.Mesh(torus, this.m);
torusLoop.scale.x = torusLoop.scale.y = torusLoop.scale.z = tubeMeshParams['Scale'];
//Determine Face centroid positions
var cenPosX = geometry.faces[fIndex].centroid.x;
var cenPosY = geometry.faces[fIndex].centroid.y;
var cenPosZ = geometry.faces[fIndex].centroid.z;
//Move the rotated torus around the centroid
torusLoop.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(cenPosX, cenPosY, cenPosZ));
torusLoop.geometry.computeCentroids();
torusLoop.geometry.computeFaceNormals();
torusLoop.geometry.computeVertexNormals();
return torusLoop;
}