Javascript在三维立方体中单击一次？需要访问内部多维数据集并触发函数_Javascript_Html_Css

Javascript在三维立方体中单击一次？需要访问内部多维数据集并触发函数

javascript html css

Javascript在三维立方体中单击一次？需要访问内部多维数据集并触发函数,javascript,html,css,Javascript,Html,Css,我一直在做这个项目，我需要构建一个立方体，在这个项目中，给定一个精确的数字，它会生成这些立方体。问题是，我需要访问预渲染的多维数据集才能得到新的“spawn”。要做到这一点，我需要在一个原子立方体面上使用光标进行访问。我一直在尝试指针事件：没有，没有成功，我的想法也不多，现在我正在考虑采取光标位置，并查询当前“构建”的z轴上的第一个立方体（有3个面，因为我将仅从3个角度查看立方体）。目标是使每个渲染的完全构建的多维数据集成为可单击的项（换句话说，每个构成原子多维数据集的标记），然后触发som

我一直在做这个项目，我需要构建一个立方体，在这个项目中，给定一个精确的数字，它会生成这些立方体。问题是，我需要访问预渲染的多维数据集才能得到新的“spawn”。要做到这一点，我需要在一个原子立方体面上使用光标进行访问。我一直在尝试指针事件：没有，没有成功，我的想法也不多，现在我正在考虑采取光标位置，并查询当前“构建”的z轴上的第一个立方体（有3个面，因为我将仅从3个角度查看立方体）。目标是使每个渲染的完全构建的多维数据集成为可单击的项（换句话说，每个构成原子多维数据集的标记），然后触发someFunction（）

以下是迄今为止的代码： JS:

HTML:

我尽量让它保持干净，但我不是一个专家，因此，我很抱歉弄得一团糟：D

应该可以。在

listaMemo

中，带有“这定义了立方体是否是外部的”的行实际上是控制立方体的颜色？事实上，这只是一个设计问题，因为它适用于从外部（外部）红色立方体到内部（内部）蓝色立方体再到中间黑色立方体的游戏：D。我现在试试你的方法并更新问题，无论如何现在它工作得很好，非常感谢，我将不得不更仔细地阅读文档，尽管哈哈哈

var cube = document.querySelector('.cube');
var radioGroup = document.querySelector('.radio-group');
var currentClass = '';

function changeSide() {
    var checkedRadio = radioGroup.querySelector(':checked');
    var showClass = 'show-' + checkedRadio.value;
    if ( currentClass ) {
        cube.classList.remove( currentClass );
    }
    cube.classList.add( showClass );
    currentClass = showClass;
}
// set initial side
changeSide();

radioGroup.addEventListener( 'change', changeSide );


//Init Cubes
function initCubes(){
    let id = 0
    let atomicCube = document.createElement('div')
    atomicCube.classList.add('atomic-cube')
    for(let i = 0; i<5; i++){

        for (let l = 0; l < 25; l++) {
            atomicCube.id = id
            document.getElementById('layer-'+i).appendChild(atomicCube.cloneNode(true))
            id += 1
        }
    
    }
}

