Javascript 三人制无休止游戏的摄像机位置

我正在学习Three.js，我正在尝试做我的第一个游戏：和无尽的游戏

我读过，目的是做一些非常相似的事情。 主角（英雄）是一个蓝色的球，它朝着“无限”方向滚动，并且必须避开一些逐渐出现在他面前的障碍。用户可以通过向左或向右引导球并跳跃来避免这些障碍物（想法是使用键盘，尤其是左/右箭头键和空格键跳跃）

以下是我的想法：

我想遵循文章的思路，但不是复制代码（我想理解它）。 这就是我到目前为止所做的：

let sceneWidth=window.innerWidth；
设场景高度=window.innerHeight；
让画布；
让相机；
让现场；
让渲染器；
让dom；
让太阳；
让英雄；
让地面；
让时钟；
让聚光灯；
让氛围明亮；
init（）；
函数init（）{
createScene（）；
showHelpers（）；
更新（）；
}
/**
*设置场景。
*/
函数createScene（）{
时钟=新的三个时钟（）；
clock.start（）；
场景=新的三个。场景（）；
window.scene=场景；
摄像机=新的三个透视摄像机（60，场景宽度/场景高度，0.11000）；
摄像机位置设置（0,0,0）；
renderer=new THREE.WebGLRenderer（{antialas:true}）；
setClearColor（0x333f47，1）；
renderer.shadowMap.enabled=true；
renderer.shadowMapSoft=true；
设置大小（场景宽度、场景高度）；
canvas=renderer.domElement；
document.body.appendChild（画布）；
//const orbitControls=新的三个。orbitControls（摄影机、画布）；
addGround（）；
addHero（）；
addLight（）；
摄像机位置设置（0，-1,0.6）；
摄影机。注视（新的三个向量3（0，0，0））；
addEventListener（“resize”，onWindowResize，false）；
}
/**
*显示助手。
*/
函数showHelpers（）{
const axesHelper=新的三个axesHelper（5）；
//场景。添加（AxeHelper）；
const spotLightHelper=新的三个spotLightHelper（聚光灯）；
添加（spotLightHelper）；
}
/**
*将地面添加到场景中。
*/
函数addGround（）{
常数几何=新的三个平面几何（1,4）；
const material=新的三点材质({
颜色：0xCCCC，
侧面：三个。双面
});
地面=新的三个网格（几何体、材质）；
地面位置设置（0,1,0）；
ground.receiveShadow=true；
场景。添加（地面）；
}
/**
*将英雄添加到场景中。
*/
函数addHero（）{
var几何=新的三种。球墨法（0.03,32,32）；
var material=新的3.0网格LambertMaterial({
颜色：0x3875d8，
侧面：三个。双面
});
hero=新的三个网格（几何体、材质）；
hero.receiveShadow=true；
hero.castShadow=true；
场景。添加（英雄）；
英雄位置设定（0，-0.62,0.03）；
}
/**
*向场景添加灯光。
*/
函数addLight（）{
//聚光灯
聚光灯=新的三个聚光灯（0xffffff）；
聚光灯位置设置（2,30,0）；
spotLight.angle=degToRad（10）；
spotLight.castShadow=true；
spotLight.shadow.mapSize.width=1024；
spotLight.shadow.mapSize.height=1024；
spotLight.shadow.camera.near=1；
spotLight.shadow.camera.far=4000；
spotLight.shadow.camera.fov=45；
场景。添加（聚光灯）；
//环境光
环境光=新的三个环境光（0x303030,2）；
场景。添加（环境光）；
}
/**
*调用游戏循环。
*/
函数更新（）{
render（）；
requestAnimationFrame（更新）；
}
/**
*渲染场景。
*/
函数render（）{
渲染器。渲染（场景、摄影机）；
}
/**
*在“调整窗口大小”上，再次渲染场景。
*/
函数onWindowResize（）{
场景高度=窗内高度；
sceneWidth=window.innerWidth；
设置大小（场景宽度、场景高度）；
camera.aspect=场景宽度/场景高度；
camera.updateProjectMatrix（）；
}
/**
*辐射度
*/
函数degToRad（度）{
返回度*（数学PI/180）；
}

---

将平面和球体放置在y轴的0处是正确的。你遇到的问题是，当你这样做时，你告诉相机要直视（0，0，0）

camera.lookAt（0,0,0）

这样你就可以把球完全放在中间了。你应该做的是告诉相机看球的前面一点。您必须调整该值，但类似这样的操作应该可以做到：

camera.lookAt（0,0，-5）

此外，聚光灯正指向前方。当您将其置于（2，30，0）时，其效果将丢失。您需要将其指向您想要的位置：

聚光灯注视（0,0，-5）
谢谢您的回复。我按照你的建议修改了代码，结果并不是我所希望的。我在主消息中添加了一个图像。是的，我不知道你在JSFIDLE中做什么。。。你的物体定位在整个地图上，你的相机现在正仰望着飞机的底部。我建议您花点时间玩three.js编辑器，真正熟悉x、y、z轴：尝试通过添加平面、球体和障碍物来重建场景，并尽量记住：+x在右边，+y在上面，+z朝向观众。注意：
摄影机。注视（x、y、z）
是有效的，而且它不会导致实例化一个新的
向量3
@WestLangley哇，你说得对！固定的。我在他的代码中看到了，然后把它复制到我的答案中。