如何从列表中克隆一个随机对象并使用 A-frame.js 使其可见

【问题标题】：how do i clone a random object from a list and make it visible using A-frame.js如何从列表中克隆一个随机对象并使用 A-frame.js 使其可见
【发布时间】：2022-01-26 02:42:54
【问题描述】：

我正在使用 Javascript 和 A-frame。我希望能够从块列表中获得一个随机块，并且我希望它向下移动 1。我似乎无法让任何块随机出现在负载电流上。下面是我为制作俄罗斯方块板而创建的代码，但它目前给我带来了一些小问题。

我收到了错误

  "message": "Uncaught SyntaxError: Unexpected end of input",

我不确定这是什么意思？

var zigZag = document.querySelector("#zigZag");

var fork = document.querySelector("#fork");

var box = document.querySelector("#box");

var line = document.querySelector("#line");

var plane = document.querySelector("#plane");

//timer
// let hour = 0;
// let minute = 0;
// let second = 0;
// let millisecond = 0;

// let cron;

var newBlock, blocks, element, blocksOnPlane, planeBlock;

// Describe this function...

newBlock = [];

blocks = [zigZag, fork, line, box];

blocksOnPlane = [];
document.addEventListener("load", start);

function start() {
  while (true) {
    new Promise((res) => setTimeout(() => res(chooseBlock()), 10));
    console.log(newBlock.length);
    for (var element_index in newBlock) {
      element = newBlock[element_index];
      moveBlock(element);
      plane.detectCollisionsWith(newBlock[element_index], function (
        collidedObject
      ) {
        newBlock = collidedObject;
        newBlock.object3D.position.y = 0;
        blocksOnPlane.unshift(planeBlock);
        newBlock.shift();
      });
      // for (var element_index in blocksOnPlane) {
      //     element = blocksOnPlane[element_index];
      //     newBlock.detectCollisionsWith(planeBlock, function (collidedObject) {
      //         element.setY(element.getY() + 0)
      //         planeBlock = collidedObject;
      //         blocksOnPlane.unshift(planeBlock);
      //         newBlock.shift();

      //     })
      // }
    }
  }
}


document.addEventListener("keydown", function (event) {
  if (event.keyCode === 37) {
    element.object3D.position.x += -1;
  }
  //top
  else if (event.keyCode === 38) {
    element.object3D.position.x += 1;
  }
  //right
  else if (event.keyCode === 39) {
    element.object3D.position.x += 1;
  }
  //bottom
  else if (event.keyCode === 40) {
    element.object3D.position.x += -1;
  }
});

function moveBlock(element) {
  document.createTimer("timer1", 1 * 1000, function () {
    element.object3D.position.y += -1;
  });
}

function listsGetRandomItem(list, remove) {
  var x = Math.floor(Math.random() * list.length);
  if (remove) {
    return list.splice(x, 1)[0];
  } else {
    return list[x];
  }
}

