【发布时间】：2020-05-09 08:02:32
【问题描述】：
我正在尝试建立一个 VR 网站。我需要我的代码做的一件事是让我的平面和文本在我单击雕像时切换可见性。在下面的代码中，当我单击 parkStatue 时，park 和 parkPlane 都应该消失或变得可见。文字工作正常，但飞机没有改变。理论上，高度和宽度会发生变化（变为 0 并返回），但不会调整大小。我做错了什么
演示：https://people.rit.edu/dl1683/VR
使用框架
<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