Aframe的基本使用

# 相机和控制器

<script src="/node_modules/aframe-extras/dist/aframe-extras.min.js"></script>
<!-- 相机和控制器 -->
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 为 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# 点击事件

<script>
  // 通用点击处理组件（支持所有物体）
  AFRAME.registerComponent("click-handler", {
    // 用来设置属性，<a-box click-handler="url: /public/index.html; type: link">
    schema:{
        url: {type:'string', default: ''},
        type: {type:'string', default: ''}
    },
    init: function () {
      this.el.addEventListener("click", (evt) => {
        // 通过this.data获取属性
        const {type, url} = this.data;

        // 获取被点击的物体
        const clickedEl = evt.detail.intersectedEl;
        // 获取物体ID，如果没有ID则使用'unamed-object'
        const objectId = clickedEl.id || 'unnamed-object';

        // 如果有物体被点击且不是场景背景
        if (clickedEl && clickedEl !== this.el.sceneEl) {

          // // 生成随机颜色
          // 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

# 将模型材质换成无光照材质

AFRAME.registerComponent('model-unlit', {
  init() {
    this.el.addEventListener('model-loaded', evt => {
      evt.detail.model.traverse(node => {
        if (node.isMesh && node.material) {
          // 保存原贴图
          const map     = node.material.map;
          const emissiveMap = node.material.emissiveMap;
          // 换成无光照材质
          node.material = new THREE.MeshBasicMaterial({
            map: map || emissiveMap,
            skinning: node.material.skinning,
            morphTargets: node.material.morphTargets,
            transparent: node.material.transparent,
            alphaTest: node.material.alphaTest
          });
        }
      });
    });
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#aframe

上次更新: 2025/08/07, 14:47:37

← puppeteer的基本使用技巧 Webstorm使用技巧→