I have a model, which is composed of LineSegments. Then this model has two states. I know the coordinates of the points of these two states. How can I realize the animation of these two state transitions in Three.js?
any demo or guidece both are useful,thanks all.
all. I have solved my problem. Because I know the position change of the vertex of the line segment, I choose to redraw the line segment several times to solve this problem. Each time you redraw, you will change the position based on the previous one to achieve the effect of animation. This may not be efficient, but it can solve the problem.
And if you have more solutions, I would appreciate it.
Related
I am displaying a number of different models simultaneously in three.
Some models have the same texture, and it can make it hard to tell where one starts and another ends.
As an example, first image is from my three viewer, second image is from Blender:
It is not obvious in three where the two objects intersect.
I've so far attempted to alter lighting and material settings but have been without success on that front.
I also tried an outline post processing effect but due to what I think is a disorderly output from Sketchup (where the models were made) the outline effect is chaotic:
I am trying to find a good way to clearly delineate between models.
Raycaster from mouse position. De-emphasize the other models' opacity or something. Or if you're serious, you could try the clipping stencil. There's some really good examples for mesh BVH that demonstrates this. https://gkjohnson.github.io/three-mesh-bvh/example/bundle/clippedEdges.html
I created a model in Blender of a block with a hole in it:
I export it as an .obj file, and import it in ThreeJS with the OBJLoader add-on.
When I use it in my app, it appears to draw a face over the sides of the hole:
Is there a setting I need to use in ThreeJS to avoid having it close over gaps like this? Or is the problem in how I'm creating the model? I'm totally lost here, any guidance appreciated.
EDIT: I discovered through trial-and-error that the problem is having irregularly-shaped faces, like the ones adjacent to the hole. I "solved" my problem by triangulating the model; while this changes its shape slightly, it ensures that every vertex in the hole is part of a triangle face, which seems to be the magic answer.
I'm still very curious about why this is, especially since the triangulation has made the corners of the box a bit weird.
EDIT 2: Sorry for the delay. Here's the blender file: https://gofile.io/?c=EoxH1r
The problem you are having is because of ngons (polygons with more than 4 sides).
Modelling for three.js is just like modelling for games, so it is best to avoid polygons with more than 4 sides because when the renderer (or video card, I dunno) tries to render the model, it has to apply triangulation and may do it in an unexpected way.
As you said, applying triangulation to the model fixed the issue, but automatically applying triangulation in your modelling app may also yield unexpected results. So your best bet is to alter the model so you get the results you expect.
Here is a youtube video I found that seems to explain a lot about ngons.
https://www.youtube.com/watch?v=BjnCV2PIkKA
(though I only watched the first minute or so)
Here is an example of how I would do it, red lines representing added edges. Remember to do it all the way around on both sides and apply your smoothing groups before exporting.
I'm learing three.js and I faced a z-fighting problem.
There are two plane object, one is blue and the other is pink.
And I set the positions using the flowing codes:
plane1.position.set(0,0,0.0001);
plane2.position.set(0,0,0);
Is there any solution in three.js to fix all the z-fighting problem in a big scene?
I ask this problem because I'm working on render a BIM(Building Information Model, which is .ifc format) on the web.
And the model itself have so much faces which are so closed to each other. And it cause so much z-fighting problems as you can see:
Is three.js provide this kind of method to solve this problem so that I can handle this z-fighting problem just using a couple of code?
Three.js has given a general solution like this:
var renderer = new THREE.WebGLRenderer({ logarithmicDepthBuffer: true });
The demo is provided also here:
https://threejs.org/examples/webgl_camera_logarithmicdepthbuffer.html
It changes the precision of depth buffer, Which generally could resolve the z-fighting problem in a distance.
At least for the planes on your screenshot, you can solve that problem without switching to the logarithmicDepthBuffer. Try to set depthWrite on the material to false for the planes. Sometimes you also have to override renderOrder for meshes.
There is an example
.depthWrite Whether rendering this material has any effect on the depth buffer. Default is true.
When drawing 2D overlays it can be useful to disable the depth writing in order to layer several things together without creating z-index artifacts.
.renderOrder This value allows the default rendering order of scene graph objects to be overridden although opaque and transparent objects remain sorted independently. When this property is set for an instance of Group, all descendants objects will be sorted and rendered together. Sorting is from lowest to highest renderOrder. Default value is 0.
What is your PerspectiveCamera's zNear and zFar set to. Try a smaller range. Like if you currently have 0.1, 100000 use 1, 1000 or something. See this answer
https://stackoverflow.com/a/21106656/128511
Or consider using a different type of depth buffer
I just stumbled across z-fighting using multiple curved planes with front and backside textures placed along the z-axis of the scene. Even though depthWrite would remove the artifacts, I kinda lost the correct visual placements of my objects in space. Flatshading did the trick for me. With enough segments, the light bouncing is perfectly fine and z-fighting is gone.
When several objects overlap on the same plane, they start to flicker. How do I tell the renderer to put one of the objects in front?
I tried to use .renderDepth, but it only works partly -
see example here: http://liveweave.com/ahTdFQ
Both boxes have the same size and it works as intended. I can change which of the boxes is visible by setting .renderDepth. But if one of the boxes is a bit smaller (say 40,50,50) the contacting layers are flickering and the render depth doesn't work anymore.
How to fix that issue?
When .renderDepth() doesn't work, you have to set the depths yourself.
Moving whole meshes around is indeed not really efficient.
What you are looking for are offsets bound to materials:
material.polygonOffset = true;
material.polygonOffsetFactor = -0.1;
should solve your issue. See update here: http://liveweave.com/syC0L4
Use negative factors to display and positive factors to hide.
Try for starters to reduce the far range on your camera. Try with 1000. Generally speaking, you shouldn't be having overlapping faces in your 3d scene, unless they are treated in a VERY specific way (look up the term 'decal textures'/'decals'). So basically, you have to create depth offsets, and perhaps even pre sort the objects when doing this, which all requires pretty low-level tinkering.
If the far range reduction helps, then you're experiencing a lack of precision (depending on the device). Also look up 'z fighting'
UPDATE
Don't overlap planes.
How do I tell the renderer to put one of the objects in front?
You put one object in front of the other :)
For example if you have a camera at 0,0,0 looking at an object at 0,0,10, if you want another object to be behind the first object put it at 0,0,11 it should work.
UPDATE2
What is z-buffering:
http://en.wikipedia.org/wiki/Z-buffering
http://msdn.microsoft.com/en-us/library/bb976071.aspx
Take note of "floating point in range of 0.0 - 1.0".
What is z-fighting:
http://en.wikipedia.org/wiki/Z-fighting
...have similar values in the z-buffer. It is particularly prevalent with
coplanar polygons, where two faces occupy essentially the same space,
with neither in front. Affected pixels are rendered with fragments
from one polygon or the other arbitrarily, in a manner determined by
the precision of the z-buffer.
"The renderer cannot reposition anything."
I think that this is completely untrue. The renderer can reposition everything, and probably does if it's not shadertoy, or some video filter or something. Every time you move your camera the renderer repositions everything (the camera is actually the only thing that DOES NOT MOVE).
It seems that you are missing some crucial concepts here, i'd start with this:
http://www.opengl-tutorial.org/beginners-tutorials/tutorial-3-matrices/
About the depth offset mentioned:
How this would work, say you want to draw a decal on a surface. You can 'draw' another mesh on this surface - by say, projecting a quad onto it. You want to draw a bullet hole over a concrete wall and end up with two coplanar surfaces - the wall, the bullet hole. You can figure out the depth buffer precision, find the smallest value, and then move the bullet hole mesh by that value towards the camera. The object does not get scaled (you're doing this in NDC which you can visualize as a cube and moving planes back and forth in the smallest possible increment), but does translate in depth direction, ending up in front of the other.
I don't see any flicker. The cube movement in 3D seems to be super-smooth. Can you try in a different computer (may be faster one)? I used Chrome on Macbook Pro.
I am trying to create a simple example with three.js. I have a bunch of triangles making up a volume. It seems triangles are incorrectly ordered -- or rendered in weird order. Here is the example you can see:
http://urlmin.com/qlp
just rotate the view around and see the view flickering.
The behavior is same with canvas or webgl renderer.
Please note that I am not using lights. Each triangle is colored slightly differently.
I must be missing something really simple. Let me know you think. Thanks!
JSFiddle here http://jsfiddle.net/aR8wr/
Your camera NEAR plane is very small and FAR plane very big. This results in less precision in rendering, floating point errors, and thus, flickering. Setting those variables to for example 0.01 and 1000 gets rid of the flickering.
It still looks weird from some angles. I'm not exactly sure what causes it, but it might help if you divide your model into smaller triangles. Alternatively, you can use WebGLRenderer, where it works perfectly as long as you set more sensible values to NEAR and FAR.