AFrame：如何将相机渲染到纹理
[英]AFrame: How to render a camera to a texture
问题描述
I'm trying to have a second camera to show a "from the sky" view of an AFrame scene. 
我正试图用第二台相机来显示AFrame场景的“天空”视图。 I've learned how to do it using a 2D canvas for rendering, following this example : 我已经学会了如何使用2D画布进行渲染，遵循以下示例 ：
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... 但我想知道是否可以在不使用外部<div>情况下完成此操作，例如直接渲染某些资源，或者直接渲染到纹理......
My current code is: 我目前的代码是：
<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>
2 个解决方案
解决方案1
2 2018-12-24 10:47:56
Check out the screenshot component implementation . 查看截图组件实现 。 Render to a render target, and then do whatever you want with the pixel data (use it as a texture inside WebGL, copy to a canvas...) 渲染到渲染目标，然后使用像素数据执行任何操作（将其用作WebGL内的纹理，复制到画布......）
解决方案2
1 已采纳 2018-12-27 17:46:49
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. 简而言之，我构建了一个组件（ camrenderer ），它使用a-assets元素中的画布来渲染相机的输出。 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. 为了确保在渲染更改时更新材质，还需要将另一个组件（ canvas-updater ）添加到充当屏幕的对象。
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>
Notes : 备注 ：
Thanks to Diego Marcos who put me on-track.
感谢Diego Marcos让我走上正轨。 Thanks to Piotr Adam Milewski who suggested using Utils.ThrottleTick , which simplifies the code a lot.
感谢Piotr Adam Milewski建议使用Utils.ThrottleTick ，它简化了代码。 This version includes a fix for a problem found with current master (but also works with
0.8.2)此版本包含针对当前主服务器发现的问题的修复程序（但也适用于0.8.2）I've created a npm package with this components: A-Frame Playground Components .
我用这些组件创建了一个npm包： A-Frame Playground Components 。 So you can just use it instead of the script above. 所以你可以使用它而不是上面的脚本。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.