Question

我知道这个问题已被多次询问并回答，但我仍然无法弄清楚要添加到我的代码中以防止播放器（相机）穿过墙壁。请帮忙。

这是我的代码： 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>

防止A-Frame播放器穿过墙壁

0 个答案: