最近做一个项目，需要用H5展示unity中放置的3D模型，过程是：用户在unityproject组装一个场景，在unity中记录用户使用的3D模型，以及每个模型的位置值，缩放值，旋转值，然后通过H5端还原场景，其中使用了three.js(以下简称三）。过程很痛苦，这里就不赘述了。遇到的主要问题是：1.当三个camera的位置和unitycamera的位置一致时，three中的x坐标与unity中的x相反。比如在unity中传递的坐标是(1,1,1)，那么如果模型位置设置为(1,1,1)三中，则模型的表现与y上的模型inunity镜像axis,并且三中的位置必须设置为(-1,1,1)。2.unity中的旋转是四元数旋转。当然three中也有四元数旋转，但是unity中如果直接给四元数值赋旋转值，旋转就直接飞了。解决方法：1.第一点比较容易解决。设置位置值时只需反转x：object.position.set(unityPosition.x*-1,unityPosition.y*1,unityPosition.z*1);2。第二点比较复杂。多方排查发现是坐标系不同造成的。unity是右手坐标系，而three是左手坐标系。要在unity中执行与模型相同的操作，需要更改坐标系：//右手坐标系为左手坐标系letpq=newTHREE.Quaternion(unityRotation.x*-1,unityRotation.y*1,unityRotation.z*1,unityRotation.w*-1);让pv=newTHREE.Euler();pv.setFromQuaternion(pq);pv.y+=Math.PI;//Y为180度offpv.z*=-1;//翻转Zobject.rotation.copy(pv);多于。
