DASH 创建N个title的mediaPlayer,根据three.js ,如何渲染到球面上?

发布于 2022-09-13 00:44:32 字数 1456 浏览 42 评论 0

目前有一个流mpd,根据其中的title创建N个mediaplayer。
使用three.js,目前可以使用planGeometry,创建3*3的一个平面,渲染单面,根据UV贴图,可以得到完整的,
如6个title的mediaplayer,根据3*3UV贴图得到一个完整的视频:

 var textures = [
        texture1,
        texture2,
        texture3,
        texture4,
        texture5,
        texture6,
        texture7,
        texture8,
        texture9,
      ];
      var geometryfaces = geometry.faces;
      for (let i = 0; i < geometryfaces.length; i++) {
        const faces = geometryfaces[i];
        materials[i] = new THREE.MeshBasicMaterial({
          map: textures[i],
        });
      }

      var faceId = 0;

      var uv = [
        new THREE.Vector2(0, 0),
        new THREE.Vector2(0, 1),
        new THREE.Vector2(1, 1),
        new THREE.Vector2(1, 0),
      ];
      //设纹理坐标
      for (var m = 0; m < geometryfaces.length; m += 2) {
        geometry.faces[m].materialIndex = faceId;
        console.log(geometry.faces);
        geometry.faces[m + 1].materialIndex = faceId;
        geometry.faceVertexUvs[0][m] = [uv[2], uv[3], uv[1]];
        geometry.faceVertexUvs[0][m + 1] = [uv[3], uv[0], uv[1]];
        faceId++;
      }

      var material = new THREE.MeshFaceMaterial(materials);
      var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

渲染出的图VS原本六模块视频图
image.png
image.png

目前怎么用渲染出的图转成或者贴到球面上

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文