How to set animated DAE object to specific frame in Papervision - animation

I have a object of type DAE and want to do something like
animatedDae.setFrame(15);
Any ideas how to do that in PaperVision3D

You can transform the frame into time.
theDAEmodel.animation.channel.update(specificTimeNumber);

I ultimately solved this by hacking a setFrame function into PaperVision

Related

How to using three.js show a video file in 3D scene?

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

Three.js GLTFExporter transparency issue

I have a problem with three.js GLTFExporter.
I added a model with a transparent map to the scene.
model in three.js render
but if i use GLTFExporter to export this model, when i use GLTFLoader to load this model,
It doesn't look like what I showed you before(The transparency of the glass is lost.
The effect after export from GLTFExporter
What is known so far is that I used transparent maps for this model,when I export the model, the transparency effect disappears.
Could you please provide me with some solutions?
Thank you for your help. The reason for this problem is that after loading the .3ds model at the front end, I exported it as .gltf file. When loading the .gltf file again, part of the attribute values were lost, for example, alphaMap became null and .transparent became false, so the transparency effect failed.
So far I've solved this problem by modifying the .gltf attribute values:
Set the last item in the array below the GLTF file to 0.1, which represents the transparency of the object
materials.pbrMetallicRoughness.baseColorFactor = [1,1,1, 0.1]

Change the way camera looks at object

Im working on an app which uses THREE js for animations
and have a trouble with the camera
what i need is to change the way camera looks at scene
now it looks from the outside to inside of the scene
i need to change it to opposite, so the camera looks from the center to the border of the scene
is this really possible?
Here is sandbox with my code https://codesandbox.io/s/festive-mahavira-tur31?fontsize=14
Thanks!
Ok, looks like solved.
The thing was that I used camera-controls package to move/rotate camera and that package blocks native camera.lookAt() and uses its own method

How can I create a growing object in WebGL and Three.js and Tween.js

I am new to Three.js and Tween.js.
And I want to create an animation which an object could "grow": like an animation of 3D ball grows into a tube (or the 3D ball been dragged into the tube).
Can this been created by THREE.ExtrudeGeometry and Tween.js? If yes,
can I have some detail explanation or simple steps for this?
I'll be really appreciate for any better ideas. :)
Thank you very much.
Brs,
Bryan
If all your looking to do is alter the size of an object that can be accomplished by adjusting it's scale.
objectsName.scale.set( xValue, yValue, zValue );
However based on your description it seems like your looking to morph your object. There's a great example of how this can be accomplished located at threejs.org.
http://threejs.org/examples/#webgl_morphtargets
I hope this helps.

How to generate the top and perspective view of an object using ThreeJS?

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.

Resources