Search code examples
htmlaframe

How to create a <a-sky></a-sky> image with zoom?


i am newbie in a-frame , and i have a simple question(actually it's hard for me)

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<a-scene>
    <a-assets>
	    <img id="sky" src="http://aprinweb.ir/vr/img/monument.jpg">
    </a-assets>
    <!-- <a-light type="spot" color="#ff0000" position="0.13 1.31 -1.18" look-at="a-box"></a-light> -->
    <a-sky src="#sky"></a-sky>
</a-scene>

http://aprinweb.ir/vr/

i build this sample last night , i need to insert zoom for this a-sky tag (because i need to create a vr like virtual tour) how can create zoom on aframe to zoom on a picture??? thanks for your help


Solution

  • Latest aframe (v0.9.0) has already supported this feature. You would need to use a camera tag by adding following to your <a-scene> tag.

    <a-entity camera look-controls position="0 1.6 0" id="camera-id"></a-entity>
    

    The newly added camera will be used instead of the system default one. In you code, do something similar to this:

    var camera = document.querySelector('#camera-id');
    camera.setAttribute('camera', 'zoom', your_zoom_factor);
    

    Please see https://github.com/aframevr/aframe/blob/master/docs/components/camera.md for more details and examples.