2017-07-25 125 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))

相关问题