I haven't been able to find an example on how to do this. I've achieved what I want to accomplish using WebGL, and now I'm making a CSS3D fallback. The method I used in WebGL won't work because CSS3D can't handle meshes.
So is there a way to render a panorama in CSS3D using a single panoramic image instead of a cubemap?
Try skydome instead, it do not need more than one image. But still must be processed for a cube wrapping.
http://www.ianww.com/2014/02/17/making-a-skydome-in-three-dot-js/
Related
I wonder if there is an easy way to do perspective transformation/distort/skewing to a simple plane (or even 3D object) in three.js? Preferably the mouse controls?
Something like in this example: jsfiddle.net/rjw57/A6Pgy/ except in three.js - fiddle is built directly in WebGL.
Otherwise, any idea how to reach the similar result?
I have a 3D scene and I would like to add a 2D plane to the scene where I could add buttons. I could do this with 3D plane, but I can't figure out how to make camera ignore the perspective of it. Any suggestions how can I accomplish this? Thanks!
If you want to do it quickly just use an absolute positioned div.
If you need more advanced GUI features, like marcel wrote, just use dat.gui. It is fairly responsive and many Three.js examples are using it (controls often on the upper right side of the screen).
I'm actually trying to include a .jpg image into my 3D scene. All solutions i have found consisted in apply those images on meshes as texture : but then the scene does not look like well. Indeed, we can see the mesh border whether it be a plane or sphere... I just want to see the image. Does exist it another solution ?
On my application, i want to rotate an airplane around the earth, and the problem is about including this airplane.
Thanks for your help :)
Perhaps the class THREE.Sprite will accomplish the effect you want. THREE.Sprite can display an image, and can use either screen coordinates (e.g. canvas coordinates) or it can be part of your 3D scene, but a sprite image is always facing the camera. If you want the image to rotate, you do need to use it as a texture on a mesh. Whatever you decide to do in the end, I've posted a bunch of tutorial-style examples at http://stemkoski.github.io/Three.js/ that may help. Good luck!
I saw a picture mapped to a cylinder in CSS3 and I was wondering if this is possible with a text. Even better would be to map the text to a sphere. If it is not possible with pure CSS, Javascript could be an option.
It must run on all major browsers, also those not having the -webkit- stuff.
Thanks in advance.
As mentioned in the comments CSS3 only supports rotating and skewing elements, and doesn't have any support for spheres.
Although you can fake a sphere in SVG using something like Raphael.js, i don't think there's any real support for doing 3D stuff using Vector graphics. You'd have to map/wrap/skew the text yourself using some crazy math, and it still might not even be possible.
I think your only real hope is to use something like three.js to create an actual cube object. Then you could write your text to a hidden canvas element to get an image of the text, and map the image onto the cube as a material, as in this example.
Can anybody help me with three.js?
I need to draw background, something, like a THREE.Sprite, but it neet to be UNDER any 3d object, that will draw later. I have a camera, that can be move only on Z axis.
I tryed to use:
cube mapping shader - PROBLEM: artefacts with shadow planes, it's unstable draw
THREE.Sprite that dublicate camera moving - PROBLEM: artefacts with shadow plane - it have a edge highlighting OR drawing only other spirtes without objects.
HTML DOM Background - PROBLEM: big and ugly aliasing in models.
What can I try more? Thanks!
You could maybe try drawing in several passes, i.e. making a first render of the background scene to a buffer, and then a second one over the first "buffer". Maybe using the buffer as background (painting it in 2D with an orthographic projection, and disabling depth buffer writes in that pass).
I haven't tried it myself with three.js, but that's how I'd do that with "traditional" OpenGL.
If you want a "3d" background i.e. something that will follow the rotation of your camera, but not react to the movement (be infinitely far), then the only way to do it is with a cubemap.
The other solution is a environment dome - a fully 3d object.
If you want a static background, then you should be able todo just a html background, i'm not sure why this would fail and what 'aliasing in models' you are talking about.