我正在尝试使用第二台摄像机来显示AFrame场景的“从空中”视图。在this example之后，我已经学会了如何使用2D画布进行渲染：
但是我想知道是否可以在不使用外部<div>的情况下完成此操作，例如直接渲染到某些资产，或者直接渲染到纹理...
我当前的代码是：
<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>
答案 0 :(得分：2)
签出screenshot component implementation。渲染到渲染目标，然后对像素数据进行任何操作（将其用作WebGL中的纹理，复制到画布...）
答案 1 :(得分：1)
经过一番修补并考虑了所有建议后，我来到了这段代码，这给出了我想要的。简而言之，我构建了一个组件（camrenderer），该组件在a-assets元素内使用画布来渲染摄像机的输出。这样一来，任何材质都可以引用它（在下面的代码中，请参见添加到与主相机连接的平面上的内容）。为了确保在更改渲染时更新材质，还需要向充当屏幕的对象添加另一个组件（canvas-updater）。
因此，可以通过任何组件中的任何材质引用相机渲染器，而不会造成额外的麻烦。
<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>
注释：
感谢Diego Marcos使我步入正轨。
感谢Piotr Adam Milewski建议使用Utils.ThrottleTick，这大大简化了代码。
此版本包含针对problem found with current master的修复程序（但也适用于0.8.2）
我使用以下组件创建了一个npm软件包：A-Frame Playground Components。因此，您可以使用它代替上面的脚本。