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

2023年3月27日 250次阅读

我正在学习Three.js,我正在尝试做我的第一场比赛：无尽的比赛.

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

这是我的想法：
《javascript – ThreeJs中无尽游戏的相机位置》

我想按照文章的想法,但不要复制代码(我想了解它).
这是我到目前为止所做的：

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材料,所以阴影应该在那里,但没有.为什么？

我甚至不明白如何定位物体.
我明白点(0,0,0)是屏幕的中心.
我希望地面在y = 0处,所有其他物体都位于上方,好像它们正在休息一样.
我的代码有效,但我不知道是否有更好的方法来处理对象放置.

我还会通过分配球半径1而不是0.03来简化我的生活,然后让场景“更小”将相机移开作为缩小(我认为这是技巧).

所以,我需要帮助正确设置场景.

这是我在ThreeJs的第一次申请,所以欢迎任何建议！

编辑1

我改变了camera.lookAt(new THREE.Vector3(0,0,0)); to camera.lookAt(new THREE.Vector3(0,0,-5));我添加了spotLight.lookAt(new THREE.Vector3(0,0,-5));.

这是结果：

《javascript – ThreeJs中无尽游戏的相机位置》

不完全是我想要的……

最佳答案 你的平面和球体在y轴上的位置是0.你遇到的问题是当你这么做的时候你会告诉相机直视(0,0,0)

camera.lookAt(0,0,0);

所以你会让球完全居中.你应该做的是告诉相机在球体前面看一点.你必须调整这个值,但这样的事情应该可以解决问题：

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

此外,您的聚光灯指向正前方.当你把它放在(2,30,0)时,它的效果会丢失.您需要将其指向您想要的位置：

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

点赞