Three.js 通过直线放置一个垂直于平面的平面

Question

我在 3D 空间中有一条直线和一个平面。我想将平面的宽度和长度线垂直放置。请参阅我的jsFiddle。

我是 Three.js 和向量计算的新手。

1. 当前 2. 期望结果

请给我建议。（为我糟糕的英语道歉）

JS代码：

let renderer;
let camera;
let controls;

let scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(54, window.innerWidth / window.innerHeight, 0.1, 1000);

renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(new THREE.Color(0xfefefe));
document.body.appendChild(renderer.domElement);

camera.position.set(5, 2, 7.5);


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


let gridHelper = new THREE.GridHelper(4, 4);
scene.add(gridHelper);

//line is defined by p0-p1
var p0 = new THREE.Vector3(-2, 2, 1);
var p1 = new THREE.Vector3(2, -1, -1);

var material2 = new THREE.LineBasicMaterial({
    color: 0x0000ff
});

//draw the line for visual reference
var geometry = new THREE.Geometry();
geometry.vertices.push(p0, p1);
var line = new THREE.Line(geometry, material2);
scene.add(line);

// Plane
var planeGeom = new THREE.PlaneGeometry(3, 3, 3);
var plane = new THREE.Mesh(planeGeom, new THREE.MeshBasicMaterial({
    color: "pink",
    transparent: true,
    opacity: 0.5,
    side: THREE.DoubleSide
}));

//done!

scene.add(plane);



let animate = function () {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
};

animate();

Answer 1

所以你想要这个？？

只需将此代码添加到您的小提琴之前scene.add(plane);

plane.position.x = (p1.x + p0.x) / 2;
plane.position.y = (p1.y + p0.y) / 2;
plane.position.z = (p1.z + p0.z) / 2 ;
plane.lookAt(p0);

p0然后，无论您为和创建什么向量p1，平面将始终垂直于它们并位于线长度的中间。

这是我用示例创建的小提琴

如果此答案解决了您的问题，请将其标记为已接受答案，这样也可以帮助其他有相同问题的用户知道它是正确的。