Trying to create a number of circle/ring segments using Three.JS and the CanvasRenderer.
Example using THREE.Shape and THREE.ShapeGeometry here: http://jsfiddle.net/25U8E/1/
The triangulation looks wrong to me and when I tried to move the vertices by directly modifying geometry.vertices[n].x etc. the THREE.Shape I am using degrades and becomes less smooth.
Is there a better way to create a sector - one that allows me to modify the vertices afterwards?
Not sure if this is the Stackoverflow-y thing to do but here goes:
The right way to create a ring sector like I need is to use the RingGeometry class like this:
THREE.RingGeometry( 150, 300, 16, 2, 0, Math.PI / 4 );
It does contain a bug that means some of the verts are wrong - illustrated here: http://jsfiddle.net/NWJQk/ - as it spins, you'll see the back side is wrong.
That fiddle references the URL for the latest version of Three.JS so if it starts working, it means the bug was fixed and released.
Edit: Clearer illustration of what's failing using wireframe: http://jsfiddle.net/NWJQk/3/
Related
I am trying to make an animation that will fill a tube with liquid and then start moving the liquid inside. I am using an SVG with 3 main paths, the first one is liquid with short height, which then I morph to become the liquid with long height, then I want to "repeat" the morph between the other 2 paths to make it look like the liquid is moving, however when i move from one path to the other using morphSVG, I can't go back to the previous path, so my other morphSVG statement isn't executed.
Here's link to my code:
https://codepen.io/BrittanyR/pen/rJvOyX
As can be seen, I am able to move from one path to the other using:
TweenMax.to("#redSecondary", 2, {morphSVG: "#redPrimary", delay: 2})
But I can't then use this: TweenMax.to("#redPrimary", 2, {morphSVG: "#redSecondary"})
Any idea will be helpful.
Thanks.
It seems like it was just a logic issue in your code - your setTimeout() was alternating between animating #redPrimary and #redSecondary (targets), but you never changed what they were animating TO. So it worked the first time...and that's it. Every subsequent call was just duplicating the exact same movement (tweening to the current values...thus no motion).
I wonder if this is what you were looking for: https://codepen.io/GreenSock/pen/gvzMLG?editors=0010
Note: as a convenience, MorphSVGPlugin automatically records the original path data for the element so that if you ever want to animate back to it (like to("#redPrimary", 2, {morphSVG:"#redPrimary"}), it knows to grab that. It's all automatic :)
So if you want to repeatedly bounce between those morphs, a simple TimelineMax is probably the easiest way. Get rid of all that setTimeout() stuff and just do this:
var tl = new TimelineMax({repeat:-1, delay:2});
tl.to("#redPrimary", 2, {morphSVG:"#redSecondary", ease:Power1.easeInOut})
.to("#redPrimary", 2, {morphSVG:"#redPrimary", ease:Power1.easeInOut});
Does that help? I'm not entirely sure that I understood your goal properly with the animation, but hopefully this nudges you in the right direction.
Happy tweening!
I am using r82.
I have a mesh with multiple materials. I can change their opacity just fine, but how they are rendered is what I would call "splotchy". I have been using ThreeJs for a while, and EDIT: was able to get the transparency working in a past version (r67) with the same model in a significantly more consistent way. So I was wondering if there is something that now I need to set that I didn't need to set before or if I am just overlooking something. Upon revisiting my older code and testing it again, I found that the same transparency issues were present. It was simply a matter of there not being as obvious "splotches" (and not testing enough, I'm sure). Here is a screenshot.
Here are a few more pictures I took that highlight the issue a bit better. I have the outside wall in a light grey and the floors a dark grey in the model and can toggle the outside walls to be visible or not. In these pictures I have one face of the outside wall purple and a face of the floor in the room on the other side of the wall green.
Based on the angle of the camera, it makes part of the green floor face invisible even though there is only one face between the camera and it.
The materials are all double sided already and there is no sign of this until the transparency is on. I found a similar question that suggested changing the mesh.setFaceCulling (or something similar) but that seemed to be from an older version and wasn't in r82.
Thanks for any help in advance!
EDIT:
I started looking into the old version of threeJS and the current version's source code to see what is done differently regarding transparency. I found transparentObjects, which is an array of the objects (I believe faces) that are going to be rendered and are in sorted based on "reversePainterSortStable". There is another list of objects (I believe for the materials objects, maybe?) called opaqueObjects that uses "painterSortStable". So to see if changing the sort order would change the outcome of how things are looking when transparent I changed it so that transparentObjects got sorted by "painterSortStable" and it did change how things showed up significantly (granted it didn't fix my problem since it just removed some problem spots and created new ones).
So the short version, it looks like it is an issue with the renderOrder of the faces.
That being said, I tried finding how the r67 version of the code handled the "renderOrder" of the faces since it wasn't something that (to my knowledge) could be set in that version and just did it automatically. But I have had no such luck tracking down how it was done as of yet.
So I see two possibilities. 1) find out how the past version correctly did transparency (at least for my purposes) and change the logic in the current version to use that. Or 2) find how to properly set the renderOrder of the faces based on the camera position in the scene. Will look into the second option first, but figured it would be good to document this for others looking to help answer or that have a similar problem.
EDIT 2:
So digging through the source code for threeJs and noticed something about the transparentObjects array I mentioned in the previous edit. The first, that I cannot for the life of me figure out how it gets populated since it doesn't seem like it is added to anywhere in the code. The second is that I think it is being populated with duplicates of the entire building object/mesh (see screenshot below).
The z indexes all seem to be the same. as well as the ids and the objects are all of type "mesh" (of the ones I looked through, granted, since there are a few thousand). So I was going to figure out why its adding what is being added to the array, but that is when I stumbled across the issue of not finding where in the code that the transparentObjects array actually get populated.
EDIT 3:
WestLangley, I tried setting the depth test for the outer wall material to false and got this. Like I said in my response comment, even if it did work it wouldn't fix the issues experienced with the camera inside the building, but wanted to follow up none the less (see snapshot below).
I have created a 3D model for printing in 3D an industrial layout.
Because I am not used in playing with professional 3D modeler software, I used SketchUp and the result was fine !
Now, I want to reuse the 3D models to make a dynamic visit of the "to-be" installation.
I exported each object in Collada format (DAE), and then try to used the collada importer in Threejs.
I have around 130 objects that I want to be able to select interactively, but I manage only to load one ...
I then get a try with STL loader (after having converting objects with MESHLAB from DAE to STL).
And then it works without any problem... but rendering problems.
In the linked picture (sorry, not enough reputation to insert image !), you can see that some parts of the objects seem the be "transparency", even if they have not this property set ! (only the ground is).
While moving with the TrackBallControl, some parts of the objects disappear from time to time....
I try with only one object, with or without the ground,...
I took snapshots of the problem I get :
fig 1, inside the red circle, the errors appears
fig 2, without the ground, it is the same : some parts that should be hidden are not
fig 3, the wireframe rendering shows not pb in the exported model...
link >> http://stackoverflow.legrandcondor.com/photo.html
link >> http://stackoverflow.legrandcondor.com/
Any ideas ? Suggestions before I get crazy ?! (Everything else works fine!)
Thankx in advance,
Your camera near plane is 0.1 and far plane is 1000000. Small values of the near plane can lead to depth-sorting precision problems.
In your case, set your near plane to, say, 100.
ref: http://www.opengl.org/wiki/Depth_Buffer_Precision
Also consider using OrbitControls so your model remains right-side-up.
three.js r.69
How can I disallow rotation of a node in SceneKit?
For ex., I want a model (cone) to be dynamic, jumping and flying, but always vertically oriented?
I tried fix it like in apple's vehicle demo, it is bad solution. Also I tried below code, but model just slowly and glitchy falls down
- (void)renderer:(id<SCNSceneRenderer>)aRenderer didSimulatePhysicsAtTime:(NSTimeInterval)time{
_node.rotation = SCNVector4Make(0, 0, 0, 0);
//[_node.physicsBody resetTransform]; // - tried this too
}
...and finally I did not find any "allowRotation=NO" in scenekit manuals.
Instead of a Boolean allowsRotation flag like in SpriteKit, SceneKit lets you choose which directions a body is allowed to rotate in and by how much. See the angularVelocityFactor property.
This is probably a better idea than toggling the mass between different values — that approach looks like it could be unintended behavior, so you might not want to rely on it.
If you want to mix physics simulation and manual transforms, make sure to use a "kinematicBody" and not a "dynamicBody".
Ahaha, I found some bug solving this problem (but this is a bug, so it is weird)
create node
set mass=1
add node to scene
set mass=0 - this makes it static and unmovable, but...
set mass=1 - this makes it dynamic, jumping and falling but with fixed rotation!
iOS 8.0.2 iPad mini
Simple solution:
node.physicsBody?.allowsRotation = false
I want to put/wrap images to 3D objects. To keep things simple and fast, instead of using(and learning) a 3D library I want to use mapping images. Mapping images are used in such a way:
So you generate the mapping images once for each object and use the same mapping for all images you want to wrap.
My question is how can I generate such mapping images (given the 3D model)? Since I don't know about the terminology my searches failed me. Sorry if I am using the wrong jargon.
Below you can see a description of the workflow.
I have the 3D model of the object and the input image, i want to generate mapping images that I can use to generate the textured image.
I don't even know where to start, any pointers are appreciated.
More info
My initial idea was to somehow wrap a identity mappings (see below) using an external program. I have generated horizontal and vertical gradient images in Photoshop just to see if mapping works using photoshop generated images. The result doesn't look good. I wasn't hopeful but it was worth a shot.
input
mappings (x and y), they just resize the image, they don't do anything fancy.
result
as you can see there are lots of artifacts. Custom mapping images I have generated by warping the gradients even looks worse.
Here is some more information on mappings: http://www.imagemagick.org/Usage/mapping/#distortion_maps
I am using OpenCV remap() function for mapping.
if i understand you right here, you want to do all of it in 2D ?
calling warpPerspective() for each of your cube surfaces will be much more successful, than using remap()
pseudocode outline:
// for each surface:
// get the desired src and dst polygon
// the src one is your texture-image, so that's:
vector<Point> p_src(4), p_dst(4);
p_src[0] = Point(0,0);
p_src[1] = Point(0,src.rows-1);
p_src[2] = Point(src.cols-1,0);
p_src[3] = Point(src.cols-1,src.rows-1);
// the dst poly is the one you want textured, a 3d->2d projection of the cube surface.
// sorry, you've got to do that on your own ;(
// let's say, you've come up with this for the cube - top:
p_dst[0] = Point(15,15);
p_dst[1] = Point(44,19);
p_dst[2] = Point(56,30);
p_dst[3] = Point(33,44);
// now you need the projection matrix to transform from one to another:
Mat proj = getPerspectiveTransform( p_src, p_dst );
// finally, you can warp your texture to the dst-polygon:
warpPerspective(src, dst, proj, dst.size());
if you can get hold of the 'Learning Opencv' book, it's described around p 170.
final word of warning, since youre complaining about artefacts, - yes, it'll all look pretty cheesy, 'real' 3d engines do a lot of work here, subpixel-uv mapping, filtering,
mipmapping, etc. if you want it to look nice, consider using the 'real' thing.
btw, there's nice opengl support built into opencv
To achieve what you are trying to do, you need to render the 3D-models UV to a texture. It will be easier to learn to render 3D than to do things this way. Especially since there are a lot of weaknesses in your aproach. difficult to to lighting and problems til the depth-buffer will be abundant.
Assuming all your objects shul ever only be viewed from one angle, you need to render each of them to 3 textures:
UV-map
Normal-map
Depth-map (to correct the depth-buffer)
You will still have to do shading in order to draw these to look like your object, and I don't even know how to do the depth-buffer-thing, I just know it can be done.
So in order to avoid learning 3D, your will have to learn all the difficult parts of 3D-rendering. Does not seem the easier route...