Question

我正在尝试使用Three.js创建一个WebVR环境。我从Cinema4D导出了一些场景，然后将它们加载到了Three.js的Colladaloader中。现在我想在我的Google Cardboard中尝试这个环境，但我当然需要为我的双眼分屏。

我使用npm模块three-stereo-effect来实现VR效果，但在纸板中使用它时会重叠。我查了一下，看到很多WebVR示例都为每只眼睛都有一个圆角矩形（example of what I mean），而不是一个直的矩形，我想我需要找到矩阵来解决这个问题（当看{的例子时） {3}}）。但后来我下载了一个VR隧道赛车游戏，看到他们使用直线矩形，视野很好。

现在我认为我的立体声效果的眼睛分离是不正确的，我看到有人在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 "Scalable Multi-view Stereo Camera Array for Real World Real-Time Image Capture and Three-Dimensional Displays"：

2.1.1双眼视障

双眼视差是空间中给定点的两个视网膜投影之间的位置差异。这种位置差异是由于两只眼睛横向分开并因此从两个稍微不同的有利位置看世界的事实。对于普通人来说，平均横向间隔也称为眼间距为65mm。大多数人的眼睛间距在平均双眼的±10mm范围内。

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

使用WebVR进行眼睛分离

1 个答案: