2017-07-25 42 views
1

我有兩個平面,我怎麼能計算它們之間的角度?在飛機的情況下,是否也可以計算兩個Object3D點之間的角度?如何計算兩架飛機之間的角度?

這裏有一個例子小提琴:https://jsfiddle.net/rsu842v8/1/

const scene = new THREE.Scene(); 
 
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000); 
 
    camera.position.set(25, 25, 12); 
 

 
    var material = new THREE.MeshBasicMaterial({ 
 
    color: 0x00fff0, 
 
    side: THREE.DoubleSide 
 
    }); 
 
    window.plane1 = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), material); 
 
    scene.add(plane1); 
 

 
    plane1.position.set(0.3, 1, -2); 
 
    plane1.rotation.set(Math.PI/3, Math.PI/2, 1); 
 

 
    window.plane2 = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), new THREE.MeshBasicMaterial({ 
 
    color: 0x0fff00, 
 
    side: THREE.DoubleSide 
 
    })); 
 
    scene.add(plane2); 
 

 

 
    // setup rest 
 
    var pointLight = new THREE.PointLight(0xFFFFFF); 
 
    pointLight.position.x = 10; 
 
    pointLight.position.y = 50; 
 
    pointLight.position.z = 130; 
 
    scene.add(pointLight) 
 

 
    const renderer = new THREE.WebGLRenderer({ 
 
    antialias: true 
 
    }); 
 
    renderer.setSize(window.innerWidth, window.innerHeight); 
 
    renderer.setClearColor(0x20252f); 
 
    renderer.setPixelRatio(window.devicePixelRatio); 
 
    document.body.appendChild(renderer.domElement); 
 

 
    const controls = new THREE.OrbitControls(camera, renderer.domElement); 
 

 
    animate(); 
 

 
    // TODO: What is the angle between plane1 and plane2? 
 

 
    function animate() { 
 
    requestAnimationFrame(animate); 
 
    render(); 
 
    } 
 

 
    function render() { 
 
    renderer.render(scene, camera); 
 
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r82/three.js"></script> 
 
<script src="https://yume.human-interactive.org/examples/buffer-geometry/OrbitControls.js"></script>

+0

有兩個點之間沒有角度這樣的術語。也許你的意思是別的...... – MBo

回答

6

你想找到兩個three.js平面網格之間的角度。

未旋轉的,一個THREE.PlaneGeometry面向正z軸。所以平面的正常點在正z軸的方向上。

因此,創建一個(0,0,1)向量,並將其應用於平面網格。

注意,當您設置plane.rotationplane.quaternion會自動更新,因此您可以在計算中使用的四元 - 像這樣:

var vec1 = new THREE.Vector3(0, 0, 1); // create once and reuse 
var vec2 = new THREE.Vector3(0, 0, 1); 

vec1.applyQuaternion(plane1.quaternion); 
vec2.applyQuaternion(plane2.quaternion); 

var angle = vec1.angleTo(vec2); // radians 

的問題是一個比較複雜一點,如果飛機是其他孩子旋轉的物體。

當然,您可以使用angleTo()找到任意兩個向量之間的角度。

three.js r.86

+0

太棒了!這個解決方案中唯一的問題就是角度是弧度的(這是我期待的)。所以我用'THREE.Math.radToDeg'轉換它們。 Heres擺弄解決方案:https://jsfiddle.net/rsu842v8/3/ – Patryk

3

我會建議以某種方式計算你呈現每個平面的法向量。一旦你有了這兩個矢量 - 比如說n1n2 - 用點積計算平面之間的角度很容易。

如果你不熟悉的點積,dot(n1,n2)其中n1 = (x1,y1,z1)n2 = (x2,y2,z2)將等於x1*x2 + y1*y2 + z1*z2。還有另一個簡單的標識dot(n1,n2) = |v1||v2|cos(a)其中||表示矢量的大小 - 即|v| = sqrt(x*x + y*y + z*z)如果v = (x,y,z)-和a是法線之間的角度,即法線之間的角度。這是一個鏈接到Mathematics Stack Exchange answer

總之a = arccos(dot(n1,n2)/|n1||n2|)

如果您有興趣瞭解更多關於飛機如何定義以及法線矢量代表的內容,請嘗試查看this

如果您知道n1n2unit vectors那麼該公式進一步簡化爲a = arccos(dot(n1,n2))