使用从顶部和底部弯曲的三个js创建视频播放器

Question

这可以创建一个使用three.js的视频播放器，从顶部和底部有一些曲线效果吗？

Curved video player

请参阅我看过视频播放器格式的图片。

Answer 1

是。您可以使用CylinderGeometry使用VideoTexture（开放式，已调整的thetaLength值）执行此操作。 Here is an example用于使用视频纹理。

这样的事情：

function getVideoTexture() {
  // this is assuming you have the video-element somewhere in your dom
  var video = document.querySelector('video');

  return new THREE.VideoTexture(video);
}

scene.add(new THREE.Mesh(
    new THREE.CylinderGeometry(10, 10, 3, 6, 1, true, -Math.PI/4, Math.PI/2),
    new THREE.MeshBasicMaterial({map: getVideoTexture()})
));

Answer 2

最后，我可以使用Three.js创建弯曲的视频播放器。

如果有人需要查看此链接

[Codepen](https://codepen.io/jignesh2290/pen/YaZaEO)