在THREE.js中找到垂直于两条线的向量

Question

我试图绘制垂直于另外两条线（vb，vc）的线（vd），该线由三个坐标给出，如下所示：

  var va = new THREE.Vector3(50,2,-60)
  var vb = new THREE.Vector3(40,40,2)
  var vc = new THREE.Vector3(30,2,-20)
  var vd = new THREE.Vector3(0,5,-70) //vector I search, coordinates for visual example

var lineGeom1 = new THREE.Geometry();
lineGeom1.vertices.push(  va,vb )
var line1  = new THREE.Line(lineGeom1, new THREE.LineBasicMaterial( { color: 0xff0000 } ));

var lineGeom2 = new THREE.Geometry();
lineGeom2.vertices.push(  va,vc )
var line2  = new THREE.Line(lineGeom2, new THREE.LineBasicMaterial( { color: 0x0040ff } ));

var lineGeom3 = new THREE.Geometry();
lineGeom3.vertices.push(  va,vd )
var line3  = new THREE.Line(lineGeom3, new THREE.LineBasicMaterial( { color: 0x1bff00 } ));


scene.add( line1,line2,line3 );

我了解crossVectors函数，但是我认为仅当行从0,0,0开始时，它对我才有帮助。 也许有一个内置函数可以进行这种计算，但是我在文档中找不到

Answer 1

您可以使用THREE.Triangle()找到它。

三角形法线的计算按逆时针顺序进行。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.setScalar(100);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var contols = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.GridHelper(200, 10));

var va = new THREE.Vector3(50, 2, -60)
var vb = new THREE.Vector3(40, 40, 2)
var vc = new THREE.Vector3(30, 2, -20)
var vd = new THREE.Vector3() //vector I search, coordinates for visual example

var lineGeom1 = new THREE.Geometry();
lineGeom1.vertices.push(va, vb)
var line1 = new THREE.Line(lineGeom1, new THREE.LineBasicMaterial({
  color: 0xff0000
}));

var lineGeom2 = new THREE.Geometry();
lineGeom2.vertices.push(va, vc)
var line2 = new THREE.Line(lineGeom2, new THREE.LineBasicMaterial({
  color: 0x0040ff
}));

var triangle = new THREE.Triangle(va, vb, vc);
triangle.getNormal(vd);

var lineGeom3 = new THREE.Geometry();
lineGeom3.vertices.push(va, vd.multiplyScalar(25).add(va));
var line3 = new THREE.Line(lineGeom3, new THREE.LineBasicMaterial({
  color: 0x1bff00
}));


scene.add(line1, line2, line3);


renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>