使用 THREE.VideoTexture(); 时，CylinderGeometry three.js 的“object-fit:cover”之类的东西；

【问题标题】：Something like "object-fit: cover" for CylinderGeometry three.js when using THREE.VideoTexture();使用 THREE.VideoTexture(); 时，CylinderGeometry three.js 的“object-fit:cover”之类的东西；
【发布时间】：2021-01-05 21:43:26
【问题描述】：

我真的很想拥有这样的东西：

方格背景是纹理，罐子是圆柱体，上面有纹理。

我真的不太了解three.js，所以我不确定我必须提供哪些信息。我正在使用 THREE.OrthographicCamera，如果有帮助的话！另外，我必须为此使用 THREE.VideoTexture()。

我最初做了什么：

var material = THREE.MeshBasicMaterial({
//material-related stuff here
   map: new THREE.VideoTexture(video)
});

我得到了什么：

我想要什么（用圆柱体代替球体）：

【问题讨论】：

标签： javascript three.js textures

【解决方案1】：

仅将纹理应用于.map 材质属性有什么问题？

var geom = new THREE.CylinderGeometry(5, 5, 20, 32);
var mat = new THREE.MeshBasicMaterial({
    map: new THREE.TextureLoader().load( "textures/checkered.jpg" )
});
var mesh = new THREE.Mesh(geom, mat);

【讨论】：

顺便说一句，我没有把它放进去，但我正在使用 THREE.VideoTexture()，我将对此进行编辑。当我简单地将 THREE.VideoTexture() 用于 map 参数时，整个纹理将进入图像。
等等，你想使用 VideoTexture 作为背景，并且你想用圆柱体折射那个背景？
是的，我想这就是我的目标
Here's an example 折射，here's a second one。尽管他们使用立方体贴图作为环境贴图来计算折射。我不确定 Three.js 是否可以使用平面背景，但也许您可以将 VideoTexture 设置为 Scene.environment 并查看它是否有效？