HTML5 Canvas for 3D imported drawing from Catia dassault systemes - javascript

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.

Related

2D canvas library for OpenLayers. Drawing custom interactive objects

I am looking for the 2D canvas library like Konva.js that I can use above OpenLayers 5.x.
I need to draw shapes with font inside that are interactive - can be dragged over the map to the appropriate location and rotated.
On the image below there is how it looks like with Konva.js over the image background.
Can you advise proper libs or techniques so the same can be implemented over the OpenLayers map?

Extruding a shape into 3D geometry in monogame/Xna

I have previously done a project of building a 3D environment that allow user to draw a shape and then extrude it into a 3D geometry (e.g. a circle into a cylinder) using a javascript library Three.js with a function called ExtrudeGeometry().
currently I am building a similar program but on mobile platform using Xamarin and monogame/Xna. Being able to extrude a shape into 3D geometry does make many thing much more easier, however, so far I haven't found a similar function that provides similar functionality. Is there a counterpart of ExtrudeGeometry in Three.js in monogame/Xna? or an alternative way to accomplish same result.

Spinning 3D WebGL Shapes

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/

how create a flag with EaselJS

i find a simple canvas flag, but I have the question of how can I make it with EaselJS?
because in EaselJS documentation don't says about, make another canvas "without DOM interaction", and change pixel positions, but in EaselJS documentation I can't find how make it, and I have some questions:
1 Can i merge EaselJS code with normal Canvas code? Explanation, If I draw an animated North Korean flag star with some textures, can I make the static draw with EaselJS, and animate it with naked canvas code?
2 is possible make it with other library?, such as LimeJS or other libraries
3 I must use a WEBGL Library?, such as Three.js?

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