I want to use camera video feed as background in a-frame, while overlaying objects on it. I know it is possible but I don't know how exactly to do it.
so I am here to ask for help!
You can have a simple overlay by adding an element before the scene:
<img src='overlay.jpg' />
<a-scene></a-scene>
fiddle here.
Here is a nice article about using a camera stream, I'll just use a basic version of it:
html
<video autoplay></video>
<a-scene></a-scene>
js
// grab the video element
const video = document.querySelector('video');
// this object needs to be an argument of getUserMedia
const constraints = {
video: true
};
// when you grab the stream - display it on the <video> element
navigator.mediaDevices.getUserMedia(constraints).
then((stream) => {video.srcObject = stream});
Fiddle here.
I took the above example and turned it into a glitch so the demo could be run on a phone. I also modified the aframe example code to look like a basketball game.
https://glitch.com/edit/#!/3dof-ar?path=index.html%3A33%3A33
Related
Wanna achieve result something like this:
I already knows how to playing FBX animation in three.js, but how to simply place a video file in 3D scene like this?
Take a look at the video texture here
https://threejs.org/docs/#api/en/textures/VideoTexture.
By this, You could set the video into a texture and set this texture inside the material.
And you may want to create Video element without getElementId,
And this may help you
Dynamically create a HTML5 video element without it being shown in the page
I have used video texture videoTexture = new THREE.VideoTexture(video); to show video on canvas where video is html element. I want to show loader in video texture untill video gets loaded to play. Cuerently it's shows white screen and then playing video when video get loaded. Is there any way to achieve what i am looking?
Maybe you can do it like this: First, you apply a simple, static placeholder texture to your material that will later be used to display the video. Now it's important to replace this texture at the right time with the video (when the video is ready to play). You can try to use the canplay event in order to detect this situation. After you have obtained a reference to the video element, set the event listener like this:
const video = document.getElementById( 'video' );
video.addEventListener( 'canplay', changeTexture );
three.js R91
I'm working on HTML5 canvas in Adobe Animate CC. Before embedding video I've created click actions and added links and since the video has been added (by Components > Video) all clickable objets stoped to work. Video is playing and slides and all animation is happening except interactive elements. I am feeling that the video is somehow embedded above everything (I have video layer at the very bottom).
Would you be able to help me please? Any advice appreciated
Video isn't part of the canvas, it's DOM element and it's over HTML5 canvas by default. If you'll view Animate's generated HTML code you can see it (video tag in "dom_overlay_container" div).
You need to rearrange your project and keep in mind that you have other DOM elements too in addition to the canvas.
I want to generate the top and perspective view of an object.
Input: A 3d object, maybe .obj or .dae file.
Output: the image files presenting the top and front view of the loaded object.
Here is some expected output:
The perspective view of a chair
The top view of a chair:
Can anyone give me some suggestions to solve this problem? Demo may be preferred
You could create a small three.js scene with your obj or collada-file loaded using the appropriate loaders. (see examples of the specific loaders). Then create the necessary cameras you want to have in the scene. See examples for orthographic and perspective cameras that come with three.js, too.
To produce the images you want, you could use the toDataURL function, see this thread here and use google
Three.js and HTML5 Canvas toDataURL
in essence, after the objects are loaded, you could do something like:
renderer.render(scene, topViewCamera);
dataurl = canvas.toDataURL();
renderer.render(scene, perspectiveCamera);
dataurl2 = canvas.toDataURL();
I think you could also use 2 renderTargets and then use those for output, too, but maybe if you are new to three.js, start with the toDataURL() method from HTML5.
I am wondering if there is any library to enable me to upload big image on website and than create animation.
Animation description:
Show are is smaller let's say 300*300 and image uploaded is 1024*768 and I would like the animation to go around the image, zoom out a little, zoom in, etc.
I hope I was clear enough.
Thanks for answers
This can be easliy done with the jquery function animate:
jquery animate() doc
They have some examples in their documentation. You can either work in a div with "overflow:hidden" and put the image in that div or set is as a background image. animate() allows you to manipulate the css styles. Also, you can append animate() calls.