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上的问题?
解决思路是对的么
实际上这个没有必要这么复杂。
如果只需要平行于屏幕,作为相机子节点即可。
如果需要实现三维世界里面任意一个物体朝向相机可以参考以下代码:
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); } }, }