We use three.js to render multiple scenes listed in the order one by one (using setScissorTest(true)) in an Angular app. Currently, I am trying to export the rendered scenes into a PDF using JSPDF. The renderer.domElement.toDataURL is used to export the renderer content into a JPEG stream, which will be added into the PDF.
The contents which are visible on the screen is getting exported into the PDF. But the scenes on the page which can be viewed by scroll down is not available in the dataURL stream. So the resulting PDF misses the objects which are not visible on the screen.
Example -
https://plnkr.co/edit/Ty8BZaDcflCJH5tH (chrome)
I tried approaches like -
Exporting each scene into an image by using a separate webGLRenderer for PDF generation (without scissors test enabled)
Using a hidden canvas for PDF export.
But I am facing issues with the above approaches, is there any way to export multiple scenes of a three.js webGL renderer irrespective of whether the scene is visible in the screen or not?
Thanks in advance,
Satheesh
Related
I'm playing about with three.js and webGL with an attempt to get html objects overlaid on a webGL model.
I intend to use three.js object loaders to render a 3D model, where I can then allow users to overlay HTML DOM objects in 3D space via a custom UI.
I've mainly been using the various different examples in the three.js docs (https://threejs.org/examples/ and https://codepen.io/AdamEDGE/pen/RRjEwz).
In order to allow the user to move the overlaid HTML objects via the UI, I've added the transform controls (https://threejs.org/examples/misc_controls_transform.html).
Things seemed to be going relatively well up to this point, but now I see that the controls are not hoverable or clickable to move the element.
I suspect I'm either missing code or an issue with the camera not aligning correctly, but I'm very new to this so I'm guessing.
I have also experimented with Jerome Etienne's blending tutorials, but on testing that caused other issues and I think may not be worth the trouble for what I'm going for (http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/index.html).
I have created an example that shows the problem (click on an object and the controls should show).
Its a simple webGL torus with two HTML images overlaid and mapped to a Mesh so I can link the controls to the HTML elements which are on a different scene.
https://jsfiddle.net/mattscotty/h5wuq86y/
control = new THREE.TransformControls(camera, glRenderer.domElement);
control.addEventListener('change', render);
The controls show on all the correct places when clicked as expected and I can use the keyboard to change the transform type (again see https://threejs.org/examples/misc_controls_transform.html for how it should work).
As I can't click or hover, I can't hook up to the relevant events.
I'm brand new to this and I'm quite sure I'm missing something obvious, so any help is appreciated.
I'm trying to figure out how to capture an animation that I made in Maya using gravity and and two directional forces to pull an avocado apart. I'm currently using three objects and the animation is working just how I'd like it to. Importing into Three js however has been the issue. Can I capture all of the keyframes all at once? How can I export the keyframes for the aggregate object into three js for a single animation that will be played on a JS event? I've shared a gif of the current animation. Any tips/suggestions welcome.
I've a working 360 video viewer built using Rajawali/Google VR. I'm trying to modify it to display a texture which is the output of a non Rajawali GL program, rather than displaying the StreamingTexture from the video directly (i.e. within onDrawEye I'm using a separate GL program and passing it a texture ID, it's rendering to a framebuffer with an attachment which'll be used as the texture on the sphere).
The problem I am having is that however I manage the textures (either directly with OpenGL, or using Rajawali's texture classes), they are empty within my inner GL program (i.e. black/no output when embedding into a sampler). The only thing that works is if I add the texture to a material on some dummy object visible within the scene - then the texture is available within my separate program - but that's not what I want. I've tried just adding the texture to the TextureManager, but it's insufficient to keep it around. What I'm trying to do is extremely simple and works fine without Rajawali or the GVR machinery.
What's causing even textures I'm generating and managing myself to be compromised? I don't have a minimum failing example, but could put one together with some effort.
I'm new to ThreeJS and I made this example which shows one of our model.
http://petrie3dtesting.museums.ucl.ac.uk/3DFootCover/index.html
I created a Petrie3Dviewer and in the HTML page created a viewer object which takes as input an .obj and .mtl file. Strangely tho, the objects shows up BLACK and then when I start interacting the texture comes up. I tried everything I think: different browsers, making the texture smaller, different computers, nothing I get a random behaviour all the time.
I tried on FIrefox, Chrome mainly.
It seems that I need to force the rendering once the obj file is loaded but the OBJMTLLoader.js does not provide any event for it.
Really many thanks for the help.
Best,
GC
You should call this.DoRender in your Animate function to render the frame.
this.Animate = function() {
this.orbitControls.update();
this.Animate();
requestAnimationFrame(this.Animate.bind(this));
}
At the moment you call your render function only when the user changes the perspective with the OrbitControls. And because your texture is loaded asynchronously it is not ready the first time when you render the frame.
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.