代码之家 › 专栏 › 技术社区 › zakdances

ThreeJS视频纹理需要CORS头,即使<video>标记不需要它

firebase-storage cors three.js video html

zakdances · 技术社区 · 6 年前

我有一个本地主机web服务器,它运行一个页面,在 <video> 标签。视频播放正确。好的,太好了。现在我想用这个视频作为一个纹理在一个3JS画布(使用 THREE.VideoTexture ). 但3rejs没有显示视频,而是开始重复打印

THREE.WebGLState: DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The video element contains cross-origin data, and may not be loaded.

无限循环。

我的视频真的需要CORS头设置只有在一个3ejs画布?如果是,为什么?我该怎么解决?

1 回复 | 直到 6 年前

Quentin 6 年前

我的视频真的需要CORS头设置只有在一个3ejs画布?

对。

如果是,为什么?

当您希望JavaScript从另一个源读取数据时,CORS是必需的(而不是简单地让浏览器在JavaScript不接触数据的情况下呈现数据)。

使用它作为纹理时,需要读取视频数据并使用JavaScript进行处理。

我该怎么解决?

配置要从中提取视频的服务器,以授予您使用CORS的权限,或移动数据,使其位于同一源。

推荐文章

Adam Turaj · 反应三纤维场景背景比原始图像更亮

2 年前

ajai.s · 根据用户偏好改变网络a帧中的化身

2 年前

Burak Ertan · 如何使数组中的向量不改变其值?

2 年前

Yücel Sabah · 三JS-绝对更改加载网格的顶点坐标(扭曲网格)并使用该顶点

2 年前

Jojo · 三js-多元素-webgl

3 年前

Lucho · 三分钟后。js如何将相机添加到glb骨架中的头骨?

3 年前

Zalan Szakacs · 如何导入字符串值(x、y、z)以生成三个几何体。js?

6 年前

JoakimNyland · 使用外部链接将纹理应用于WebGL中的3D模型[已关闭]

6 年前

Brian Dolan · 如何影响三维力图中的链接距离?

6 年前

GAURANG KORANT · 如何使用非平面形状(曲面)的threejs绘制具有三维点(x、y、z)的形状几何体

6 年前