三个 JS：使用具有 Oculus Rift 效果的 Sprite答案

【问题标题】：ThreeJS: Using a Sprite with the OculusRiftEffect三个 JS：使用具有 Oculus Rift 效果的 Sprite
【发布时间】：2014-05-22 21:48:53
【问题描述】：

我正在使用来自https://github.com/mrdoob/three.js/blob/master/examples/js/effects/OculusRiftEffect.js 的 OculusRiftEffect 为 OculusRift 进行开发，并且正在使用 Sprites。问题是精灵没有出现在每只眼睛的正确位置，如屏幕截图所示。你可以看到房子精灵在每只眼睛的不同位置，并在眼部产生“双重视觉”效果。在玩代码时（有一个演示 plunker here），您会注意到靠近屏幕边缘的定位更准确，但我需要它靠近屏幕中心位置关闭的位置。我认为这与 OculusRiftEffect 中的着色/渲染有关，但对它的了解不够，无法将其分解，任何方向都将不胜感激，谢谢！

示例代码：

var _scene, _camera, _renderer, _effect, _sprite;

function init() {
  _scene = new THREE.Scene();
  _camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, .1, 100000);
  _camera.lookAt(new THREE.Vector3());
  _renderer = new THREE.WebGLRenderer({
        antialias: true,
      canvas: document.getElementById('legit')
    });

  _renderer.setSize(window.innerWidth, window.innerHeight);

  _effect = new THREE.OculusRiftEffect(_renderer, {
    worldScale: 1000
  });
  _effect.setSize(window.innerWidth, window.innerHeight);

  THREE.ImageUtils.crossOrigin = 'anonymous';

  _sprite = new THREE.Sprite(
    new THREE.SpriteMaterial({
        map: new THREE.Texture(document.getElementById('icon')),
        color: 0xff0000
    })
  );

  _sprite.scale.set(200, 200, 1);
  _sprite.position.set(500, 800, 1);
  _scene.add(_sprite);

  _scene.add(new THREE.Mesh(
    new THREE.SphereGeometry(3000, 64, 32),
    new THREE.MeshBasicMaterial({
      color: 0xffffff,
      wireframe: true,
      side: THREE.DoubleSide
    })
  ));

  animate();
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
    _renderer.render(_scene, _camera);
    _effect.render(_scene, _camera);
}

document.addEventListener('DOMContentLoaded', init);

【问题讨论】：

不太清楚这里发生了什么。背景中的照片是什么？你如何匹配这两个，你确定你的房子精灵正好坐在它应该与现实世界进行比较的位置（照片）？ “每只眼睛的不同位置”在某种程度上是相对的。世界空间，是的，应该是一样的，屏幕空间/相机空间，应该是不同的。
背景中的照片是投影到球体上的图像，而房子是精灵，因此它的位置是相对于相机视图设置的。我不是想匹配它们，而是房子图标应该是一个平视显示器类型的东西。在我链接到的演示中，我使用了线框，因此您可以看到效果。我理解的方式是，因为这些是精灵，无论摄像机角度如何，它们都应该相对于世界在同一个位置......即使它们应该在不同的位置，它们的偏移量也太大了
您可以尝试将您的精灵定位在尽可能靠近相机的位置吗？如果您的近处是一个，则将其设置在距相机 1.0001 处。
嗯，这就是我对定位的意思：改变 x 和 y 从相机的角度在屏幕上横向和纵向移动它，但改变 z 不会影响这一切（我试过和相机一样）近，负值，相机的远，等等...）
你能发布一些代码或工作演示吗，我在上面的链接中没有看到任何动作。

标签： javascript three.js oculus webvr

【解决方案1】：

我对 Oculus 插件不是很熟悉，但我认为您对精灵如何工作的理解是错误的。

Sprite 是一种渲染技术——一种可渲染的光栅化表面……它仍然可以在空间中的任何地方，而空间是一个相对术语。

你的房子是否知道它是 HUD 的一部分，而不是远处某个粒子系统的一部分？

实现您想要的效果的一种方法是将副本覆盖在与代表每只眼睛中心的两个点等距离的位置，所有这些都在屏幕空间中。我认为这会产生您正在寻找的效果。

就定位而言。方向方面，我不确定它们是否真的在您上面的图像中正确对齐，但鱼眼效果正在发挥作用。

【讨论】：

【解决方案2】：

我对 Three.js sprites 的阅读表明它们是使用屏幕坐标定位的，而不是场景中的几何图形。因此，他们忽略了施加在场景上的每眼投影矩阵偏移。我不相信它们会因此与 Oculus Rift 失真效果一起正常工作。

【讨论】：

您认为可以修改 oculus 效果以适应它们吗？

【解决方案3】：

正如 pailhead 和 Jherico 所说，Oculus 插件无法做到这一点。我发现一种有效的解决方法是简单地使用 PlaneGeometry 并将其设置为相机的子项。将其设置为查看相机的位置，它会像精灵一样工作，并为 OculusRiftEffect 正确渲染。基本示例（假设相机和场景）：

var sprite = new THREE.Mesh(
    new THREE.PlaneGeometry(100, 100),
    new THREE.MeshBasicMaterial({color: 0xffffff})
);
//assuming camera is at (0,0,0) we need to offset it
sprite.position.set(20, 20, -100);
sprite.lookAt(camera.position);

camera.add(sprite);

//normally camera doesnt need to be added
//but if it has child meshes it is necessary
scene.add(camera);

由于平面是相机的子对象，因此一旦正确定位了它的偏移量，它将跟随相机无论走到哪里。需要注意的是，它的功能与 Sprite 的功能不同，因为您无法在场景中独立移动它，但它是我找到的最接近的解决方案。

【讨论】：