I am looking for a way to draw a (poly)line around an object. I have a mesh where I need lines projected on so I can use this for my project.
For example I have this geometry: https://threejs.org/examples/webgl_materials_skin.html
No horizontal around the head. Going over the nose, ears and should be closed. I have thought about raycasting to the center of the object every 1 degree. But this will lose accuracy.
This is a really bad picture but gives the idea, I want to try and get the red line around the geometry as a new polyline:
Is there a way I can get a polyline out of the geometry at a specific height?
Related
I have some issue with threejs. I have a hard object3d which contains sphere, cylinder, circles. These geometric shapes form a complex object. I add this object to scene and and next i add the same but smaller object to the scene.
I can rotate first object, but when a small object goes beyond the borders of a large one, I need to clip it like overflow: hidden in html :-).
I found library "three-csg-ts
" but this library works only with geometry. I tryed use it, It's not correct for me. Because i need rotate this object before i put it on scene.
Maybe somebody can help me?
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?
I have a closed spline in 3D and wish to create a flat mesh according to this spline. The points are in 3D, but are constrained to a plane. Either a completely flat or an extruded one is ok. I understand I need to supply some kind of direction for the mesh to extend in and can provode either two splines and then I want to fill in the hole between those with triangles, or I can provide a normal direction for each point on the spline for the mesh to extend to. How would I go about this, I see there are lots of classes already in THREE.js, but I can't understand how to use these. Should I make my own, and how would I go about that?
I'm having hard times figuring out what's the best way to check if a Object3d is visible for the eyes of the camera.
I'm having a sphere in the middle of the screen. Some cubes are added on it's surface randomly. What I would need is a way to check which cubes are visible (on the front half of the sphere) and which one are invisible (on the back half of the sphere) for the eyes of the camera.
What I have found so far seems to be the right direction - but I must be missing something with the THREE.Raytracer class.
Here is a fiddle of the code that I'm using: jsfiddle. I have tried to make it as clear as possible.
This part of the fiddle might contain the buggy code:
var raycaster = new THREE.Raycaster();
var origin = camera.position, direction, intersects, rayGeometry = new THREE.Geometry(), g;
pointGroup.children.forEach(function(pointMesh) {
direction = pointMesh.position.clone();
// I THINK THIS CALCULATION MIGHT BE WRONG - BUT DON'T KNOW HOW TO CORRECT IT
raycaster.set(origin, direction.sub(origin).normalize());
// if the pointMesh's position is on the back half of the globe, the ray should intersect with globe first and the hit the point as second target - because the cube is hidden behind the bigger sphere object
intersects = raycaster.intersectObject(pointMesh);
// this is always empty - should contain objects that are located on the back of the sphere ...
console.log(intersects);
});
Frustum Culling is not working as outlined in this stack overflow question here: post1
Also this post2 and this post3 are explaining the topic really good but not quite for this situation.
Thank you for you help!
You want to look at Occlusion Culling techniques. Frustum culling works fine and is not what you are describing. Frustum culling just checks if an object (or its bounding box) is inside the camera pyramid. You perform Occlusion culling in addition to Frustum Culling specially when you want to eliminate objects which are occluded by other objects inside the view frustum. But it is not an easy task.
I just worked though a similar problem where I was trying to detect when a point in world space passed out of view of the camera and behind specific objects in the scene. I created a jsfiddle, (see below) for it. When the red "target" passes behind any of the three "walls" a blue line is drawn from the "target" to the camera. I hope this helps.
When rendering box2d bodies with the canvas, there's the big problem that box2d can only gives us the centre of the body and its angle (while the canvas draws shapes like rectangles from the top-left angle). By looking at some tutorials from Seth Land I've bypassed this problem and now works fine (I would never been able to figure out something like this by myself):
g.ctx.save();
g.ctx.translate(b.GetPosition().x*SCALE, b.GetPosition().y*SCALE);
g.ctx.rotate(b.GetAngle());
g.ctx.translate(-(b.GetPosition().x)*SCALE, -(b.GetPosition().y)*SCALE);
g.ctx.strokeRect(b.GetPosition().x*SCALE-30,b.GetPosition().y*SCALE-5,60,10);
g.ctx.restore();
where b is the body, SCALE is the canvas-pixel/box2d-meters converter, 60 and 10 are the dimensions of the rectangle (so 30 and 5 are the half dimensions).
_
The problem
Now, I would like to render this on three.js. First objection is that three.js works in 3d while box2d doesn't. No problem on that: I just want to build a 3d rectangle on top of the 2d one. The 2d axis dimensions must be from box2d while I want the last dimension to be totally arbitrary.
My work doesn't require 3d physics, 2d will be sufficient but I would like to give these 2d objects a thickness in the third dimension. How can I do that?! So far I've been trying like this:
// look from above
camera.position.set(0,1000,0);
camera.rotation.set(-1.5,0,0);
geometry = new THREE.CubeGeometry( 200, 60, 10 , 1,1,1);
// get b as box2d rectangle
loop(){
mesh.rotation.y = -b.GetAngle();
mesh.position.x = b.GetPosition().x*SCALE;
mesh.position.y = -b.GetPosition().y*SCALE;
}
Unfortunately, this doesn't look as the box2d debug draw at all. -1.5 is not the right value to turn the camera of a perfect 90 degree angle (does anyone know the exact value?) and, even worst, the three.js rectangle doesn't follow the box2d movements, having almost the same problems I had with the standard canvas before using context translate and context rotation.
I hope anyone have time to explain a possible solution. Thanks a lot in advance! :)
EDIT: it looks someone did it already
(requires webgl on chrome): http://game.2x.io/
http://serv1.aelag.com:8082/threeBox
The second one are just spheres so no problem on the rotation mapping between box2d and threejs. The first one also includes cubes and rectangles: that what I'm trying to do.
What type of camera are you using?
For getting a "2d" effect you need to use an Orthographic camera, otherwise you will get perspective-projected stuff and things won't match with what you're seeing in 2D.