# How to show a video from camera and show a 3d model on top of the video

**URL:** https://discourse.threejs.org/t/how-to-show-a-video-from-camera-and-show-a-3d-model-on-top-of-the-video/68866
**Category:** Questions
**Tags:** video, 3dmodel
**Created:** [August 2, 2024, 12:30pm UTC](https://discourse.threejs.org/t/how-to-show-a-video-from-camera-and-show-a-3d-model-on-top-of-the-video/68866 "2024-08-02T12:30:04Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Sachin\_K1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sachin_k1/32/50409_2.png) [@Sachin\_K1](https://discourse.threejs.org/u/Sachin_K1)
#### Post date: [August 2, 2024, 12:30pm UTC](https://discourse.threejs.org/t/how-to-show-a-video-from-camera-and-show-a-3d-model-on-top-of-the-video/68866/1 "2024-08-02T12:30:05Z")

</div>

Hi,

I would like to display video from a camera and then place a 3D model on top of the video. How can I achieve this?

Thanks & Regards

---

<div class="post-metadata">

### Author: ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)
#### Post date: [August 3, 2024, 7:40pm UTC](https://discourse.threejs.org/t/how-to-show-a-video-from-camera-and-show-a-3d-model-on-top-of-the-video/68866/2 "2024-08-03T19:40:33Z")

</div>

Use two layers:

- bottom layer is `<video>` tag connected to your camera
- top layer is transparent `<canvas>` where you draw the 3D model

The link below is a proof of concept – you should see spinning rhomboids, they are drawn by Three.js; click on the button [Видео] (it means “Video”) to start streaming from the camera to the screen. The browser may ask you for permission to access the camera. If everything is OK, you should see live video from the camera and the rhomboids on to of the video.

[https://boytchev.github.io/CourseVAX/LecturesBG/10/E1009-AR.html](https://boytchev.github.io/CourseVAX/LecturesBG/10/E1009-AR.html)

---

<div class="post-metadata">

### Author: ![Sachin\_K1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sachin_k1/32/50409_2.png) [@Sachin\_K1](https://discourse.threejs.org/u/Sachin_K1)
#### Post date: [August 4, 2024, 4:53am UTC](https://discourse.threejs.org/t/how-to-show-a-video-from-camera-and-show-a-3d-model-on-top-of-the-video/68866/3 "2024-08-04T04:53:47Z")

</div>

Thanks 😀, I understood the concept. _Also can the transparency be avoided only for 3D model not for scene?_

Also may I ask one more thing. I want to convert the Mediapipe facelandmark coordinates (based on screen) to move the 3D model (which use world space coordinates) in Three JS. I could not map the screen coordinates to world space coordinate.

Thanks Again mate !!