AFrame设置属性对Plane的高度和宽度不起作用。

问题描述 投票：0回答：1

我正试图建立一个VR网站。我需要我的代码做的一件事是，当我点击一个雕像时，我的飞机和文本要切换可见性。在下面的代码中，当我点击parkStatue时，park和parkPlane都应该消失或变得可见。文字工作得很好，但平面没有变化。理论上，高度和宽度发生了变化（变成0，然后又变回来），但它没有调整大小。我到底做错了什么？

演示。https:/people.rit.edudl1683VR

使用框架

<head>
    <script src="https://aframe.io/releases/0.8.2/aframe.min.js"> </script>
</head>

<body>
    <script>

        var proj={
            park:'Pakinsons',
            anant: "Anant"
        }

        function visible(idBase) {
            // get the clock
            console.log("Clicked: "+idBase)
            var plane=document.getElementById(idBase+'Plane')
            var text=document.getElementById(idBase)
            console.log(plane.getAttribute('visible'))
            if(text.getAttribute('value')!=' '){
                text.setAttribute('value'," ")
                plane.setAttribute('height', 0)
                plane.setAttribute('width', 0)
                plane.setAttribute('visible',false)
                // plane.height="0000"
                // plane.width="0000"


            }else{
                text.setAttribute('value',proj[idBase])
                plane.setAttribute('height', ".00010")
                plane.setAttribute('width', ".00010")
                plane.setAttribute('visible',true)

                // plane.height=".00010"
                // plane.width=".00010"

            }
        }

    </script>

    <a-scene>   

            <a-camera position="2 3 0">
            <a-cursor color="#FF0000">
        </a-camera>

>
        <a-gltf-model id="sheep" position="0 0 -3" rotation="0 100 0" 
            src="https://cdn.glitch.com/0fc2d138-1979-4b80-8bae-51eb67b7ccb9%2Fsheep.glb?1544159918188">
        </a-gltf-model>


        <a-gltf-model id="parkStatue" position="-4 2 -11" rotation="0 15 0" scale=".04 .04 .04" onclick="visible('park')"
                src="https://cdn.glitch.com/7e18fbf8-9686-4cf7-91f9-4a6bbdb54f5e%2Fstatue.glb?1544169724449">
        </a-gltf-model>

        <a-plane id='parkPlane' position="-1 1.69 -2.5" rotation="0 10 0"  height=".00010" 
        color="#faaf52" width=".00010"></a-plane>    
<a-text id='park' value="Parkinsons" position="-2.15 2 -2.29" rotation="0 10 0" width="4" color="black" ></a-text>


        <a-sky src="https://cdn.glitch.com/7e18fbf8-9686-4cf7-91f9-4a6bbdb54f5e%2Fsky.jpg?1544174075054"></a-sky>

        <a-plane id="floor" position="0 0 0" rotation="-90 0 0" width="30" height="30" repeat="5 4"
            src="https://cdn.glitch.com/c388f728-37b7-4af9-af03-1ee7430663e7%2F4727356277_66fb5f938f_o.jpg?1544178281422">
        </a-plane>

        <a-plane position="-1 1.69 -2.5" rotation="0 10 0" scale="2.75 1 1" color="#faaf52"></a-plane>

        <a-plane position="2 1 -2.5" rotation="0 -10 0" scale="2 .8 1" color="#faaf52"></a-plane>
        <a-text value="On desktop, click + drag to look around, and use the awsd keys to move around."
            position="1.12 1.23 -2.6" rotation="0 -10 0" width="1.9" color="black"></a-text>
        <a-text value="In Go/Daydream/GearVR or mobile, look around. On Rift, Vive, or WinMR, you can also walk around!"
            position="1.09 1 -2.6" rotation="0 -10 0" width="1.9" color="black"></a-text>

        <a-dodecahedron position="-8 2 -1" color="yellow"></a-dodecahedron>

        <a-sphere position="10 2 0" color="orange" scale=".6 .6 .6"></a-sphere>
        <a-sphere position="10 1.5 -1" color="brown" scale=".4 .4 .4"></a-sphere>
        <a-sphere position="10 1.5 1" color="brown" scale=".4 .4 .4"></a-sphere>
        <a-sphere position="10 2.7 .8" color="brown" scale=".4 .4 .4"></a-sphere>


        <a-plane position="0 1.5 -15" color="#643200" scale="30 3 30"></a-plane>
        <a-plane position="15 1.5 0" rotation="0 -90 0" color="#643200" scale="30 3 30"></a-plane>
        <a-plane position="0 1.5 15" rotation="0 180 0" color="#643200" scale="30 3 30"></a-plane>
        <a-plane position="-15 1.5 0" rotation="0 90 0" color="#643200" scale="30 3 30"></a-plane>


        <a-box position="4 1 -8" scale="2 2 2" color="black"></a-box>
        <a-torus-knot position="4 4 -8" color="#408080"></a-torus-knot>

        <a-box position="-10 1 -10" scale=".5 2 .5" color="#552b00"></a-box>
        <a-cone position="-10 3.2 -10" color="green" scale="1 3 1"></a-cone>

        <a-box position="-9 1 -12" scale=".5 2 .5" color="#552b00"></a-box>
        <a-cone position="-9 3.2 -12" scale="1 3 1" color="green"></a-cone>

        <!-- tree -->
        <a-box position="10 1 10" scale=".5 2 .5" color="#552b00"></a-box>
        <a-cone position="10 3.2 10" color="green" scale="1 3 1"></a-cone>

        <!-- tree -->
        <a-box position="9 1 12" scale=".5 2 .5" color="#552b00"></a-box>
        <a-cone position="9 3.2 12" scale="1 3 1" color="green"></a-cone>

        <a-box position="-8 3 10" rotation="0 -45 0" scale="6 2 2" color="#80ffff"></a-box>
        <a-box position="-8 1 10" rotation="0 -45 0" scale="1 2 1" color="#592d00"></a-box>

        <a-box position="0 1 10" scale="2 2 2" color="black"></a-box>
        <a-tetrahedron position="0 3.5 10" rotation="-12 -180 65" color="#FF926B" radius="5" scale=".5 .5 .5">
        </a-tetrahedron>


    </a-scene>

</body>

</html>
javascript aframe webvr
1个回答
1
投票

你的代码和预期的一样，但是在A-Frame上有一个错误。将宽度和高度设置为0会将几何体的默认值设置为0。在github中捕获了这个问题. 任何其他的值都应该像预期的那样工作，在你的例子中，你不需要将高度和宽度设置为0，因为你正在隐藏实体。在你的情况下，你不需要将高度和宽度设置为0，因为你正在隐藏实体。

顺便说一下，你的A-Frame版本较旧。请使用1.0.4或更新的版本。

检查你的HTML是否有效，如 没有关闭标签 <a-cursor> 或使用单引号的ID ' 而不是双倍 ". 未来分享一个可运行的例子，会让大家更容易帮助你。Glitch是个不错的选择

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.