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?
Related
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 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/
I am supposed to draw a transparent sphere which can be rotated by mouse dragging. I tried to start learning the basis of WebGl but I have not found any appropriate sources. Can anybody help me how to start learning WebGl and also how to draw 3D shapes such as Sphere or tetrahedron and how I can spin it in all dimensions ?
Thanks.
I'd recommend you use three.js but if you really want to learn WebGL start with http://webglfundamentals.org ;)
I would suggest using a framework like three.js that abstracts webGL's functionality, it makes doing things like this a breeze. Check out threejs.org and http://learningthreejs.com/
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.