时间戳

首页 > 解决方案 > 在 THREE.js 中找到垂直于两条线的向量

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

问题描述

我试图绘制垂直于另外两条线（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 开始时它才会对我有所帮助。也许有用于此类计算的内置函数，但我在文档中找不到

标签： vectorthree.jsgeometry

解决方案

你可以找到它，使用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>

推荐阅读