AFrame：如何将相机渲染为纹理 [英] AFrame: How to render a camera to a texture
问题描述
我正在尝试使用第二台摄像机来显示AFrame场景的从空中视图。在此示例：
I'm trying to have a second camera to show a "from the sky" view of an AFrame scene. I've learned how to do it using a 2D canvas for rendering, following this example:
但是我想知道是否可以在不使用外部的情况下完成此操作？ div> ，类似于直接渲染到某些资产，或者直接渲染到纹理...
But I wonder if this could be done without using a external <div>, something like rendering directly to some asset, or maybe directly to the texture...
我当前的代码是：
<html>
<head>
<script src="//aframe.io/releases/0.8.2/aframe.min.js"></script>
<script>
// Original code:
// https://wirewhiz.com/how-to-use-a-cameras-output-as-a-texture-in-aframe/
//
AFRAME.registerComponent('view',{
'schema': {
canvas: {
type: 'string',
default: ''
},
// desired FPS
fps: {
type: 'number',
default: 90.0
}
},
'init': function() {
var targetEl = document.querySelector(this.data.canvas);
this.counter = 0;
this.renderer = new THREE.WebGLRenderer( { antialias: true } );
this.renderer.setPixelRatio( window.devicePixelRatio );
this.renderer.setSize( targetEl.offsetWidth, targetEl.offsetHeight );
// creates spectator canvas
targetEl.appendChild(this.renderer.domElement);
this.renderer.domElement.id = "canvas";
this.renderer.domElement.crossorigin="anonymous"
this.renderer.domElement.height=300;
this.renderer.domElement.width=400;
this.el.removeAttribute('look-controls');
this.el.removeAttribute('wasd-controls');
console.log(this.renderer.domElement);
console.log(document.querySelector('a-scene'))
},
'tick': function(time, timeDelta) {
var loopFPS = 1000.0 / timeDelta;
var hmdIsXFasterThanDesiredFPS = loopFPS / this.data.fps;
var renderEveryNthFrame = Math.round(hmdIsXFasterThanDesiredFPS);
if(this.counter % renderEveryNthFrame === 0){
this.render(timeDelta);
}
this.counter += 1;
},
'render': function(){
this.renderer.render( this.el.sceneEl.object3D , this.el.object3DMap.camera );
}
});
</script>
<body>
<a-scene physics="debug: true">
<a-plane static-body position="0 0 -4" rotation="-90 0 0" width="30" height="40"
color="yellow"></a-plane>
<a-box color="red" position="0 2 0" depth="8" width="8"></a-box>
<a-entity id="secondaryCamera" position="0 40 0" rotation="-90 0 0">
<a-camera view="canvas:#spectatorDiv;" active="false">
</a-camera>
</a-entity>
<a-entity position="0 0 10" look-controls>
<a-entity camera position="0 1.6 0" wasd-controls>
<a-entity geometry="primitive:plane; width:.2; height:.2" material="src:#canvas; opacity: .6"
position="0.2 -0.3 -0.7" rotation="0 -10 0"></a-entity>
<a-cylinder radius="2" color="green"></a-box>
</a-entity>
</a-entity>
</a-scene>
<div style="height:300px; width:400px;" id='spectatorDiv'></div>
</body>
</html>
推荐答案
经过一番修补并考虑了所有建议后，来看这段代码，这给了我我想要的。简而言之，我构建了一个组件（ camrenderer ），该组件在 a-assets 元素内使用画布来呈现输出镜头这样一来，任何材质都可以引用它（在下面的代码中，请参见添加到与主相机连接的平面上的内容）。为了确保在更改渲染时更新材质，还需要向充当屏幕的对象添加另一个组件（ canvas-updater ）。
After some tinkering and considering all suggestions, I've come to this code, that gives me what I wanted. In short, I built a component (camrenderer) that uses a canvas within the a-assets element for rendering the output of the camera. This allows any material to reference it (in the code below, see it added to a plane attached to the main camera). For ensuring the material gets updated when the rendering changes, you also need to add another component (canvas-updater) to the object acting as screen.
因此，相机渲染器可以被任何组件中的任何材料引用，而不会产生额外的黑客攻击。
Therefore, the camera renderer can be referenced by any material in any component, with no extra hacks.
<html>
<head>
<script src="//aframe.io/releases/0.8.2/aframe.min.js"></script>
<script>
AFRAME.registerComponent('camrender',{
'schema': {
// desired FPS
fps: {
type: 'number',
default: 90.0
},
// Id of the canvas element used for rendering the camera
cid: {
type: 'string',
default: 'camRenderer'
},
// Height of the renderer element
height: {
type: 'number',
default: 300
},
// Width of the renderer element
width: {
type: 'number',
default: 400
}
},
'update': function(oldData) {
var data = this.data
if (oldData.cid !== data.cid) {
// Find canvas element to be used for rendering
var canvasEl = document.getElementById(this.data.cid);
// Create renderer
this.renderer = new THREE.WebGLRenderer({
antialias: true,
canvas: canvasEl
});
// Set properties for renderer DOM element
this.renderer.setPixelRatio( window.devicePixelRatio );
this.renderer.domElement.crossorigin = "anonymous";
};
if (oldData.width !== data.width || oldData.height !== data.height) {
// Set size of canvas renderer
this.renderer.setSize(data.width, data.height);
this.renderer.domElement.height = data.height;
this.renderer.domElement.width = data.width;
};
if (oldData.fps !== data.fps) {
// Set how often to call tick
this.tick = AFRAME.utils.throttleTick(this.tick, 1000 / data.fps , this);
};
},
'tick': function(time, timeDelta) {
this.renderer.render( this.el.sceneEl.object3D , this.el.object3DMap.camera );
}
});
AFRAME.registerComponent('canvas-updater', {
dependencies: ['geometry', 'material'],
tick: function () {
var el = this.el;
var material;
material = el.getObject3D('mesh').material;
if (!material.map) { return; }
material.map.needsUpdate = true;
}
});
</script>
</head>
<body>
<a-scene>
<a-assets>
<canvas id="cam2"></canvas>
</a-assets>
<a-plane position="0 0 -4" rotation="-90 0 0" width="30" height="40"
color="yellow"></a-plane>
<a-box color="red" position="0 2 0" depth="8" width="16"></a-box>
<a-box color="blue" position="0 2 6" depth="2" width="6"></a-box>
<a-entity position="0 40 0" rotation="-90 0 0">
<a-camera camrender="cid: cam2" active="false">
</a-camera>
</a-entity>
<a-entity position="0 0 10" look-controls>
<a-entity camera position="0 1.6 0" wasd-controls>
<a-entity geometry="primitive:plane; width:.2; height:.2"
material="src:#cam2; opacity: .6" canvas-updater
position="0.2 -0.3 -0.7" rotation="0 -10 0"></a-entity>
<a-cylinder radius="2" color="green"></a-cylinder>
</a-entity>
</a-entity>
</a-scene>
</body>
</html>
注释：
-
感谢迭戈·马科斯，这使我步入正轨。
Thanks to Diego Marcos who put me on-track.
感谢彼得·亚当·米勒维斯基谁建议使用 Utils.ThrottleTick ，大大简化了代码。
Thanks to Piotr Adam Milewski who suggested using Utils.ThrottleTick, which simplifies the code a lot.
此版本包含针对发现当前主控方存在的问题（但也适用于 0.8.2 ）
This version includes a fix for a problem found with current master (but also works with 0.8.2)
我使用以下组件创建了一个npm软件包： A型运动场组件。因此，您可以使用它代替上面的脚本。
I've created a npm package with this components: A-Frame Playground Components. So you can just use it instead of the script above.
这篇关于AFrame：如何将相机渲染为纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
