A 帧响应对象

Question

我有一个使用 A 帧 (https://aframe.io) 创建的场景，目前我有一个绿色框始终粘在相机上。当相机转动时，盒子将沿着相机移动。我想知道的是，无论设备是什么，如何将框设置到屏幕的右上角。目前我正在使用位置 aframe 属性将框定位在右上角，但在较小的设备上，框不会显示，而在较大的设备上，它位于屏幕中间。我怎样才能做到无论屏幕大小如何，盒子都粘在右上角？

当前代码：

<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
    <a-camera>
                   <a-plane  color="green" scale="0.7 0.4 0.6" position="1.5 0.75 -2" rotation="5 -15 -2.5"></a-plane>

    </a-camera>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Fiddle 包含代码：https://jsfiddle.net/AidanYoung/0sjLrhfg/

Answer 1

您可以使用勾股定理在相机的左上角放置一个绿色框。但是，我认为考虑到您的用例，使用 Renderer.setViewport() method

在角落简单地渲染一个单独的场景会更容易

请参阅下面的代码示例。本质上，您正在创建 2 个场景和 2 个摄像机。主场景将包含您的 3D 世界和可能用于观察它的透视相机。小场景可能包含一个简单的平面和一个正交相机，以在没有透视的情况下渲染它。然后在每一帧你：

清除渲染器的缓冲区
在整个 window
只清除深度缓冲区，保留颜色
在步骤 2 的顶部渲染 100x100 框中的小场景

const renderer = new THREE.WebGLRenderer({/*...*/});

// This prevents the renderer from clearing buffers in between renders
renderer.autoClear = false;

// Main will hold 3D objects
const sceneMain = new THREE.Scene();
scenemain.add(some3DObject);

// Small scene for top-left corner
const sceneSmall = new THREE.Scene();
sceneSmall.add(videoObject);

renderLoop() {
    // Clear renderer buffers
    renderer.clear();

    // Render main scene across full screen
    this.renderer.setViewport(0, 0, window.innerWidth, window.innerHeight);
    renderer.render(sceneMain, cameraMain);

    // Reset depth buffer
    renderer.clearDepth();
    
    // Render small scene in a 100x100 square
    this.renderer.setViewport(0, window.innerHeight - 100, 100, 100);
    renderer.render(sceneSmall, cameraSmall);
}

您可以观看这种“画中画”方法的现场演示 in this example。

A 帧响应对象

A-frame responsive object

javascript

three.js

webvr

aframe