# \#video-texture

**URL:** https://discourse.threejs.org/tag/video-texture/50.md

[Latest](https://discourse.threejs.org/latest.md) · [Categories](https://discourse.threejs.org/categories.md) · [Tags](https://discourse.threejs.org/tags.md)

---

## [Peekaboo Video Reveal](https://discourse.threejs.org/t/peekaboo-video-reveal/89429)

<div class="topic-metadata">

**Author:** [@Tibi](https://discourse.threejs.org/u/Tibi)\
**Replies:** 0\
**Last updated:** [January 24, 2026, 8:38pm UTC](https://discourse.threejs.org/t/peekaboo-video-reveal/89429 "2026-01-24T20:38:06Z")

</div>

Click-and-hold to reveal a video from an image with a premium “peekaboo” shader effect. Built in Three.js + GLSL with responsive sizing, flow/swirl distortion, and guided overlays, plus simple settings/GUI controls to tu…

---

## [VideoTexture appearing dark](https://discourse.threejs.org/t/videotexture-appearing-dark/47914)

<div class="topic-metadata">

**Author:** [@darnfish](https://discourse.threejs.org/u/darnfish)\
**Replies:** 7\
**Last updated:** [December 10, 2025, 12:06pm UTC](https://discourse.threejs.org/t/videotexture-appearing-dark/47914 "2025-12-10T12:06:42Z")

</div>

Hey there, I’m trying to use a VideoTexture to show a screen on a glossy surface. Here is my code: const videoTexture = new THREE.VideoTexture(video) videoTexture.format = THREE.RGBAFormat screenMaterial = screenMater…

---

## [Black Video Texture for Chroma Key Video in Safari (Only Happens Intermittently)](https://discourse.threejs.org/t/black-video-texture-for-chroma-key-video-in-safari-only-happens-intermittently/80476)

<div class="topic-metadata">

**Author:** [@nkovitz](https://discourse.threejs.org/u/nkovitz)\
**Replies:** 7\
**Last updated:** [April 28, 2025, 10:34am UTC](https://discourse.threejs.org/t/black-video-texture-for-chroma-key-video-in-safari-only-happens-intermittently/80476 "2025-04-28T10:34:31Z")

</div>

Hello! I’m struggling with an issue that appears to only happen in Safari, and it’s difficult to reproduce consistently. I’m loading one (or more) chroma key videos in our three.js scene, and occasionally the video(s) ge…

---

## [VideoTexture's colorSpace not working on Emissive channel](https://discourse.threejs.org/t/videotextures-colorspace-not-working-on-emissive-channel/72630)

<div class="topic-metadata">

**Author:** [@vis\_prime](https://discourse.threejs.org/u/vis_prime)\
**Replies:** 2\
**Last updated:** [October 22, 2024, 5:23pm UTC](https://discourse.threejs.org/t/videotextures-colorspace-not-working-on-emissive-channel/72630 "2024-10-22T17:23:08Z")

</div>

When a videoTexture is applied on emissiveMap of a MeshStandardMaterial , SRGBColorSpace does not work and it always stays in Linear color space In this demo jsfiddle.net The same VideoTexture and an ImageTexture is ap…

---

## [Create video element in the three.js/editor](https://discourse.threejs.org/t/create-video-element-in-the-three-js-editor/26714)

<div class="topic-metadata">

**Author:** [@shikitos](https://discourse.threejs.org/u/shikitos)\
**Replies:** 11\
**Last updated:** [August 31, 2024, 5:23pm UTC](https://discourse.threejs.org/t/create-video-element-in-the-three-js-editor/26714 "2024-08-31T17:23:53Z")

</div>

I’m trying to add a video element to three.js / editor, but I can’t do it. Is it possible to add a video texture without getting involved in adding new elements to HTML? For example, using a link? let video, videoTextur…

---

## [VideoTexture Stopped playing video and got stuck at a frame. But current time was increasing](https://discourse.threejs.org/t/videotexture-stopped-playing-video-and-got-stuck-at-a-frame-but-current-time-was-increasing/70098)

<div class="topic-metadata">

**Author:** [@Deepak\_Saini\_VT](https://discourse.threejs.org/u/Deepak_Saini_VT)\
**Replies:** 0\
**Last updated:** [August 30, 2024, 12:36pm UTC](https://discourse.threejs.org/t/videotexture-stopped-playing-video-and-got-stuck-at-a-frame-but-current-time-was-increasing/70098 "2024-08-30T12:36:14Z")

</div>

Frames of the video stopped when i switch the tab on mobile device or closed and reopened browser from recent apps. This is noticed in android/ Iphones/ Ipads and other mobile devices also. Is there any way to solve the …

---

## [WebGPURenderer & compressed-texture (.ktx2/ basis)](https://discourse.threejs.org/t/webgpurenderer-compressed-texture-ktx2-basis/69362)

<div class="topic-metadata">

**Author:** [@jakub8745](https://discourse.threejs.org/u/jakub8745)\
**Replies:** 5\
**Last updated:** [August 23, 2024, 1:45pm UTC](https://discourse.threejs.org/t/webgpurenderer-compressed-texture-ktx2-basis/69362 "2024-08-23T13:45:42Z")

</div>

I have tried to migrate from webGL to webGPU but cannot resolve two interesting issues: can I use GPU(!) compressed-texture with WebGPURenderer? how? which format? loader? I tried Ktx2Loader. I use Basis Universal for…

---

## [Colors of video are changing totally when running in mobile](https://discourse.threejs.org/t/colors-of-video-are-changing-totally-when-running-in-mobile/68975)

<div class="topic-metadata">

**Author:** [@Deepak\_Saini\_VT](https://discourse.threejs.org/u/Deepak_Saini_VT)\
**Replies:** 4\
**Last updated:** [August 6, 2024, 5:06am UTC](https://discourse.threejs.org/t/colors-of-video-are-changing-totally-when-running-in-mobile/68975 "2024-08-06T05:06:22Z")

</div>

Colors of my video is completely changing and showing very bright when running the app in mobile, while in PC they are original i.e. more vibrant. PC Image - Mobile View Image - Help me fix this issue (FYI: am …

---

## [Video Element Autoload Complete video](https://discourse.threejs.org/t/video-element-autoload-complete-video/68862)

<div class="topic-metadata">

**Author:** [@Deepak\_Saini\_VT](https://discourse.threejs.org/u/Deepak_Saini_VT)\
**Replies:** 2\
**Last updated:** [August 5, 2024, 9:16am UTC](https://discourse.threejs.org/t/video-element-autoload-complete-video/68862 "2024-08-05T09:16:21Z")

</div>

Am loading a video in threejs and am using video texture for that. Here’s how am doing that. → const UIPopups = new Popups(); const videoElement1 = UIPopups.createVideoElement( "./public/videos/video-intro.mp4", t…

---

## [Point cloud abandoned hospital](https://discourse.threejs.org/t/point-cloud-abandoned-hospital/68441)

<div class="topic-metadata">

**Author:** [@gigadesignstudio](https://discourse.threejs.org/u/gigadesignstudio)\
**Replies:** 0\
**Last updated:** [July 22, 2024, 4:29pm UTC](https://discourse.threejs.org/t/point-cloud-abandoned-hospital/68441 "2024-07-22T16:29:17Z")

</div>

Hey all! We recently published a full digital 3D twin of the exhibition Bid(s) for Survival: The End of Aging, held at KBH.G, Basel and curated by the filmmaker and artist Michael Schindhelm. Experience T…

---

## [VideoTexture stuttered when it played on the android device](https://discourse.threejs.org/t/videotexture-stuttered-when-it-played-on-the-android-device/66448)

<div class="topic-metadata">

**Author:** [@Andy\_Zheng](https://discourse.threejs.org/u/Andy_Zheng)\
**Replies:** 3\
**Last updated:** [June 6, 2024, 3:31pm UTC](https://discourse.threejs.org/t/videotexture-stuttered-when-it-played-on-the-android-device/66448 "2024-06-06T15:31:50Z")

</div>

VideoTexture stuttered when it played on the android device but the sound of video palyed normally. some android device played with dark screen, no picture. I tested it in the browser that came with wechat, also defaul…

---

## [Videotexture can't show the video on ios. but laptop works](https://discourse.threejs.org/t/videotexture-cant-show-the-video-on-ios-but-laptop-works/39758)

<div class="topic-metadata">

**Author:** [@yuansavage](https://discourse.threejs.org/u/yuansavage)\
**Replies:** 4\
**Last updated:** [May 30, 2024, 8:44am UTC](https://discourse.threejs.org/t/videotexture-cant-show-the-video-on-ios-but-laptop-works/39758 "2024-05-30T08:44:15Z")

</div>

Hey everyone, I am trying to embbed the video to the planeGeometry via videoTexture. the original settings like below: const vid = document.createElement("video"); vid.src = "data/test.mp4"; vid.currentTime = 0.1;…

---

## [VideoTexture playback (HTML5 VideoElement) Apple Vision Pro Simulator in VR mode not playing](https://discourse.threejs.org/t/videotexture-playback-html5-videoelement-apple-vision-pro-simulator-in-vr-mode-not-playing/53374)

<div class="topic-metadata">

**Author:** [@ThorstenBux](https://discourse.threejs.org/u/ThorstenBux)\
**Replies:** 16\
**Last updated:** [May 17, 2024, 8:42pm UTC](https://discourse.threejs.org/t/videotexture-playback-html5-videoelement-apple-vision-pro-simulator-in-vr-mode-not-playing/53374 "2024-05-17T20:42:13Z")

</div>

Hi, I’m having trouble playing videos inside a WebXR session on Apple Vision OS simulator. For details please see here: three.js - Video playback (HTML5 VideoElement) Apple Vision Pro Simulator in VR mode not playing - …

---

## [Streaming live video on texture](https://discourse.threejs.org/t/streaming-live-video-on-texture/25460)

<div class="topic-metadata">

**Author:** [@Sinjin\_Hawke](https://discourse.threejs.org/u/Sinjin_Hawke)\
**Replies:** 8\
**Last updated:** [April 26, 2024, 1:13am UTC](https://discourse.threejs.org/t/streaming-live-video-on-texture/25460 "2024-04-26T01:13:54Z")

</div>

I want to map a live video stream onto a plane in three.js. Is there a simple way to do this? So far I’ve only seen HLS-based approaches, which require serving video from your own VPS server. HLS isn’t optimal because …

---

## [Examples of using WebXR to view a flat stereo video in VR?](https://discourse.threejs.org/t/examples-of-using-webxr-to-view-a-flat-stereo-video-in-vr/64612)

<div class="topic-metadata">

**Author:** [@jpm](https://discourse.threejs.org/u/jpm)\
**Replies:** 0\
**Last updated:** [April 25, 2024, 12:27pm UTC](https://discourse.threejs.org/t/examples-of-using-webxr-to-view-a-flat-stereo-video-in-vr/64612 "2024-04-25T12:27:21Z")

</div>

Hi there, does anyone have an example of how to view a flat stereo video in VR with WebXR? I know we have a 180 / 360 degree stereo video here: three.js examples, but curious if there’s one somewhere for flat videos? See…

---

## [Webcam texture is washed out](https://discourse.threejs.org/t/webcam-texture-is-washed-out/53412)

<div class="topic-metadata">

**Author:** [@NicholiNoah](https://discourse.threejs.org/u/NicholiNoah)\
**Replies:** 4\
**Last updated:** [April 4, 2024, 8:24am UTC](https://discourse.threejs.org/t/webcam-texture-is-washed-out/53412 "2024-04-04T08:24:24Z")

</div>

Currently I’m using this three.js example as inspiration for adding a webcam into a 3D environment. I noticed this method renders the video image (or any other source through this method) as much “brighter” and washed ou…

---

## [Using Video Libraries with Three // libmpv?](https://discourse.threejs.org/t/using-video-libraries-with-three-libmpv/60695)

<div class="topic-metadata">

**Author:** [@dtee](https://discourse.threejs.org/u/dtee)\
**Replies:** 1\
**Last updated:** [January 25, 2024, 1:07am UTC](https://discourse.threejs.org/t/using-video-libraries-with-three-libmpv/60695 "2024-01-25T01:07:33Z")

</div>

Does anyone know or have experience with using Three.js and a C library like LIBMPV together for video textures? WHY: html video tag playback leaves a lot to be desired. LIBMPV allows for a lot finer control of playback…

---

## [Webcam input three.js](https://discourse.threejs.org/t/webcam-input-three-js/1500)

<div class="topic-metadata">

**Author:** [@zrama](https://discourse.threejs.org/u/zrama)\
**Replies:** 13\
**Last updated:** [January 9, 2024, 1:03am UTC](https://discourse.threejs.org/t/webcam-input-three-js/1500 "2024-01-09T01:03:01Z")

</div>

Hi there, I’d like to use webcam input for my next project. I’ve seen some examples but is there somewhere a good and clear tutorial or source code that I can look at? So far I’ve not found anything that is helpful for …

---

## [I have an overlay on a video when two chromakey videos are played simultaneously](https://discourse.threejs.org/t/i-have-an-overlay-on-a-video-when-two-chromakey-videos-are-played-simultaneously/59529)

<div class="topic-metadata">

**Author:** [@Dzmitry\_Haiduk](https://discourse.threejs.org/u/Dzmitry_Haiduk)\
**Replies:** 1\
**Last updated:** [December 21, 2023, 7:07pm UTC](https://discourse.threejs.org/t/i-have-an-overlay-on-a-video-when-two-chromakey-videos-are-played-simultaneously/59529 "2023-12-21T19:07:26Z")

</div>

Hi everyone. I have an overlay on a video when two chroma key videos are played simultaneously. I use a standard shader for chromakey. Both planes use the same shader. I’m using a-frame but I’m using a component that ha…

---

## [Adding video texture results in Error](https://discourse.threejs.org/t/adding-video-texture-results-in-error/58520)

<div class="topic-metadata">

**Author:** [@timogd](https://discourse.threejs.org/u/timogd)\
**Replies:** 9\
**Last updated:** [November 27, 2023, 11:43am UTC](https://discourse.threejs.org/t/adding-video-texture-results-in-error/58520 "2023-11-27T11:43:13Z")

</div>

Hey, when I add a video texture to my plane (created in Blender, imported to three.js/editor, exported as gltf) I get an error. The whole project is working with images as texture but as soon as I add a video as texture…

---

## [Videotexture not working on mi browser xiaomi](https://discourse.threejs.org/t/videotexture-not-working-on-mi-browser-xiaomi/56682)

<div class="topic-metadata">

**Author:** [@Anton\_K](https://discourse.threejs.org/u/Anton_K)\
**Replies:** 0\
**Last updated:** [October 5, 2023, 10:24am UTC](https://discourse.threejs.org/t/videotexture-not-working-on-mi-browser-xiaomi/56682 "2023-10-05T10:24:05Z")

</div>

Hello! Video texture does not work on mi browser from xiaomi. If you open the Google Chrome browser, the video texture works. The official three js examples don’t work either. A black screen is displayed instead of the…

---

## [ThreeJS for Seamless Video Player: Not Seamless](https://discourse.threejs.org/t/threejs-for-seamless-video-player-not-seamless/56447)

<div class="topic-metadata">

**Author:** [@dtee](https://discourse.threejs.org/u/dtee)\
**Replies:** 7\
**Last updated:** [September 28, 2023, 11:15pm UTC](https://discourse.threejs.org/t/threejs-for-seamless-video-player-not-seamless/56447 "2023-09-28T23:15:04Z")

</div>

Hello. I’m brand new to ThreeJS and to the forum here. I’ve been running some test to see if ThreeJS will be useful in setting up a web-based seamless video player. The results so far have been really impressive, but I’…

---

## [Shader transparency not honoured after playing video](https://discourse.threejs.org/t/shader-transparency-not-honoured-after-playing-video/35834)

<div class="topic-metadata">

**Author:** [@Arthur](https://discourse.threejs.org/u/Arthur)\
**Replies:** 3\
**Last updated:** [August 12, 2023, 11:49am UTC](https://discourse.threejs.org/t/shader-transparency-not-honoured-after-playing-video/35834 "2023-08-12T11:49:12Z")

</div>

TLDR: after playing a heavy holographic video file (MRCS ) in an 8th Wall / THREE.js app, shader transparency stops working. Hi all, I’m currently working on an AR project using 8th Wall. The project contains 2 hologr…

---

## [Slow fps on high res video when upgrading to 0.152](https://discourse.threejs.org/t/slow-fps-on-high-res-video-when-upgrading-to-0-152/53371)

<div class="topic-metadata">

**Author:** [@jrjdavidson](https://discourse.threejs.org/u/jrjdavidson)\
**Replies:** 2\
**Last updated:** [June 30, 2023, 2:14am UTC](https://discourse.threejs.org/t/slow-fps-on-high-res-video-when-upgrading-to-0-152/53371 "2023-06-30T02:14:57Z")

</div>

Kia ora, I decided to try and upgrade three to a newer version. I found that high resolution 360 videos didn’t play as well as before, with frame rates dropping to below 10 fps. After a bit of trial and error I found …

---

## [Transparency for webm Video texture](https://discourse.threejs.org/t/transparency-for-webm-video-texture/17550)

<div class="topic-metadata">

**Author:** [@milind\_anantwar](https://discourse.threejs.org/u/milind_anantwar)\
**Replies:** 8\
**Last updated:** [May 26, 2023, 2:13pm UTC](https://discourse.threejs.org/t/transparency-for-webm-video-texture/17550 "2023-05-26T14:13:09Z")

</div>

Hi Everyone, I am trying to add a video textured geometry inside the scene. For POC, I am trying to map the texture of plane geometry. Eventually, I would be loading it on other geometries like cylinders. The video is b…

---

## [VideoTexture with TextureLoader possible?](https://discourse.threejs.org/t/videotexture-with-textureloader-possible/25685)

<div class="topic-metadata">

**Author:** [@ilithya](https://discourse.threejs.org/u/ilithya)\
**Replies:** 6\
**Last updated:** [May 8, 2023, 9:50am UTC](https://discourse.threejs.org/t/videotexture-with-textureloader-possible/25685 "2023-05-08T09:50:53Z")

</div>

Hi, Is there a way I can use a VideoTexture with a TextureLoader and LoadingManager? I wanted to hook the loading of several videos into my LoadingManager, like I am doing with GLTF and images as textures.

---

## [How to optimize video performance on a texture](https://discourse.threejs.org/t/how-to-optimize-video-performance-on-a-texture/4707)

<div class="topic-metadata">

**Author:** [@penpineapple](https://discourse.threejs.org/u/penpineapple)\
**Replies:** 6\
**Last updated:** [April 24, 2023, 10:28am UTC](https://discourse.threejs.org/t/how-to-optimize-video-performance-on-a-texture/4707 "2023-04-24T10:28:56Z")

</div>

So im trying to play video on a texture (which is then wrapped in a sphere) and I am seeing issues. The CPU usage is really high. It generally stays around 50% of my CPU. Even the threejs video panorama sample is in th…

---

## [The Living Experience by Panasonic](https://discourse.threejs.org/t/the-living-experience-by-panasonic/45583)

<div class="topic-metadata">

**Author:** [@renaud](https://discourse.threejs.org/u/renaud)\
**Replies:** 2\
**Last updated:** [April 17, 2023, 2:07am UTC](https://discourse.threejs.org/t/the-living-experience-by-panasonic/45583 "2023-04-17T02:07:28Z")

</div>

Hi Threejs forum, we made this immersive website using Threejs as a virtual showroom for Panasonic products. We created the apartment to showcase the 50 products in their real life environment. Let us know what you think…

---

## [VideoTexture currentTime](https://discourse.threejs.org/t/videotexture-currenttime/50084)

<div class="topic-metadata">

**Author:** [@sergey10kambur](https://discourse.threejs.org/u/sergey10kambur)\
**Replies:** 0\
**Last updated:** [April 7, 2023, 8:12am UTC](https://discourse.threejs.org/t/videotexture-currenttime/50084 "2023-04-07T08:12:17Z")

</div>

Hi everyone, I’m trying to imitate negative video playback rate by having a duplicate mesh with VideoTexture that appears and sets it’s video.currentTime and starts playing when user tries to rewind the video. However …

---

## [Video Texture - how to keep video aspect in new material](https://discourse.threejs.org/t/video-texture-how-to-keep-video-aspect-in-new-material/6319)

<div class="topic-metadata">

**Author:** [@Jaudatus](https://discourse.threejs.org/u/Jaudatus)\
**Replies:** 7\
**Last updated:** [March 31, 2023, 6:00pm UTC](https://discourse.threejs.org/t/video-texture-how-to-keep-video-aspect-in-new-material/6319 "2023-03-31T18:00:18Z")

</div>

Hello, I have got a scene that includes a 3D Object of a TV-Screen (the screen is squared): The screen gets a new material that has video texture as map. The video i want to play has an aspect of 16:9. The material …

[Next page](https://discourse.threejs.org/tag/video-texture/50.md?match_all_tags=true&page=1&tags%5B%5D=video-texture)