Question

我正在使用a框架实现“放大镜”功能。但是，记录视图的相机已关闭。无论我做什么。

此线程已经为解决我的问题提供了一种很好的方法：AFrame: How to render a camera to a texture

它以下列方式工作（基本解释）：实体显示虚拟相机记录的内容。链接的解决方案从上面可以看到摄像机的视图，但是在那儿，摄像机也没有适当的原因就没有对准。（虚拟相机始终偏离中心）

<html>

<head>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"> 
</script>
<script>
AFRAME.registerComponent('camrender',{
'schema': {
   // desired FPS
   fps: {
        type: 'number',
        default: 60.0
   },
   // Id of the canvas element used for rendering the camera
   cid: {
        type: 'string',
        default: 'camRenderer'
   },
   // Height of the renderer element resolution
   height: {
        type: 'number',
        default: 500
   },
   // Width of the renderer element resolution
   width: {
        type: 'number',
        default: 500
   }
},
'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-box  color="red"   position="0 0 -5" depth="8" width="2"></a-box>
    <a-cone color="green" position="0 0 -5" radius-bottom="2" radius-top="0.5"></a-cone>


    <!-- MagGlass Camera -->
    <a-entity position="0 0 5" rotation="0 0 0">
        <a-camera camrender="cid: cam2" active="false">
        </a-camera>
    </a-entity>

    <!-- MagGlass and Userview -->
    <a-entity position="0 0 2" look-controls>
        <a-entity camera position="0 0 0">
        <a-entity geometry="primitive:plane; width:.4; height:.4"
                    material="src:#cam2; opacity: .90" canvas-updater
                    position="0 0 -0.5" rotation="0 0 0"></a-entity> 
        </a-entity>
    </a-entity>

</a-scene>


</body>
</html>

预期结果：CID摄像机，Box / Cone，Magglasss和Userview均在X / Y轴上对齐。

实际结果：Magglass，Userview和Box / Cone在X / Y轴上对齐。而且相机关闭，并且似乎也略微旋转。

希望有一些想法，因为坐标没有任何意义：D

A帧相机贴图，相机对齐关闭

0 个答案: