时间戳

首页 > 解决方案 > 可交互组件和随机函数的 Aframe 问题

javascript - 可交互组件和随机函数的 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/aframe-extras@v6.1.0/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>

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

标签： javascriptrandomaframeinteraction

解决方案

推荐阅读