最近动手一个我的项目,须要将在unity内摆放好的3D模型用H5体现进去,过程为:
用户在unity我的项目内将一个场景拼装好,unity内记录用户所用的3D模型,以及个模型的地位值、缩放值、旋转值,而后由H5端将场景还原,H5端用的是three.js(上面简称three)。
过程及其苦楚,这里就不赘述了,遇到的次要问题就是:
1.在three相机地位与unity相机地位统一的状况下,体现为three中x坐标与unity中x是反的,比如说unity传过来的坐标是(1,1,1),那么在three中将模型地位设置为(1,1,1)的话,模型的体现是与unity中的模型为y轴镜像的,在three中地位必须设置为(-1,1,1)。
2.unity中旋转为四元数旋转,当然在three中也有四元数旋转,然而间接将旋转值赋值为unity中的四元数值的话,旋转就间接转飞了。
解决方案:
1.第一点比拟好解决,在设置position值时将x取反就能够了:
object.position.set(unityPosition.x * -1, unityPosition.y * 1, unityPosition.z * 1);
2.第二点就比较复杂了,多方查探发现是坐标系差别导致的,unity为右手坐标系,three则为左手坐标系,要与unity中模型体现一样则须要转坐标系:
//右手坐标系转左手坐标系let pq = new THREE.Quaternion(unityRotation.x * -1, unityRotation.y * 1, unityRotation.z * 1, unityRotation.w * -1);let pv = new THREE.Euler();pv.setFromQuaternion(pq);pv.y += Math.PI; // Y is 180 degrees offpv.z *= -1; // flip Zobject.rotation.copy(pv);
以上。