如何在three.js中建立一个垂直？

Posted 2023-02-27

【中文标题】如何在three.js中建立一个垂直？

【英文标题】：How to build a perpendicular in three.js?

【发布时间】：2020-01-08 17:36:10

【问题描述】：

我需要在一条直线的中点上建立一条垂直线（与原线成 90 度角的线）。

line = new THREE.Line( geometry, material );

geometry.vertices.push(   
  new THREE.Vector3( 100, 200, 0 ),  
  new THREE.Vector3( 300, 500, 0 )  );

在手册中我没有找到有关它的信息。 https://threejs.org/docs/#api/en/objects/Line

谢谢！

【问题讨论】：

请分别阅读How do I ask a good question?Non-English Question Policy

最好在这里问：ru.***.com/questions/tagged/three.js

【参考方案1】：

你可以通过从它的终点减去它的起点来找到一条线的法线（这样你就可以得到它的方向），然后将结果向量旋转 90 度（Math.PI * 0.5），然后对其进行归一化，就是这样，你已经正常了。

在代码sn-p中，线本身是蓝色的（aqua），它的正常是红色的。

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

var grid = new THREE.GridHelper(10, 10);
grid.rotation.x = -Math.PI * 0.5;
scene.add(grid);

var lineVertices = [
  new THREE.Vector3(1, 2),
  new THREE.Vector3(3, 5)
];

var lineGeom = new THREE.BufferGeometry().setFromPoints(lineVertices);
var lineMat = new THREE.LineBasicMaterial(color: 0x00ffff);
var line = new THREE.Line(lineGeom, lineMat);
scene.add(line);

var midPoint = new THREE.Vector3()
  .subVectors(lineVertices[1], lineVertices[0])
  .multiplyScalar(0.5)
  .add(lineVertices[0]);
  
var normal = new THREE.Vector3()
  .subVectors(lineVertices[1], lineVertices[0])
  .applyAxisAngle(new THREE.Vector3(0, 0, 1), Math.PI * 0.5)
  .normalize();
  
  
var normalVertices = [
  normal.clone().setLength(2).add(midPoint),
  normal.clone().negate().setLength(2).add(midPoint)
];

var normalGeom = new THREE.BufferGeometry().setFromPoints(normalVertices);
var normalMat = new THREE.LineBasicMaterial(color: 0xff0000 );
var normal = new THREE.Line(normalGeom, normalMat);
scene.add(normal);

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

body 
  overflow:hidden;
  margin: 0;

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