A 帧响应对象
Posted
技术标签:
【中文标题】A 帧响应对象【英文标题】：A-frame responsive object 【发布时间】：2022-01-20 00:29:32 【问题描述】：我有一个使用 A 帧 (https://aframe.io) 创建的场景，目前我始终将一个绿色盒子粘在相机上。当相机转动时，盒子会在相机旁边移动。我想知道的是，无论设备是什么，如何将框设置到屏幕的右上角。目前，我正在使用 position 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" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
小提琴包含代码：https://jsfiddle.net/AidanYoung/0sjLrhfg/
【问题讨论】：
是做UI的吗？如果是这样，我会使用标准的 html 元素 用于制作用户界面。我所做的是使用 Networked Aframe 将当前用户的视频流放在屏幕的右上角。但我找不到将视频流加载到 div 的方法，这就是我使用 A-frame 而不是 html 的原因。 你为什么不能创建一个<div class="vidBox"><video src="..."></div>，然后简单地用CSS附加它：.vidBox position: fixed; top: 0; left: 0; ？
因为我附加的视频流使用的是为 A-frame 3d 元素而不是 html 元素构建的组件。我无法将 div 附加到右上角，因为我无法将视频流附加到元素。
【参考方案1】：
您可以使用勾股定理在相机的左上角放置一个绿色框。但是，我认为考虑到您的用例，使用Renderer.setViewport() method 在角落中简单地渲染一个单独的场景会更容易
请参阅下面的代码示例。本质上，您正在创建 2 个场景和 2 个摄像机。主要场景将包含您的 3D 世界，可能还有一个透视相机来观察它。小场景可能包含一个简单的平面和一个正交相机，以将其渲染为平面而无需透视。然后在每一帧你：
-
清除渲染器的缓冲区
在整个窗口中渲染 main
仅清除深度缓冲区，保留颜色
在第 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 帧响应对象的主要内容，如果未能解决你的问题，请参考以下文章
移动端手势双击（OnGUI也可以在移动端响应，但是帧率太低）