Javascript Three.js-Object lookAt（）与路径it垂直90度'；他继续旅行

这个想法是要有一个正方形的房间，在这个房间里，一个物体（以及稍微靠后一点的摄像机，以便能够看到物体——即肩上摄像机）从一个角落移动到另一个角落，始终面向墙壁，但平滑地弯曲，这样当物体（和摄像机）从一面墙过渡到另一面墙时不是完全90度垂直，而是从与一面墙90度垂直过渡到与另一面墙90度垂直

我是怎么做的

我的解决方案是从4组坐标（4个角）的数组中创建一个

CatmullRomCurve3

，然后让对象和摄影机沿此曲线设置动画。我已经成功地使用了下面的代码，但我的问题是对象和摄影机都在查看（

lookAt

）它们前面的路径。我喜欢对象和摄影机的角度不断变化以匹配路径的角度，我基本上希望将其偏移90度（我想是吧？），以便它们仍然以相同的方式移动，但看看墙

基本上，我想要的是：

• 对象和摄影机以相同的方式沿路径移动，但会偏移它们的

  旋转

  /

  注视

  ，使它们始终面向墙/角，而不是在前面
• 现在我理解了如何将相机稍微偏移到物体后面，以提供一个肩膀后的透视图，但我想这会随着物体面向墙壁而改变，因为相机需要位于物体后面的另一个轴上，因此对此的解释也会很好

创建曲线的我的代码

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);
}

---

只是一个选项，请使用

.applyAxisAngle（）

方法：

var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（60，window.innerWidth/window.innerHeight，11000）；
摄像机位置设置（0、100、300）；
var renderer=new THREE.WebGLRenderer({
反别名：对
});
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var controls=新的三个.OrbitControls（摄影机、渲染器.doElement）；
controls.target=新的3.Vector3（0,5100）；
控件更新（）；
变量点=[
新的三个矢量3（-80,5,35），
新的三个矢量3（-80,5192.5），
新的3.Vector3（80,5192.5），
新的三，矢量3（80，5，35）
];
var曲线=新的三点曲线3（点）；
curve.closed=真；
var curvePoints=curve.getPoints（200）；
var geomecurvepath=新的三个.BufferGeometry（）.setFromPoints（曲线点）；
var matCurvePath=新的三线基本材质({
颜色：0xff0000
});
var CurvePath=新的三条直线（geomCurvePath、matCurvePath）；
场景。添加（曲线路径）；
var pointerGeom=新的三点共计量法（4,20,4）；
pointerGeom.translate（0,10,0）；
pointerGeom.rotateX（数学PI*0.5）；
var pointer=new THREE.Mesh（pointerGeom，new THREE.MeshNormalMaterial（））；
添加（指针）；
var p1=新的3.Vector3（）；
var p2=新的3.Vector3（）；
var lookAt=new THREE.Vector3（）；
变量轴=新的三个向量3（0,1,0）；
风险值百分比=0；
render（）；
函数render（）{
请求动画帧（渲染）；
百分比+=0.0005；
曲线.getPointAt（百分比%1，p1）；
曲线.getPointAt（（百分比+0.001）%1，p2）；
lookAt.copy（p2）.sub（p1）.applyAxisAngle（axis，-Math.PI*0.5）.add（p1）；//查看距离路径90度的点
指针位置复制（p1）；
指针。注视（注视）；
渲染器。渲染（场景、摄影机）；
}

正文{
溢出：隐藏；
保证金：0；
}

你知道我该如何让相机做同样的事情，但从物体上偏移一点，再向上偏移一点，这样就可以沿着物体的完全相同的路径，以完全相同的方式倾斜，但只是从“墙”上偏移得更远吗或者从实际路径偏移作为另一种解释方式it@JJGerrish将相机作为子对象添加到移动对象。

// 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);
}