Найдите вектор, перпендикулярный двум линиям в файле THREE.js - PullRequest
Новая
       12

Найдите вектор, перпендикулярный двум линиям в файле THREE.js

0 голосов
/ 22 ноября 2018

Я стараюсь нарисовать линию (vd), перпендикулярную двум другим линиям (vb, vc), которая задана тремя координатами, подобными этой: enter image description here

  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.Возможно есть встроенная функция для таких расчетов, но я не могу найти ее в документации

1 Ответ

0 голосов
/ 22 ноября 2018

Вы можете найти его, используя 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>
...