[英]AFrame: How to render a camera to a texture
我正试图用第二台相机来显示AFrame场景的“天空”视图。 我已经学会了如何使用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>
查看截图组件实现 。 渲染到渲染目标,然后使用像素数据执行任何操作(将其用作WebGL内的纹理,复制到画布......)
经过一些修补和考虑所有建议后,我来到这个代码,它给了我想要的东西。 简而言之,我构建了一个组件( 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 ,它简化了代码。
我用这些组件创建了一个npm包: A-Frame Playground Components 。 所以你可以使用它而不是上面的脚本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.