Home » Javascript » javascript – Can you adjust the size of <a-scene> in A-Frame for WebXR? – Stack Overflow

javascript – Can you adjust the size of <a-scene> in A-Frame for WebXR? – Stack Overflow

Posted by: admin February 20, 2020 Leave a comment

Questions:

I’m trying to shrink the size of a-scene in A-Frame without having to change the sizes of what is inside of a-scene. In this particular example, i’m displaying code on Magic Leap One’s Helio browser. Is there a way to just reduce the size of a-scene and anything placed inside?

<!DOCTYPE html>
<html lang="en" class="a-html">
  <head>
  <title>3D WebXR Space Test</title>
    <link rel="stylesheet" href="./style.css">


  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="transparent-background" />

    <!-- Aframe Scripts -->
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.min.js"></script>


    <!-- import Helio WebXR and WebVR polyfill -->
    <script src="https://threejs.org/examples/js/vr/HelioWebXRPolyfill.js"></script>


</head>
<body class="a-body a-grabbing">
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>


<a-light type="directional" color="#ffffff" intensity="1" position="-1 1 1"></a-light>
<a-light type="ambient" color="#444444"></a-light>
<a-light type="point" intensity="1" position="2 4 4"></a-light>

</a-scene>

</body>
</html>
Answers: