相机和控制器

<!-- 相机和控制器 -->
<a-entity id="rig" movement-controls="speed: 0.2">
  <a-entity
    id="camera"
    camera
    position="1 1.6 3"
    look-controls
    raycaster="objects: [interactable]"
    cursor="fuse: false; rayOrigin: mouse"
  >
  </a-entity>
</a-entity>

为 box 的每个面设置不同的贴图

<a-box
  position="0 0 0"
  shadow
  interactable
  geometry="depth: 0.1; height: 2.75; width: 2.57"
  map-texture
></a-box>

<script>
  AFRAME.registerComponent("map-texture", {
    init: function () {
      const el = this.el;
      const data = this.data;
      // var scene = this.el.sceneEl.object3D;  // THREE.Scene
      var box = el.getObject3D("mesh"); // 获取three.js mesh对象
      if (box) {
        var materials = []; // 创建一个材质数组，每个面一个材质
        var textures = [
          "/public/white.jpg",
          "/public/white.jpg",
          "/public/white.jpg",
          "/public/white.jpg",
          "/public/003.png",
          "/public/white.jpg",
        ].map((side) => {
          var texture = new THREE.TextureLoader().load(`${side}`); // 加载纹理
          return new THREE.MeshBasicMaterial({
            map: texture,
            side: THREE.DoubleSide,
          }); // 创建基本材质并应用纹理
        });

        materials = textures;
        box.material = materials; // 应用材质数组到几何体上，这将为每个面应用不同的材质
      }
    },
  });
</script>

点击事件

<script>
  // 通用点击处理组件（支持所有物体）
  AFRAME.registerComponent("click-handler", {
    init: function () {
      this.el.addEventListener("click", (evt) => {
        // 获取被点击的物体
        const clickedEl = evt.detail.intersectedEl;

        // 如果有物体被点击且不是场景背景
        if (clickedEl && clickedEl !== this.el.sceneEl) {
          // 获取物体ID，如果没有ID则使用'unamed-object'
          // const objectId = clickedEl.id || 'unnamed-object';

          // // 生成随机颜色
          // const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);

          // // 改变物体颜色
          // clickedEl.setAttribute('color', randomColor);

          // 输出详细日志
          console.log(`物体 ${objectId} 被点击2，新颜色: ${randomColor}`);
          console.log("事件详情:", {
            原始事件: evt,
            点击物体: clickedEl,
            物体ID: objectId,
            新颜色: randomColor,
            时间戳: new Date().toISOString(),
          });
        }
      });
    },
  });
</script>