用WebVR进行眼分离

Question

我正在尝试使用WebVR创建一个Three.js环境。我从Cinema4D导出了一些场景，并将它们装入Three.js的Colladaloader中。现在我想在我的Google中尝试这个环境，但是我需要为我的双眼设置一个分割的屏幕。

我使用npm模块三立体声效果来实现虚拟现实效果，但是在纸板中使用它是重叠的。我查了一下，发现很多WebVR示例的每个眼睛都有一个圆形的矩形(我指的例子)，而不是一个直线的矩形，我想我需要找到矩阵来修复这个问题(在看这个储存库的例子时)。但后来我下载了一个虚拟现实隧道赛车游戏，并看到他们使用的是直矩形和视觉很好。

现在我认为我的立体声效果的eyeSeparation是不正确的，我看到有人在StereoEffect模块上使用属性eyeSeparation并尝试了，但我认为我不应该只是猜测一个值.

我在这找到解决办法了吗？还是我看错了方向，为什么我的3D场景在使用卡板时没有给出好的视觉效果？

这是我正在试验的代码。

import {sets} from './data/';

import * as THREE from 'three';
import threeOrbitControls from 'three-orbit-controls';
import ColladaLoader from 'three-collada-loader';
import threeStereoEffect from 'three-stereo-effect';

import {BufferLoader} from './modules/sound';
import {SpawnObject} from './modules/render';

const OrbitControls = threeOrbitControls(THREE);
const StereoEffect = threeStereoEffect(THREE);

let scene, camera, renderer;
let audioCtx, bufferLoader;

const notes = [];
let stereoEffect = null;

const init = () => {
  window.AudioContext = window.AudioContext || window.webkitAudioContext;

  audioCtx = new AudioContext();
  bufferLoader = new BufferLoader(audioCtx);

  bufferLoader.load(sets.drums)
    .then(data => spawnObject(data));


  initEnvironment();

};

const spawnObject = data => {

  for (let i = 0;i < 5;i ++) {
    const bol = new SpawnObject(`object.dae`, audioCtx, data[0], scene, false);
    notes.push(bol);
  }

  // console.log(notes);
};

const initEnvironment = () => {

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(
    45, window.innerWidth / window.innerHeight,
    1, 10000
  );

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);

  stereoEffect = new StereoEffect(renderer);
  // stereoEffect.eyeSeparation = 1;
  stereoEffect.setSize(window.innerWidth, window.innerHeight);

  console.log(stereoEffect);

  document.querySelector(`main`).appendChild(renderer.domElement);

  camera.position.set(0, 0, 2);
  camera.lookAt(scene.position);

  new OrbitControls(camera);

  //LIGHTS
  const light = new THREE.PointLight(0xFFFFFF);
  light.position.set(0, 0, 9);
  light.castShadow = true;
  light.shadow.mapSize.width = 1024;
  light.shadow.mapSize.height = 1024;
  light.shadow.camera.near = 10;
  light.shadow.camera.far = 100;
  scene.add(light);

  // const hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6);
  // hemiLight.color.setHSL(0.6, 1, 0.6);
  // hemiLight.groundColor.setHSL(0.095, 1, 0.75);
  // hemiLight.position.set(0, 500, 0);
  // scene.add(hemiLight);
  //
  // const dirLight = new THREE.DirectionalLight(0xffffff, 1);
  // dirLight.color.setHSL(0.1, 1, 0.95);
  // dirLight.position.set(- 1, 1.75, 1);
  // dirLight.position.multiplyScalar(50);
  // scene.add(dirLight);
  // dirLight.castShadow = true;


  //FLOOR
  const matFloor = new THREE.MeshPhongMaterial();
  const geoFloor = new THREE.BoxGeometry(2000, 1, 2000);
  const mshFloor = new THREE.Mesh(geoFloor, matFloor);

  matFloor.color.set(0x212E39);
  mshFloor.receiveShadow = true;
  mshFloor.position.set(0, - 1, 0);

  scene.add(mshFloor);


  //ENVIRONMENT
  const loader = new ColladaLoader();

  loader.load(`../assets/environment.dae`, collada => {
    collada.scene.traverse(child => {
      child.castShadow = true;
      child.receiveShadow = true;
    });

    scene.add(collada.scene);
    render();
  });
};

const render = () => {

  // stereoEffect.render(scene, camera);
  // effect.render(scene, camera);

  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;

  renderer.gammaInput = true;
  renderer.gammaOutput = true;

  renderer.setClearColor(0xdddddd, 1);
  stereoEffect.render(scene, camera);

  requestAnimationFrame(render);
};



init();

Answer 1

来自PDF 可扩展的多视角立体相机阵列，用于实时图像采集和三维显示

2.1.1双目差距 双目视差是某一空间点的两个视网膜投影之间的位置差异。这种位置上的差异是因为这两只眼睛是横向分开的，因此从两个稍微不同的有利点看世界。对一般人来说，平均侧距(也称为眼间分离)是65毫米。大多数人群在平均眼间距离±10毫米范围内有眼间隔。

看起来，通过对不同脸型的朋友进行一些测试，你会发现设备和使用它的人的eyeSeparation值是一个快乐的平均值。然后，我也会提供一些设置面板，允许用户选择一些不同的eyeSeparation设置，如果他们发现差异或重叠的立体声体验。通常情况下，我认为这是通过一个连接到同一个系统的键盘来实现的，但是你是在硬纸板上，所以用户可能需要反复尝试才能得到正确的结果。