3D cube creation and handling events on that cube - javascript

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

Related

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 does threejs place a mesh into the scene without any coordinates given?

I have began to create a personal project by using threejs and I would like someone to explain how threejs add method works when adding to the scene.
For example, from a small example, a scene is defined and a camera is created while specifying the near and far plane from the units 0.1 to 1000. That is all that is defined into the world and the mesh is added into the scene by calling scene.add(cube).
How is the cube added into the scene without any coordinates given?
On this note, does anybody have a good link to explain the coordinate systems used for threejs/opengl? Many thanks.
When it comes to dipping the toe into the pool of threejs, a few resources that I found helpful getting started were https://discoverthreejs.com/book/first-steps/first-scene/ and https://threejs.org/docs/#api/en/core/Object3D.
In the case of the latter, https://threejs.org/docs/#api/en/core/Object3D.position specifies the defaults when placing an object into the scene.
Hope this helps.

How can I convert a 2D image into sketch matrix like autocad image using JS

I am working on some project basically for the real estate and kind of stuck in some feature where I need some help.
I have a 3D scene ready using three JS and rendered on screen, but sometimes the user wants to see in 2D and sometimes in wireframe.
see images below
one way to do is to keep the camera at top of the 3D view and make model wireframe true.
but I am looking for the alternate way to convert a 2D image of top view into the structure like above. Is there any library or method that can help in solving this.
Thanks

Changing geometry/material of mesh with distance

I'm making a game with three.js in which an mesh will be rendered in greater detail as the player gets closer (i.e different geometry and material). This seems like it would be a common requirement in open world type games, and I was wondering what standard procedure is in three.js
It looks like changing the geometry of a mesh is quite computationally costly, so should I just store a different mesh for each distance, or is there an existing data structure for this purpose?
You want to use level-of-detail (LOD) modeling.
There is an example of that in the following three.js example: http://threejs.org/examples/webgl_lod.html
In the example, press the 'W/S' keys to see the effect.
three.js r.62

Background with three.js

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.

Categories