javascript - Three.js - 对象 viewAt() 与其行进路径垂直 90 度

Question

这个想法是有一个方形房间，其中一个物体(以及相机稍微靠后以便能够查看该物体 - 即肩上相机)从一个 Angular 落移动到另一个 Angular 落，始终面向墙壁但平滑地弯曲成圆形，因此当从一堵墙过渡到另一堵墙时，对象(和相机)并不是完全垂直 90 度，而是从与一堵墙垂直的 90 度过渡到与另一堵墙垂直的 90 度。

我是如何做到的

我的解决方案是根据 4 组坐标(4 个 Angular )的数组创建一个 CatmullRomCurve3，然后让对象和相机沿着该曲线进行动画处理。我已经使用下面的代码成功地工作了，但我的问题是对象和相机都在看着(lookAt)它们前面的路径。我喜欢物体和相机的 Angular 不断变化以匹配路径的 Angular ，我基本上想将其偏移 90 度(我认为？)，以便它们仍然以相同的方式移动，但是 看看墙。

基本上，我想要什么:

• 对象和相机以相同的方式沿路径移动，但偏移其旋转/lookAt，以便它们始终面向墙壁/Angular 落，而不是在前方他们。
• 现在我了解如何将相机稍微偏移到物体后面以提供过肩视角，但我想这会随着面向墙壁的物体而改变，因为相机需要位于不同轴上的物体后面，所以对此的解释也很好。

我的用于创建曲线的代码

var curve;
function createCurvePath() {

//Array of points
var points = [
    [-80, 5, 35],
    [-80, 5, 192.5],
    [80, 5, 192.5],
    [80, 5, 35]
];

//Convert the array of points into vertices
for (var i = 0; i < points.length; i++) {
    var x = points[i][0];
    var y = points[i][1];
    var z = points[i][2];
    points[i] = new THREE.Vector3(x, y, z);
}


//Create a closed curve
curve = new THREE.CatmullRomCurve3(points);

curve.closed = true;

var points = curve.getPoints( 200 );
var geomCurvePath = new THREE.BufferGeometry().setFromPoints( points );

var matCurvePath = new THREE.LineBasicMaterial( { color : 0xff0000 } );

// Create the final object to add to the scene
var CurvePath = new THREE.Line( geomCurvePath, matCurvePath );



scene.add(CurvePath);
}

动画代码(渲染循环)

// loop that runs every frame to render scene and camera
function render(){
requestAnimationFrame(render);

// Move camera along path
percentage += 0.0005;
var p1 = curve.getPointAt(percentage % 1);
var p2 = curve.getPointAt((percentage + 0.01) % 1);
camera.position.set(p1.x, p1.y, p1.z);
object.position.set(p1.x, p1.y, p1.z);
camera.lookAt(p2);
object.lookAt(p2);

renderer.render(scene, camera);
}

Answer 1

只是一个选项，使用 .applyAxisAngle() 方法:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 100, 300);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target = new THREE.Vector3(0, 5, 100);
controls.update();

var points = [
  new THREE.Vector3(-80, 5, 35),
  new THREE.Vector3(-80, 5, 192.5),
  new THREE.Vector3(80, 5, 192.5),
  new THREE.Vector3(80, 5, 35)
];

var curve = new THREE.CatmullRomCurve3(points);
curve.closed = true;

var curvePoints = curve.getPoints(200);
var geomCurvePath = new THREE.BufferGeometry().setFromPoints(curvePoints);
var matCurvePath = new THREE.LineBasicMaterial({
  color: 0xff0000
});
var CurvePath = new THREE.Line(geomCurvePath, matCurvePath);
scene.add(CurvePath);

var pointerGeom = new THREE.ConeGeometry(4, 20, 4);
pointerGeom.translate(0, 10, 0);
pointerGeom.rotateX(Math.PI * 0.5);
var pointer = new THREE.Mesh(pointerGeom, new THREE.MeshNormalMaterial());
scene.add(pointer);

var p1 = new THREE.Vector3();
var p2 = new THREE.Vector3();
var lookAt = new THREE.Vector3();
var axis = new THREE.Vector3(0, 1, 0);
var percentage = 0;

render();

function render() {
  requestAnimationFrame(render);
  percentage += 0.0005;
  curve.getPointAt(percentage % 1, p1);
  curve.getPointAt((percentage + 0.001) % 1, p2);
  lookAt.copy(p2).sub(p1).applyAxisAngle(axis, -Math.PI * 0.5).add(p1); // look at the point 90 deg from the path
  pointer.position.copy(p1);
  pointer.lookAt(lookAt);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>