Video background with background image and object rotate

Questions
1

I created the example on this link:
http://noganagarut.com/new/spin/rotate2.html
The questions:

  1. How can I combine the video of the clouds with the background image so the video will replace the clouds on the image?
  2. how make the objects “disappear” after the background image like the building is hide them and make the “reappear” after passing the building?
    I think the image shouldn’t rotate around itself and just move
2

Does it work if you apply an instance of VideoTexture to `Scene.backgroud?

3

Hey,
It show the video but remove the background image and push the objects down.
this is the code for the background
loader = new THREE.TextureLoader();
loader.setCrossOrigin("");

		bgTexture = loader.load("img/house-bg.jpg",
		function ( texture ) {
			var img = texture.image;
			bgWidth= img.width;
			bgHeight = img.height;
		}
		);
		scene.background = bgTexture;
		
		bgTexture.wrapS = THREE.MirroredRepeatWrapping;
		bgTexture.wrapT = THREE.MirroredRepeatWrapping;
		
		var videobg = document.getElementById( 'videoBG' );

		var texturebg = new THREE.VideoTexture( videobg );
		texturebg.minFilter = THREE.LinearFilter;
		texturebg.magFilter = THREE.LinearFilter;
		texturebg.format = THREE.RGBFormat;
					
		scene.background = videobg;
4

Other question is can I move the house from the right and stop it where it position on the image?

5

Can you please demonstrate your current progress as a live example?

6

I have a link if this OK.
http://noganagarut.com/new/spin/‏‏rotate2-movie.html
The video on the top need to be instead of the skies in the background image

7

I would prefer a codepen or fiddle so the code is actually editable.

I don’t think it’s possible with the current assets to blend the moving sky behind the buildings of the texture. Probably easier to make a video that contains all in one.

8

Thanks, that is what I also think, can I create moving clouds with and add them to the background?
(I think the client will back out of the video, it still cost bandwidth)
If I want to rotate the house and the object around it so the objects disappear behind the house and reappear in front of it, using something like solar system will be good?

9

But that does not work if you define the skyline texture as a background. All other 3D objects in your scene will always be in front of it.

10

Thanks for the help.
The client want to have simple background (go it),
make the house come of the right and stop and middle of screen and after the stop the objects will start spinning while the house do not move.
(how I add images the to jsfiddle code if I need? just full path to the images?

11

I always upload them to https://imgur.com/ and then use the HTTPS URL. In this way, you won’t have any security or CORS issues.

12

Thanks I going to try…
I created my first
https://jsfiddle.net/m_studio/vx0u8fmk/6/

I not getting the right result, what is wrong?

What I need to to bring the house from the right, rotate it few times and then stop it and bring the objects rotating it.

Here is a link of what I made
http://noganagarut.com/new/spin/spin-and-rotate.html
it is the same as the jsfiddle

13

(index):42 Uncaught ReferenceError: TweenLite is not defined

It seems you have not included TweenLite.

14

Thanks, How I include it?
It can be download from their site

15

Feel free to use CDN: https://cdnjs.com/libraries/gsap

3 Likes
16

Thanks, I think I missing something, it is still don’t work.
How I see errors?

17

Just open the browser console (part of the dev tools).

18

think I fixed the errors
https://jsfiddle.net/m_studio/vx0u8fmk/29/