//Building Cubes
function buildCubes(array){
  let idH1 = document.createElement('h1')
  let infop = document.createElement('p')
  let atomicCube = document.createElement('div')
  let classes = ['front','right','top']
  let info = []
  let color = 0

  //read every cub that is in toDraw
  for (let i = 0; i < array.length; i++) {
    //check if is already built (aka look for childrens)
    if (!document.getElementById(array[i]).hasChildNodes()){
      //look on listaMemo
      for (let memoria = 0; memoria < listaMemo.length; memoria++) {
        //look for corresponding id
        if(listaMemo[memoria][0] == array[i]){
          //take infos
          info = listaMemo[memoria][3]
          //prendi il colore
          color = listaMemo[memoria][2]
          if (color == 1){
            atomicCube.setAttribute('style', 'background-color: rgb(233, 53, 53)')
          }
          else{
            if (color == 2){
            atomicCube.setAttribute('style', 'background-color: rgb(19, 90, 221)')
            }
            else{
              atomicCube.setAttribute('style', 'background-color:black')
            }
          } 
          //Build the atomic-cube faces

          for (let l = 0; l < classes.length; l++) {
            idH1.innerHTML = array[i]
            idH1.classList.add('uk-h2')
            idH1.style.color = "white"
            infop.classList.add('uk-text-small')
            infop.classList.add('uk-text-center')
            infop.style.color = "white"
            
            infop.innerHTML = info[l]
            atomicCube.className = 'atomic-' + classes[l]
            
            atomicCube.appendChild(idH1)
            atomicCube.appendChild(infop)
            document.getElementById(array[i]).appendChild(atomicCube.cloneNode(true))            
          }
        }      
      } 
    }
  }
  for (let el = 0; el < document.querySelectorAll('.atomic-cube').length; el++){
    for(let k = 0; k < document.querySelectorAll('.atomic-cube')[el].childNodes.length; k++){
      document.querySelectorAll('.atomic-cube')[el].childNodes[k].addEventListener('onclick', selectMemo)
    }  
  }
}

function selectMemo(ele){
    console.log(ele)
}
    
var todraw = [62]
initCubes()
buildCubes(todraw)

listaMemo = [
  [
    62,  //this is the id
    1,   //irrelevant
    3,   //this defines wether the cube is external (1), internal (2) or the center (3) of the cube wrapper
    [
      "item-name",               //this are the infos
    "person name and surname",   //this are the infos
    "place name"                 //this are the infos
    ] 
  ],
[84,1,2,["item-name2","person name and surname2","place name2"]]

]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- UIkit CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.6.20/dist/css/uikit.min.css" />
    <!-- UIkit JS -->
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.6.20/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.6.20/dist/js/uikit-icons.min.js"></script>

    <link rel="stylesheet" href="style.css" />
    <script src="main.js" defer></script>
    <title>Document</title>
  </head>
  <body>
    
    <div class="scene">

      <div class="cube">
        
        <div class="layer" id="layer-0">
          
        </div>
        <div class="layer" id="layer-1">

          </div>
          <div class="layer" id="layer-2">

          </div>
          <div class="layer" id="layer-3">

          </div>

          <div class="cube-face layer front" id="layer-4">
          </div>

          <div class="cube-face" id="bottom"></div>
          <div class="cube-face" id="west"></div>
          <div class="cube-face" id="north"></div>

          <div class="cube-face top" id="top">
          </div>
        
          <div class="cube-face right layer">
          </div>        

        </div>
     
      </div>
    </div>

    <div class="radio-group">
      <label>
        <input class="uk-radio" type="radio" name="rotate-cube-side" value="iso" checked/>
        Iso
      </label>

      <label>
        <input class="uk-radio" type="radio"  name="rotate-cube-side" value="front"/>
        Front
      </label>

      <label>
        <input class="uk-radio" type="radio"  name="rotate-cube-side" value="right" />
        Right
      </label>

      <label>
        <input class="uk-radio" type="radio"  name="rotate-cube-side" value="top" />
        Top
      </label>

    </div>
  </body>
</html>

:root{
    --cubeWidth: 500px;
    --atomicWidth: calc(var(--cubeWidth)/5)
}

body, html{
    position: relative;
    margin: 0;
}

.scene{
    width: var(--cubeWidth);
    height: var(--cubeWidth);
    margin: calc(var(--cubeWidth)/2) auto;
    transform-style: preserve-3d;
}

.cube-face{
    position: absolute;
    width: var(--cubeWidth);
    height: var(--cubeWidth);
    text-align: center;
    line-height: var(--cubeWidth);
    font-size: 40px;
    transform-style: preserve-3d;
    border:black 1px solid;
    pointer-events: none;
}

.cube{
    position: absolute;
    width: var(--cubeWidth);
    height: var(--cubeWidth);
    transform-style: preserve-3d;
    transform: translateZ(calc(var(--cubeWidth)/-2));
    transition: transform 1s;
}

