具有可交互组件和随机函数的Aframe问题

问题描述

我正在尝试在Aframe的场景中创建一个实体,一旦单击该实体,我就会进入另一个随机页面。 我是新手,所以我的代码是拼凑而成的,有时可以正常工作,而其他时候则不能。我使用此插件(https://github.com/silverslade/aframe_blender_exporter)在“ Aframe”页面中转换了3d Blender场景。效果很好,这是我添加了javascript行的结果

<head>
    <title>WebXR Application</title>
    <link rel="icon" type="image/png" href="index/favicon.ico"/>
    <meta name="description" content="3D Application">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-extras.min.js"></script>
    <script type="text/javascript" src="index/js/webxr.js"></script>
    <script type="text/javascript" src="index/js/joystick.js"></script>
    <script type="text/javascript" src="index/js/camera-cube-env.js"></script>
    <script>
    AFRAME.registerComponent('navigate-on-click',{
      schema: {
        url: {default: ''}
      },init: function () {
        var data = this.data;
        var el = this.el;

        el.addEventListener('click',function () {
          window.location.href = data.url;
        });
      }
    });
        </script>
        <script>
          var urls = [
    "http://www.findyourface.it/AuroraReinhard/AuroraReinhard.html",'http://www.findyourface.it//NikideSaintPhalle/NikideSaintPhalle.html','http://www.findyourface.it/AmeliaEarthart/AmeliaEarthart.html'              

          ];

          function goSomewhere() {
              var url = urls[Math.floor(Math.random()*urls.length)];
              window.location = url; // redirect
          }
          </script>
    <link rel="stylesheet" type="text/css" href="index/style.css">
</head>
<body onload="init();">
    <a-scene   shadow="type: basic; autoUpdate: false;">
        <!-- Assets -->
        <a-assets>
            <a-asset-item id="Plane" src="./index/assets/Plane.gltf"></a-asset-item>
            <a-asset-item id="segnalefreccia" src="./index/assets/segnalefreccia.gltf"></a-asset-item>
            <img id="sky"                 src="./index/resources/sky.jpg">
            <img id="icon-play"           src="./index/resources/play.png">
            <img id="icon-pause"          src="./index/resources/pause.psng">
            <img id="icon-play-skip-back" src="./index/resources/play-skip-back.png">
            <img id="icon-mute"           src="./index/resources/mute.png">
            <img id="icon-volume-low"     src="./index/resources/volume-low.png">
            <img id="icon-volume-high"    src="./index/resources/volume-high.png">
        </a-assets>

        <!-- Entities -->

        <a-entity id="#Plane"  gltf-model="#Plane" scale="1 1 1" position="0.0 0.0 -0.0" visible="true" shadow="cast: false" ></a-entity>
        <a-entity animation-mixer id="#segnalefreccia"  gltf-model="#segnalefreccia" scale="0.25 0.25 0.25" position="0.0 0.0 -10.0" visible="true" shadow="cast: false" onClick="goSomewhere(); return false;" ></a-entity>

        <!-- Camera -->
        <a-entity id="player"
            position="0 -0.2 0"
            movement-controls="speed: 0.10000000149011612;">
            <a-entity id="camera"
                camera="near: 0.001"
                position="0 1.7000000476837158 0"
                look-controls="pointerLockEnabled: true">
                    <a-entity id="cursor" cursor="fuse: false;" animation__click="property: scale; startEvents: click; easing: easeInCubic; dur: 50; from:  0.1 0.1 0.1; to: 1 1 1"
                        position="0 0 -0.1"
                        geometry="primitive: circle; radius: 0.001;"
                        material="color: #CCC; shader: flat;"
                        >
                    </a-entity>
            </a-entity>
                <a-entity id="leftHand" oculus-touch-controls="hand: left" vive-controls="hand: left"></a-entity>
                <a-entity id="rightHand" laser-controls oculus-touch-controls="hand: right" vive-controls="hand: right" ></a-entity>
        </a-entity>

        <!-- Lights -->
        <a-entity light="intensity: 10; shadowBias: -0.001; shadowCameraFar: 501.02; shadowCameraBottom: 12; shadowCameraFov: 101.79; shadowCameraNear: 0; shadowCameraTop: -5; shadowCameraRight: 10; shadowCameraLeft: -10; shadowRadius: 2; angle: 180; decay: 1.3; type: spot; distance: 4.41; penumbra: 0.01" position="0 3.53829 -9.8453"></a-entity>
        <!-- Sky -->
        <a-sky color="#000000"></a-sky>
    </a-scene>
</body>

第一次打开场景时,必须多次单击它,但最终它会起作用,但是在接下来的页面中,它完全停止工作。我认为这是因为这是代码的科学怪人,但是我没有找到更好的方法。 谢谢您的帮助!

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)