javascript - ThreeJs 中无尽游戏的相机位置

Question

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

我已阅读 this article目的是做一些非常相似的事情。 主人公(主人公)是一个向着“无限”滚动的蓝色球体，必须避开一些逐渐出现在他面前的障碍物。用户可以通过向左或向右引导球并跳跃来避开这些障碍(想法是使用键盘，特别是左/右箭头键和空格键来跳跃)。

这是我的想法:

我想按照文章的思路走，不想抄代码(想看懂)。 这是我到目前为止所做的:

let sceneWidth = window.innerWidth;
let sceneHeight = window.innerHeight;
let canvas;
let camera;
let scene;
let renderer;
let dom;
let sun;
let hero;
let ground;
let clock;
let spotLight;
let ambientLight;

init();

function init() {
  createScene();
  showHelpers();
  update();
}

/**
 * Set up scene.
 */
function createScene() {
  clock = new THREE.Clock();
  clock.start();
  scene = new THREE.Scene();
  window.scene = scene;

  camera = new THREE.PerspectiveCamera(60, sceneWidth / sceneHeight, 0.1, 1000);
  camera.position.set(0, 0, 0);

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setClearColor(0x333f47, 1);
  renderer.shadowMap.enabled = true;
  renderer.shadowMapSoft = true;
  renderer.setSize(sceneWidth, sceneHeight);

  canvas = renderer.domElement;
  document.body.appendChild(canvas);

  // const orbitControls = new THREE.OrbitControls(camera, canvas);

  addGround();
  addHero();
  addLight();

  camera.position.set(0, -1, 0.6);
  camera.lookAt(new THREE.Vector3(0, 0, 0));

  window.addEventListener("resize", onWindowResize, false);
}

/**
 * Show helper.
 */
function showHelpers() {
  const axesHelper = new THREE.AxesHelper(5);
  // scene.add(axesHelper);

  const spotLightHelper = new THREE.SpotLightHelper(spotLight);
  scene.add(spotLightHelper);
}

/**
 * Add ground to scene.
 */
function addGround() {
  const geometry = new THREE.PlaneGeometry(1, 4);
  const material = new THREE.MeshLambertMaterial({
    color: 0xcccccc,
    side: THREE.DoubleSide
  });
  ground = new THREE.Mesh(geometry, material);
  ground.position.set(0, 1, 0);
  ground.receiveShadow = true;
  scene.add(ground);
}

/**
 * Add hero to scene.
 */
function addHero() {
  var geometry = new THREE.SphereGeometry(0.03, 32, 32);
  var material = new THREE.MeshLambertMaterial({
    color: 0x3875d8,
    side: THREE.DoubleSide
  });
  hero = new THREE.Mesh(geometry, material);
  hero.receiveShadow = true;
  hero.castShadow = true;
  scene.add(hero);
  hero.position.set(0, -0.62, 0.03);
}

/**
 * Add light to scene.
 */
function addLight() {
  // spot light
  spotLight = new THREE.SpotLight(0xffffff);
  spotLight.position.set(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;
  scene.add(spotLight);

  // ambient light
  ambientLight = new THREE.AmbientLight(0x303030, 2);
  scene.add(ambientLight);
}

/**
 * Call game loop.
 */
function update() {
  render();
  requestAnimationFrame(update);
}

/**
 * Render the scene.
 */
function render() {
  renderer.render(scene, camera);
}

/**
 * On window resize, render again the scene.
 */
function onWindowResize() {
  sceneHeight = window.innerHeight;
  sceneWidth = window.innerWidth;
  renderer.setSize(sceneWidth, sceneHeight);
  camera.aspect = sceneWidth / sceneHeight;
  camera.updateProjectionMatrix();
}

/**
 * Degree to radiants
 */
function degToRad(degree) {
  return degree * (Math.PI / 180);
}

<script src="https://threejs.org/build/three.min.js"></script>

( JSFiddle )

我有几个问题，第一个是物体和相机的位置。

我希望能够定位平面，使次边位于屏幕的开头(因此整个平面必须可见，不能有隐藏部分)。

我希望球水平放置在中间，垂直放置在地板的几乎开始处(简而言之，如图所示)，并且阴影转换到平面上。每个对象都必须将阴影转换到平面上。 我正在使用聚光灯和 Lambert Material ，所以阴影应该在那里，但没有。为什么？

我什至不知道如何定位对象。 我了解到点 (0, 0, 0) 是屏幕的中心。 我希望地面位于 y=0 并且所有其他对象都位于上方，就好像它们在休息一样。 我的代码有效，但我不知道是否有更好的方法来处理对象放置。

我还会通过分配球体半径 1 而不是 0.03 来简化我的生活，然后使场景“更小”将相机移开作为缩小(我认为这就是诀窍)。

所以，我需要帮助正确设置场景。

这是我在 ThreeJs 中的第一个应用程序，所以欢迎任何建议!

---

编辑 1

我将 camera.lookAt(new THREE.Vector3(0, 0, 0)); 更改为 camera.lookAt(new THREE.Vector3(0, 0, -5)) ; 并且我添加了 spotLight.lookAt(new THREE.Vector3(0, 0, -5));。

这是结果:

不是我想要的...

Answer 1

您将平面和球体放置在 y 轴上的 0 处是正确的。您遇到的问题是，当您这样做时，您是在告诉相机直视 (0, 0, 0)

camera.lookAt(0, 0, 0);

这样你就能让球完美居中。你应该做的是告诉相机看球体的前面一点。您必须调整该值，但像这样应该可以解决问题:

camera.lookAt(0, 0, -5);

此外，您的聚光灯直指前方。当您将它放置在 (2, 30, 0) 时，它的效果会消失。您需要将它指向您想要的位置:

spotLight.lookAt(0, 0, -5);