.cube.show-iso  {
    transform: translateZ(calc(var(--cubeWidth)/-2)) rotateY(   -45deg) rotateX(-45deg);
}

.cube.show-front  {
    transform: translateZ(calc(var(--cubeWidth)/-2)) rotateY(   0deg);
}

.cube.show-right  {
    transform: translateZ(calc(var(--cubeWidth)/-2)) rotateY( -90deg);
}

.cube.show-north   {
    transform: translateZ(calc(var(--cubeWidth)/-2)) rotateY(-180deg);
}

.cube.show-west   {
    transform: translateZ(calc(var(--cubeWidth)/-2)) rotateY(  90deg);
}

.cube.show-top    {
    transform: translateZ(calc(var(--cubeWidth)/-2)) rotateX( -90deg);
}

.cube.show-bottom {
    transform: translateZ(calc(var(--cubeWidth)/-2)) rotateX(  90deg);
}

#west {
    transform: rotateY(-90deg)  translateZ(calc(var(--cubeWidth)/2));
}

.right{
    transform: rotateY(90deg) translateZ(calc(var(--cubeWidth)/2));
}

#north{
    transform: rotateY(180deg)  translateZ(calc(var(--cubeWidth)/2));
}

.front {
    transform: translateZ(calc(var(--cubeWidth)/2));
}

#bottom{
    transform: rotateX(-90deg)  translateZ(calc(var(--cubeWidth)/2));
}

.top{
    transform: rotateX(90deg)  translateZ(calc(var(--cubeWidth)/2));
}

.radio-group{
}

.scene-background{
    position:absolute;
    width: inherit;
    height: inherit;
    border-radius: 50%;

}

.choose-player-wrapper{
    position:relative;
}

.choose-player-wrapper > div{
    margin: 10px;
}

.atomic-wrapper{
    position: absolute;
    transform-style: preserve-3d;
    top: 0;
    left: 0;
    width: var(--cubeWidth);
    height: var(--cubeWidth);
}

.atomic-cube{
    width: var(--atomicWidth);
    height: var(--atomicWidth);
    transform-style: preserve-3d;
    transform: translateZ(calc(var(--atomicWidth)/-2));
    transition: transform 1s;
    pointer-events: none;
}

.atomic-cube>div{
    position: absolute;
    width: var(--atomicWidth);
    height: var(--atomicWidth);
    text-align: center;
    line-height: var(--atomicWidth);
    font-size: 40px;
    display: block;
}

.atomic-top{
    transform: rotateX(90deg)  translateZ(calc(var(--atomicWidth)/2));
}

.atomic-front {
    transform: translateZ(calc(var(--atomicWidth)/2));
}

.atomic-right{
    transform: rotateY(90deg) translateZ(calc(var(--atomicWidth)/2));
}

.atomic-left {
    transform: rotateY(-90deg)  translateZ(calc(var(--atomicWidth)/2));
}

.atomic-back{
    transform: rotateY(180deg)  translateZ(calc(var(--atomicWidth)/2));
}

.atomic-bottom{
    transform: rotateX(-90deg)  translateZ(calc(var(--atomicWidth)/2));
}

.layer{
    position: absolute;
    width: var(--cubeWidth);
    height: var(--cubeWidth);
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20%;
    grid-auto-flow: row;
    transform-style: preserve-3d;
    pointer-events: none;
}

#layer-3{
    /*background: lightcoral;*/
    transform: rotateY(0) translateZ(calc((var(--cubeWidth)/2) - var(--atomicWidth)));
}

#layer-2{
    /*background: lightcyan;*/
    transform: rotateY(0) translateZ(calc((var(--cubeWidth)/2) - var(--atomicWidth)*2));
}

#layer-1{
    /*background: lightgreen;*/
    transform: rotateY(0) translateZ(calc((var(--cubeWidth)/-2) + var(--atomicWidth)*2));
}

#layer-0{
    /*background: lightyellow;*/
    transform: rotateY(0) translateZ(calc((var(--cubeWidth)/-2) + var(--atomicWidth)));
}