我知道这个问题已被多次询问并回答，但我仍然无法弄清楚要添加到我的代码中以防止播放器（相机）穿过墙壁。请帮忙。
这是我的代码： https://codepen.io/payamspot/pen/XErObb
<head>
<meta charset="utf-8">
<title>Find the Way!</title>
<link rel="icon" sizes="192x192" href="https://cdn.glitch.com/60055b0c-41c5-49c8-805c-da359f1c3f99%2Ffindtheway%20logo.png?1520489367793">
<script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
<script src="https://rawgit.com/fernandojsg/aframe-teleport-controls/master/dist/aframe-teleport-controls.min.js"></script>
<script src="https://cdn.rawgit.com/zcanter/aframe-gradient-sky/master/dist/gradientsky.min.js"></script>
</head>
<body>
<a-scene antialias="true">
<a-assets>
<img id="grass" src="https://cdn.glitch.com/60055b0c-41c5-49c8-805c-da359f1c3f99%2Fgrass.jpg?1519297817380">
</a-assets>
<!-- sky -->
<a-sky geometry="radius:200; thetaLength:100;" material="shader:gradient; topColor:52 112 251; bottomColor:123 179 220; offset:0;"></a-sky>
<!-- ground -->
<a-plane class="hasEvent" position="0 0 0" rotation="-90 0 0" geometry="width:200; height:200;" material="src:#grass; repeat:111 111;"></a-plane>
<!-- walls -->
<a-box class="wall" id="w0001" position="-2 2 -3" rotation="0 0 0" geometry="width:2; height:4; depth:0.1;" material="src:#grass; repeat:2 4;"></a-box>
<a-box class="wall" id="w0002" position="-3 2 0" rotation="0 -90 0" geometry="width:6; height:4; depth:0.1;" material="src:#grass; repeat:6 4;"></a-box>
<a-box class="wall" id="w0003" position="0 2 3" rotation="0 0 0" geometry="width:6; height:4; depth:0.1;" material="src:#grass; repeat:6 4;"></a-box>
<a-box class="wall" id="w0004" position="3 2 2" rotation="0 -90 0" geometry="width:2; height:4; depth:0.1;" material="src:#grass; repeat:2 4;"></a-box>
<a-box class="wall" id="w0005" position="3 2 -2" rotation="0 -90 0" geometry="width:2; height:4; depth:0.1;" material="src:#grass; repeat:2 4;"></a-box>
<a-box class="wall" id="w0006" position="2 2 -3" rotation="0 0 0" geometry="width:2; height:4; depth:0.1;" material="src:#grass; repeat:2 4;"></a-box>
<a-entity light="type:ambient; color:#fff; intensity:1.1;"></a-entity>
<a-entity light="type:directional; color:yellow; intensity: 0.3" position="-3.635 5.02 -5.484"></a-entity>
<a-entity id="cameraRig" position="0 -1.6 0">
<a-camera user-height="3.9"></a-camera>
<a-entity teleport-controls="cameraRig:#cameraRig; button:trigger; type:line; maxLength:44; defaultPlaneSize:999;"
laser-controls raycaster="objects:.hasEvent; interval:200; showLine:true;" line="color:#eee; opacity:0.2;" />
</a-entity>
</a-scene>
</body>