时间戳

首页 > 解决方案 > 如何在three.js中建立一个垂直？

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

问题描述

我需要在一条直线的中点建立一条垂直线（与原线成 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

谢谢！

标签： three.js

解决方案

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

在代码片段中，线本身是蓝色（浅绿色），其正常是红色。

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>

推荐阅读