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
Related
I'm trying to export a VR scene made with a-frame (three.js-based VR library) into a 360° video.
All I could find was a way to export the canvas to a regular flat mpeg4 using a chrome plugin (RenderCan). I would like it to be a video that could be watched from any angle though.
Is there a way e.g. to snapshot every frame to an equirectangular image or something?
You can make equirectangular screenshot of aframe scene by doing
document.querySelector('a-scene').components.screenshot.getCanvas('equirectangular');
or normal perspective screenshot of what you're looking with
document.querySelector('a-scene').components.screenshot.capture('perspective');
Maybe you can try to make some screenshot and make a sort of gif
I am using CanvasRenderer to render numerous Sprite objects. I am mapping a texture (PNG image) to the Sprites. I'd like to be able to change the color of the texture programmatically.
With the WebGLRenderer, I can use ParticleSystem and ParticleSystemMaterial to achieve this. Here's a live demo of setting color to this texture (http://wxalert.info/private/dv/ball.png) with that technique: http://wxalert.info/private/dv/demo.html
But since CanvasRenderer does not support ParticleSystem, I am using Sprites instead with a SpriteBasicMaterial. Here's a live demo of this: http://wxalert.info/private/dv/demo2.html
I'd like to be able to set the color with CanvasRenderer just like with WebGLRenderer, but I'm not sure if this is possible.
One thought was perhaps to load the image to an HTML5 canvas element, apply the color there, and then load the canvas context from the material. But any other suggestions would be greatly appreciated.
UPDATE: Here's an example of kind of what I was thinking of doing if using the HTML5 canvas: http://wxalert.info/private/dv/html5canvas.html. Basically, I would do the color manipulation there and then just load the canvas from the material. But wasn't sure if there was a simpler or better way.
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 trying to create a cube using three.js for a project. I need to add text to vertices and at different points inside the cube. Any idea how this can be done?
For some basic code examples of using Sprite objects in Three.js, check out:
http://stemkoski.github.com/Three.js/Sprites.html
And for an easy way to create images that contain text to use as your sprite textures, check out the sample code at:
http://stemkoski.github.com/Three.js/Texture-From-Canvas.html
I think a combination of these two ideas will achieve what you are looking to do.
If you want to have label-style texts, so that the text begins at a specific point, but is always oriented with the camera and easily readable no matter the camera position, you can use sprites. (example of canvas-created text label sprites: http://i.imgur.com/e9I68xD.jpg - here they are rendered on a separate pass to that they are never obscured by the scene but you can do it on the same pass)
If that's what you are looking for, I'd suggest first checking the Sprites examples, and learn to attach some static image as a sprite to correct position in the scene. After you get that working, you modify the code so that you generate the text to an image canvas using standard Javascript Canvas functions, and using that image as the sprite.
What is the correct process for creating model in Blender and playing it in three.js?
Talking about skeletal animation. What to export, and which functions to call in order to play the animation on three.js. Also how should a trivial JSON exported file look like in order to work in three.js.
How exactly should a pipeline look like for correct results?
When exporting your animated model, you need to have "Skinning", "Bones" and "Skeletal animation" options checked in the exporter. The resulting json file should contain, among other things, non-empty skinWeights, bones and animation properties, like in this file: http://mrdoob.github.com/three.js/examples/obj/buffalo/buffalo.js
For playing the animation with Three.js, start with this example: http://mrdoob.github.com/three.js/examples/webgl_animation_skinning.html (available in the three.js source package).