当前位置：首页 > news >正文

xr-frame 用cube代替线段实现两点间的连线

news 来源：原创 2025/6/18 3:48:58

前置数据

     // 方向向量
      const forward = xr.Vector3.createFromNumber(0,0,0);
     // 上方向
      const up =  xr.Vector3.createFromNumber(0, 1, 0);
     // 方向四元数
      const useQuaternion = xr.Quaternion.createFromNumber(0, 0, 0, 0);
     // standard材质
      const effectStandard = scene.assets.getAsset('effect', 'standard');
     // cube资源
      const geometryLine = scene.assets.getAsset('geometry', 'cube');

获取两点的世界坐标

const preCubeTrs = this.scene.getElementById('pre').getComponent('transform')    
const cubeTrs= this.scene.getElementById('cur').getComponent('transform')                  
const preWorldPosition = preCubeTrs.worldPosition;
const worldPosition = cubeTrs.worldPosition;

算两点间中点的位置

            // 算中点
            const posX = (preWorldPosition.x + worldPosition.x) / 2
            const posY = (preWorldPosition.y + worldPosition.y) / 2
            const posZ = (preWorldPosition.z + worldPosition.z) / 2

计算方向向量

            // forwad 向量
            preWorldPosition.sub(worldPosition, forward);

方向应用到四元数（由forward方向生成四元数）

            // 方向四元数
            xr.Quaternion.lookRotation(forward, up, useQuaternion);
            console.log(useQuaternion.x, useQuaternion.y, useQuaternion.z, useQuaternion.w)

计算向量的模，即两点间的距离

            // 向量的模
            const module = preWorldPosition.distanceTo(worldPosition);

绘制线，在中点位置放置一个cube，其xy长度自定义，z取模长，再应用到方向四元数，就可以成功的把cube连接到两个点

            const lineSize = 0.02;
            // line
            const lineEle = scene.createElement(xr.XRNode, {
              position: `${posX} ${posY} ${posZ}`,
              scale: `${lineSize} ${lineSize} ${module}`
            });
            // 加到场上
            root.addChild(lineEle);
            const lineTrs = lineEle.getComponent(xr.Transform);
            lineTrs.quaternion.x = useQuaternion.x;
            lineTrs.quaternion.y = useQuaternion.y;
            lineTrs.quaternion.z = useQuaternion.z;
            lineTrs.quaternion.w = useQuaternion.w;

            const matLine = scene.createMaterial(effectStandard);
            const color2 = colorPattern2[Math.floor(Math.random() * colorPattern2.length)];

            matLine.setVector('u_baseColorFactor', xr.Vector4.createFromNumber(color2[0], color2[1], color2[2], 1.0));
            matLine.setRenderState('cullFace', xr.ECullMode.FRONT);
            const meshLine = lineEle.addComponent(xr.Mesh, {
              geometry: geometryLine,
              material: matLine,
            });