3D Geometry Object Library? - javascript

I'm wanting to find a javascript library that will create images of simple 3D shapes like the ones shown below.
The key is that I want to be able to specify certain attributes of the shapes. So, take a cylinder, for example. I'd want to tell the library the radius and the height and have it create the cylinder for me.
Does anyone know of something that can do this?

Related

Create a 3D Object from cross-section by using THREE.JS

I've learned how to create shapes now and I want to take camera location and size information from the user and create a cross-section view.
I want to create a cylinder and get a cross-section. Can you tell me what I should research? where should i start?
I think what you’re looking for is called “clippping” https://threejs.org/examples/?q=clip#webgl_clipping_stencil

Drawing a Cylinder from two Coordinates in 3D Space (three.js)

Heyho,
im relativly new to programming, right now im trying to solve a problem but don't know how and if it's even possible in three.js.
I bet someone can tell me...
My goal is it, to create a cylinder looking like geometry in three.js that draws from one vector3 to another.
I need this to create an 3D dimensionline.
I know three.js provides an arrowhelper but theirs can only draw 2D lines and i need to be able to define the width of the arrow.
Things I tried:
At first i tried to use the basic cylinder geometry of three.js but i
couldn't figure out how to give it a start and end point.
The second idea that came to my mind is the shape (was able to define points)
but i think i only can draw 2d shapes with it.
Can someone help me please?

How can I do a generated image on a website?

I'm trying to figure out how to make a website image, just some little blob of color without actually creating an image and putting an image tag and all of that. Is it possible?
Would I be drawing it with CSS, Javascript, or HTML5? If drawing it on the fly with something like Javascript, is that something that is a good idea? drawing over and over?
Not sure where to start looking? Thanks for any help.
Here is an example of an image I'd like to make: https://dl2.pushbulletusercontent.com/0P1OxQU6AoPT5LnWG3jROJgEmdWoPKUw/image.png
SVG is a good choice. It allows you to use a document structure, much like that of HTML, for vector graphics. The <rect> element makes a rectangle. For more complex shapes like your example, check out paths. More info here: Rounded corner only on one side of svg <rect>
Vector graphics are easy to generate and manipulate programatically. They can also be sized and scaled without pixelation.
If you need complex filtering or want raster graphics instead, a Canvas element and its 2D drawing context are a good choice.

Transform image on canvas based on 4 points

I have a small application that uses Paperjs to render an image between four points.
The user should be able to drag these four points freely.
It would be nice if the image inside automatically transforms into this given tetragon, like on the picture below.
Do you know a library that is able to help me with this job?
Of course Paperjs is able to apply a matrix transformation, but is there a “simpler” solution like:
Image.transform(point1, point2, point3, point4);
Just like this ActionScript demo, but in Javascript with canvas:
http://www.rubenswieringa.com/code/as3/flex/DistortImage/
Thank you!
This d3.js codesnippet did the job for me:
http://bl.ocks.org/mbostock/10571478

WebGL - trying to add thickness to a dynamically generated 3D model (waterproofing for printing)

I am looking for some inputs on, how I can add wall thickness to a 3D model without using softwares like blender.
I am having a 3D model built dynamically using vertices and indexes to build the wall. Now I need to take this model for printing. I need to add wall thickness before I take it for printing.
Is there any library which does that, or a document which explains how to do it?
My thought (which wont work in every case):
If it is a cylinder model, then we can just increase the radius of it and just join the bigger and the smaller cylinders to get a wall thickness. But what if we have a asymmetrical object? this technique wont work here.

Categories