收藏
回答

XR-FRAME Plane时需要视频始终面相相机的lookAt问题?

const { XRGLTF, GLTF, Animator, Transform, XRLight, Light, XRMesh, Mesh, XRNode, ARTracker, Vector3, Matrix4, Quaternion, Camera, CameraOrbitControl} = wx.getXrFrameSystem();

...
const obj = scene.createElement(XRMesh, { states: 'cullOn:false', geometry: 'plane', material: "videoTransparentTopByBottom", uniforms: `u_baseColorMap:video-animal`, });
const mesh = obj.getComponent(Transform);
const arV4 = Matrix4.lookAt(mesh.position, camera.position, Vector3.Up);
let xx = new Vector3(), m4 = new Matrix4(), zz = new Vector3();
const isDeal = arV4.decomposeTransRotMatScale(xx, m4, zz);
if(isDeal) {
  const quat = Quaternion.createFromMatrix4(m4);
  mesh.quaternion.set(quat);
}


需求是需要这个视频始终面向相机

目前,相机移动过程中,arV4一直是不变

请问下lookAt上的使用问题还是decomposeTransRotMatScale上的问题?

解决思路是对的么


回答关注问题邀请回答
收藏

1 个回答

  • Roam
    Roam
    2023-02-15

    实际上这个没有必要这么复杂。

    如果只需要平行于屏幕,作为相机子节点即可。

    如果需要实现三维世界里面任意一个物体朝向相机可以参考以下代码:

    WXML代码:

    <xr-node id="look" position="0 1 -3">
      <!-- plane 默认是平行于xy轴的,所以需要进行一个旋转调整 -->
      <xr-mesh rotation="-90 0 0" geometry="plane" material="standard-mat" uniforms="u_baseColorFactor:0 0.5 0.5 1"></xr-mesh>
    </xr-node>
    <xr-camera
      id="camera" node-id="camera" position="0 1.6 0" clear-color="0.925 0.925 0.925 1"
      target="mesh-sphere"
      camera-orbit-control=""
    ></xr-camera>
    


    JS脚本:

    methods: {
      handleReady({detail}) {
        const xrScene = this.scene = detail.value;
        console.log('xr-scene', xrScene);
        this.scene.event.add('tick', this.handleTick.bind(this));
        
        this.lookTrs = this.scene.getElementById('look').getComponent(xrSystem.Transform);
        this.cameraTrs = this.scene.getElementById('camera').getComponent(xrSystem.Transform);
      },
      handleTick(dt) {
        if (this.lookTrs) {
          const quaternion = this.lookTrs.quaternion;
          // 算出从物体到相机的向量
          FACING.set(this.cameraTrs.position).sub(this.lookTrs.position, FACING);
          Quaternion.lookRotation(FACING, UP, quaternion);
        }
      },
    }
    
    2023-02-15
    有用
    回复 5
    • One's 大乖
      One's 大乖
      发表于移动端
      2023-02-15
      谢谢哈,我们基于lookat的处理也推导出来了,lookat mesh的父节点逻辑就通了 实际项目mesh和它父节点是挂在了第三方的定位服务提供的节点下的,也就是可能用不了你的这个方法 另外请教下你的js中FACING和UP是怎么来的呢
      2023-02-15
      回复
    • Roam
      Roam
      2023-02-16回复One's 大乖
      可以理解 Facing 和 UP 就是定义的一个公用的 Vector3,Up是 (0, 1, 0)。这样使用的话,就只内存拷贝,去掉了新对象的创建,这样会减少性能损耗与降低GC频率。
      2023-02-16
      回复
    • 甜蜜的微笑
      甜蜜的微笑
      2023-04-20
      我使用上面的方法,但手机移动时,jiantou并没有看向cube,请大佬帮忙看一下,谢谢
      2023-04-20
      回复
    • Roam
      Roam
      2023-04-20回复甜蜜的微笑
      这种方法,节点不要放在相机里面
      2023-04-20
      回复
    • Linbol
      Linbol
      2024-01-20回复甜蜜的微笑
      需要把cube的全局坐标转为局部坐标在套用上面的代码
      2024-01-20
      回复
登录 后发表内容