// Describe this function...
function chooseBlock() {
  var tetrisBlock = document.clone(listsGetRandomItem(blocks, false));
  tetrisBlock.visible = true;
  tetrisBlock.object3D.position.x = 0;
  tetrisBlock.object3D.position.y = 7.5;
  tetrisBlock.object3D.position.z = -14;
  newBlock.unshift(tetrisBlock);
}
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<!DOCTYPE html>

    <button type="button" name="start">start</button>
    <button type="button" name="pause">pause</button>
    <button type="button" name="reset">reset</button>
    <a-scene>
      <a-entity
        id="zigZag"
        collide-with-player=""
        hatch-type-shape=""
        data-hatch-type="hatch-type-empty"
        data-icon-type="rectangle"
        physics-scale-fix=""
        hatch-physics=""
        shadow="cast: false; receive: false"
        hatch-cursor-event-detection="enableCursorDetection: true"
        position="-4.0825353394644335 5.15966087923683 -17.160361366799766"
        color="#d5b949"
        class="clickable"
        <!--
        visible="true"
        --
      >
        ><a-box
          id="line6"
          collide-with-player=""
          hatch-type-shape=""
          geometry="primitive: box"
          data-hatch-type="hatch-type-shape"
          data-icon-type="box"
          physics-scale-fix=""
          hatch-physics=""
          shadow=""
          hatch-cursor-event-detection="enableCursorDetection: true"
          position="5.039535339464433 3.3480091207631695 3.1603613667997656"
          color="#f1eaa3"
          material="color: #f1eaa3"
          class="clickable"
          scale="2 1 1"
          rotation="0 0 89.99999999999999"
          child-test="true"
        ></a-box
        ><a-box
          id="line5"
          collide-with-player=""
          hatch-type-shape=""
          geometry="primitive: box"
          data-hatch-type="hatch-type-shape"
          data-icon-type="box"
          physics-scale-fix=""
          hatch-physics=""
          shadow=""
          hatch-cursor-event-detection="enableCursorDetection: true"
          position="4.137505339464433 4.44454912076317 3.1603613667997656"
          color="#f1eaa3"
          material="color: #f1eaa3"
          class="clickable"
          scale="2 1 1"
          rotation="0 0 89.99999999999999"
          child-test="true"
        ></a-box
        ><a-box
          id="line4"
          collide-with-player=""
          hatch-type-shape=""
          geometry="primitive: box"
          data-hatch-type="hatch-type-shape"
          data-icon-type="box"
          physics-scale-fix=""
          hatch-physics=""
          shadow=""
          hatch-cursor-event-detection="enableCursorDetection: true"
          position="4.636015339464434 3.91959912076317 3.1603613667997656"
          color="#f1eaa3"
          material="color: #f1eaa3"
          class="clickable"
          scale="2 1 1"
          rotation="0 0 0"
          child-test="true"
        ></a-box
      ></a-entity>
      <a-entity
        id="fork"
        collide-with-player=""
        hatch-type-shape=""
        data-hatch-type="hatch-type-empty"
        data-icon-type="rectangle"
        physics-scale-fix=""
        hatch-physics=""
        shadow="cast: false; receive: false"
        hatch-cursor-event-detection="enableCursorDetection: true"
        position="1.158747821160648 5.997102835551197 -14.335538215901849"
        color="#617ec2"
        class="clickable"
        rotation="0 0 0"
        scale="1 1 1"
        visible="true"
        ><a-box
          id="line3"
          collide-with-player=""
          hatch-type-shape=""
          geometry="primitive: box"
          data-hatch-type="hatch-type-shape"
          data-icon-type="box"
          physics-scale-fix=""
          hatch-physics=""
          shadow=""
          hatch-cursor-event-detection="enableCursorDetection: true"
          position="-1.158747821160648 1.502897164448803 0.33553821590184896"
          color="#a3eaf1"
          material="color: #a3eaf1"
          class="clickable"
          scale="3 1.0000000000000002 1"
          rotation="0 0 89.99999999999999"
          child-test="true"
        ></a-box
        ><a-box
          id="line2"
          collide-with-player=""
          hatch-type-shape=""
          geometry="primitive: box"
          data-hatch-type="hatch-type-shape"
          data-icon-type="box"
          physics-scale-fix=""
          hatch-physics=""
          shadow=""
          hatch-cursor-event-detection="enableCursorDetection: true"
          position="-0.60527 1.44434 0.33554"
          color="#a3edf1"
          material="color: #a3edf1"
          class="clickable"
          scale="2 1 1"
          rotation="0 0 0"
          child-test="true"
        ></a-box
      ></a-entity>
      <a-box
        hatch-type-shape=""
        data-icon-type="box"
        id="box"
        shadow=""
        displayname="Box"
        position="0 9.09 -14"
        rotation="0 0 0"
        color="#4CC3D9"
        side="front"
        hatch-physics=""
        data-hatch-type="hatch-type-shape"
        material="color: #4CC3D9; side: front"
        geometry="primitive: box"
        physics-scale-fix=""
        hatch-cursor-event-detection="enableCursorDetection: true"
        collide-with-player=""
        class="clickable"
        scale="2 2 1"
        child-test="true"
        visible="true"
      ></a-box>
      <a-box
        id="line"
        collide-with-player=""
        hatch-type-shape=""
        geometry="primitive: box"
        data-hatch-type="hatch-type-shape"
        data-icon-type="box"
        physics-scale-fix=""
        hatch-physics=""
        shadow=""
        hatch-cursor-event-detection="enableCursorDetection: true"
        position="0 7.5 -14"
        color="#a3f1af"
        material="color: #a3f1af"
        class="clickable"
        scale="4 1 1"
        visible="true"
      ></a-box>
      <a-entity
        id="Ground"
        ground="dressing: none; groundSize: 100; ground: flat; groundTexture: none; grid: 1x1; groundColor: #333343; flatShading: true; gridColor: #B5B5B5"
        data-hatch-type="hatch-type-ground"
        data-is-droppable="false"
        data-icon-type="terrain"
        data-is-expandable="false"
        position="0 0 0"
        color="#62E9F7"
        visible="true"
        ><a-entity
          class="environment"
          position=""
          visible=""
          light=""
          data-not-selectable="true"
          data-hide-model="true"
          data-icon-type="light-hemisphere"
        ></a-entity
        ><a-entity
          class="environment"
          position=""
          light=""
          data-hide-model="true"
          visible="true"
          data-icon-type="light-directional"
        ></a-entity
        ><a-entity
          rotation=""
          visible=""
          data-not-selectable="true"
          class="environmentGround environment"
          scale=""
          shadow=""
        ></a-entity
        ><a-entity
          data-not-selectable="true"
          visible=""
          class="environmentDressing environment"
        ></a-entity
      ></a-entity>
      <a-plane
        id="plane"
        collide-with-player=""
        hatch-type-shape=""
        geometry="primitive: plane"
        data-hatch-type="hatch-type-shape"
        data-icon-type="plane"
        physics-scale-fix=""
        hatch-physics=""
        shadow=""
        hatch-cursor-event-detection=""
        position="-0.38406 0 -16.5359"
        color="#975c26"
        material="color: #975c26; shader: flat; side: back"
        rotation="90 0 0"
        scale="17.9 12.9 1"
        visible="true"
      ></a-plane>
    </a-scene>

