Spinning 3D WebGL Shapes - javascript

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/

Related

HTML5 Canvas for 3D imported drawing from Catia dassault systemes

I am looking for a way to insert 3D drawing made with Catia v5 into a HTML5 canvas!
Something that would let me drag the part and rotate it with a zoom in and out. Is there anything like that already out there??
Catia v5 is a software to draw complex part or assembly for planes in my case.

Adding 2D plane to 3D view

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).

3D cube creation and handling events on that cube

I have created multiple 3D Cubes in a HTML5 Canvas .
I was trying to handle a click event on the 3D cube so that i can know which cube got clicked.
To create the cube I used processingJS.
It worked well but was not able to get the Click position.
I read about Paper JS which creates a shape and stores it in a object.
Is it possible to create 3D things with Paper JS.
Or Is there anyway i can get which cube got clicked through ProcessingJS.
please share whether there are any other ways to do this.
Thanks in advance.
Paper.js deals with 2D vector graphics.
While in theory you can represent a cube if you want to, using skewed squares for example, it will take a lot of effort and a lot of time to just create 1 cube.
You are much better of using a 3D library, e.g - Three.js.
Here is an already cooked up example using raycasting to detect the clicks on a side of the cube: http://mrdoob.github.io/three.js/examples/canvas_interactive_cubes.html

How can I render to framebuffer back sides of the cube? (Invisible sides from my point of view?)

I am trying to develop volume rendering in WebGL with Three.js library. I know how to do that in pure WebGL, but i am not able to find any way in Three.js.
So..the problem...
1) How can I draw the back face of boundingbox (i have a cube) to framebuffer? I need draw only invisible sides of the cube.
2) How can I draw front face of boundingbox? (Only frontface)
Thanks a lot :-) I really dont know how to do that in Three.js...is it possible? If it is not possible, i will do it in pure WebGL..but i dont want to mix WebGL and Three.js library..i would like to have clean solution..
Thank your very much :-)
You can select front-face or back-face culling like so:
renderer.setFaceCulling( THREE.CullFaceFront );
renderer.setFaceCulling( THREE.CullFaceBack );
three.js r.55
Solution is:
Set to renderer this:
renderer.setFaceCulling("front");
OR
renderer.setFaceCulling("back");
Thanks for help to WestLangley.

how to make a fog effect or blur effect in canvas with js?

I'm using javascript and THREE.js 3d engine,
and I want to do a fog effect,
here's an example http://mrdoob.github.com/three.js/examples/webgl_geometry_terrain_fog.html
but it only support WebGL,
so is there any way to simulate fog effect, or a blur effect with javascript and canvas?
thanks alot.
Three.js is WebGL. The example you're looking at is created by the same person who made three.js.
Three.js supports fog already with scene.fog.
https://github.com/mrdoob/three.js/wiki/API-Reference#wiki-THREE.Fog
below is for people that searched for fog/blur in Canvas looking for 2D
There are a bunch of places that have implemented various blur effects. The pixastic library has a lot of such effects implemented.
Fog is something different, though. There isn't a universal definition and it really depends on what you're looking for. One way would be to set the globalAlpha of the canvas to something like 0.3 and then draw perlin noise on the locations that you want "fog" to appear. Note that the color gradient of the noise that you most likely want is transparent to dark gray.

Categories