Video as material - Soft8Soft

This topic has 24 replies, 11 voices, and was last updated 4 years, 2 months ago by Yuri Kovelenov.

Viewing 15 posts - 1 through 15 (of 25 total)

1 2 →

Author

Posts
2019-04-03 at 6:57 am #13526

Emma
Customer

Hi at all,

There’s a way (tutorial , example, demo or …) to assigne video as material like example to have a tv in a room ?

Emma

2019-04-03 at 8:29 am #13532
zjbcool
Customer
1.create a new app

2.copy the code to .html
```
<video id=“video” autoplay=“autoplay” loop=“loop” width=“300” height=“150”>
    <source src=“sintel.mp4” type=“video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;” />
    <source src=“sintel.ogv” type=“video/ogg; codecs=&quot;theora, vorbis&quot;” />
<video>
```
3.copy the code to .js file
```
function runCode(app) {
    // 复制下面的代码到runCode下面
    var screen, video, texture, material
    video =document.getElementById(“video”);
    screen = app.scene.getObjectByName(“screen”);
    texture = new v3d.VideoTexture(video);
    texture.minFilter = v3d.LinearFilter;
    texture.format = v3d.RGBFormat;
    material = new v3d.MeshBasicMaterial({map : texture});
    screen.material = material;
    app.animate();
}
```
4.result.

sorry my poor English.

https://zjbcool.com/ | Gumroad | Twitter | YouTube | Bilibili
2019-04-03 at 10:05 am #13537

Emma
Customer

Hi zjbcool,

I’ve already read your page (https://zjbcool.com/video-texture.html), but ( I’m not programmer ) I don’t understand How to replace material to video .

Have you an easy demo ?

Best
Emma

2019-04-03 at 4:46 pm #13573
Emma
Customer
Hi,

I’ve create new project named “video”, in Blender 2.79, I’ve video.blend where there’s only a plane called screen and other parameters called always screen (see attachments).
In body of file video.html I wrote
```
<video id=“video” autoplay=“autoplay” loop=“loop” width=“300” height=“150”>
    <source src=“sintel.mp4” type=“video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;” />
    <source src=“sintel.ogv” type=“video/ogg; codecs=&quot;theora, vorbis&quot;” />
<video>
```
and in file video.js I wrote
```
function runCode(app) {
    // 复制下面的代码到runCode下面
    var screen, video, texture, material
    video =document.getElementById(“video”);
    screen = app.scene.getObjectByName(“screen”);
    texture = new v3d.VideoTexture(video);
    texture.minFilter = v3d.LinearFilter;
    texture.format = v3d.RGBFormat;
    material = new v3d.MeshBasicMaterial({map : texture});
    screen.material = material;
    app.animate();
}
```
but at the end I’ve only white page .

I don’t know where I’m wrong

Emma
2019-04-03 at 9:38 pm #13587

zjbcool
Customer

As far as I know,It is only by code.
do you have a video file like sintel.mp4？You should place ‘sintel.mp4’ with your own video file in the .html.
And here is an example file, hope to help you.

https://zjbcool.com/ | Gumroad | Twitter | YouTube | Bilibili

2019-04-04 at 8:10 am #13596

Emma
Customer

Thanks Perfect !!!,

I don’t know why, in past I follow your step but don’t worked.

Now It’s working !!

However thanks for your help zjbcool!

Emma

2019-04-04 at 8:30 am #13598

zjbcool
Customer

Glad to hear that!

https://zjbcool.com/ | Gumroad | Twitter | YouTube | Bilibili

2019-04-11 at 8:49 am #13783

Yuri Kovelenov
Staff

Glad you found a solution!

@zjbcool Thanks for helping out!

Chief 3D Verger | LinkedIn | Twitter

2019-06-22 at 11:44 am #15804

Philip Fong
Customer

Awsome! Thank you very much!!!

2019-06-24 at 1:08 pm #15824

Philip Fong
Customer

Unfortunately Chrome browser always have issue with autoplay video, the interactive will behave abnormal. Worked on Firefox.

2019-06-24 at 5:56 pm #15829

Crunch
Customer

I have been messing around with getting video into my scenes and so far I think you might have to have the ‘muted’ flag added to the html to get the video to autoplay.. of course, the video then plays, but no sound.

Example:
<video id=”video” autoplay loop muted>

Fyi The sample video zjbcool used, starts with a black frame. So when I saw black, I figured I did something wrong and nothing was displaying, when in fact, it was just freezed on the first frame, which was black.

I have a cold beer for anyone who can figure out how to add a video texture that allows the alpha channel so the background is transparent.

Here is an article I am trying to digest right now on a related concept. Viewer discretion suggested 😊

Transparent video texture in three.js

2019-06-26 at 9:42 am #15851

Philip Fong
Customer

How to add a click object to play the video? if possible would be good enough. Thanks.

2020-04-16 at 8:31 pm #25948

Xen Wildman
Customer

The moment I add this to my js file it kills the app and it won’t load anymore. Can someone provide an updated example of a video material?

Verge3d devs, it would be prudent to have this as an example project included with Verge3d or a puzzle to plug videos in to the application.

2020-04-17 at 6:43 am #25967

Yuri Kovelenov
Staff

I think we’ll make a puzzle for that

Chief 3D Verger | LinkedIn | Twitter

2020-04-29 at 5:59 pm #26935

groock
Participant

Hi thanks for this, it would be great if we could see the example file again, very close to fixing a problem with this video and would be interested in checking it out, thanks

Groock
Author

Posts