【问题讨论】：

  • @MisterJojo 还需要什么？
  • 我更新了代码@MisterJojo
  • 我需要把它变成一个列表吗？当它是一个列表时它不起作用@MisterJojo
  • 嘿，document.clone、document.createTimer、document.detectCollisionsWith 之类的东西来自哪里（因为它们不是“标准”document 方法）？顺便说一句，sn-p 没有 Unexpected end of input" 错误，有什么不同？
  • 我试图从hatchxr游戏引擎迁移到只是一个网络文档，这是我忘记提及那部分的问题。

标签： javascript clone aframe


【解决方案1】：

不确定你从哪里得到document.clone(element) 作为document 对象doesn't seem to have a cloning utility。

有一个 element.cloneNode() 方法可以正常工作 - 我们可以在 custom component 中使用它，它还将处理实体生命周期：

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  // register new component
  AFRAME.registerComponent("foo", {
    // on init
    init: function() {
      // grab the button, and the entity
      const btn = document.querySelector("button")
      const tmplate = document.getElementById("template")

      // when clicked
      btn.addEventListener("click", evt => {
        // clone the node
        const new_element = tmplate.cloneNode(true);
        // make it smaller, and move it a bit
        new_element.setAttribute("scale", "0.2 0.2 0.2")
        new_element.setAttribute("position", {
          x: Math.random() * 6 - 3,
          y: 0.5,
          z: -1
        })
        // append it to the scene
        this.el.appendChild(new_element)
      })
    }
  })
</script>
<button style="z-index: 9999; position: fixed;">COPY</button>
<a-scene foo>
  <a-entity id="template">
    <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  </a-entity>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

您可以使用interval timeouts 或tick / throttledTick 处理程序将其向下移动。这可以在system 中完成，该system 将管理创建的实体（向下移动、碰撞）。

一个简单的“下移”版本可能如下所示：

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  //register system
  AFRAME.registerSystem("foo", {
    init: function() {
      // array of all registered elements
      this.elements = [];
      // set up the throttled version
      this.tick = AFRAME.utils.throttleTick(this.tick, 250, this);
    },
    register: function(el) {
      // push new element to the registered array
      this.elements.push(el)
    },
    tick: function() {
      // loop through all of the elements, and move them down
      for (el of this.elements) {
        const pos = el.object3D.position // this is more efficient than getAttribute("position")
        pos.y = (pos.y < 0) ? 2 : pos.y - 0.1; // use setAttribute() if you want getAttribute() to work
      }
    }
  })

  // register new component
  AFRAME.registerComponent("foo", {
    // on init
    init: function() {
      //  move it a bit, and make it visible
      this.el.setAttribute("position", {
        x: Math.random() * 6 - 3,
        y: 0.5,
        z: -2
      })
      this.el.setAttribute("visible", "true")

      // register the element in the system
      this.system.register(this.el)
    }
  })

  AFRAME.registerComponent("inserter", {
    init: function() {
      // grab the button, and the entity
      const btn = document.querySelector("button")
      const tmplate = document.getElementById("template")

      // when clicked
      btn.addEventListener("click", evt => {
        // clone the node
        const new_element = tmplate.cloneNode(true);
        new_element.setAttribute("foo", "")
        // append it to the scene
        this.el.appendChild(new_element)
      })
    }
  })
</script>
<button style="z-index: 9999; position: fixed;">NEW</button>
<a-scene inserter>
  <a-entity id="template" visible="false" scale="0.2 0.2 0.2">
    <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  </a-entity>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

迟早你可能会遇到性能问题（一旦有多个节点），最好深入了解mesh instancing（或至少检查performance guidelines）

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 2018-12-19
    • 1970-01-01
    • 2021-05-21
    • 2011-12-19
    • 1970-01-01
    • 2017-09-18
    • 2010-10-17
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode