Smooth shading using Three.js - three.js

I need anyone to help me about my work
Work here :
ivanvujnovic.com/Avatar_final/index.html
I would have a better rendering, like smooth shading or something else.
How can i do that?
Thank's

You already have smooth shading happening there. I believe you might be looking for 'pixel shading' or 'pixel lighting'.
This might be useful:
http://www.opengl.org/sdk/docs/tutorials/ClockworkCoders/lighting.php

Looks like the normals are messed up in your model, or there is a glitch translating them with Three.js making for a bumpy look by messing up the lighting.
You could try to re-export your model and check any normal-related export options if the problem could be solved with using different configuration.
Or you could let Three.js try to recalculate new normals for your geometry, ignoring the ones existing in the model:
geometry.computeFaceNormals();
geometry.computeVertexNormals();

Related

Can Paraview render stl mesh like this?

I use paraview mostly for post-processing. However, I don't know how to enable paraview render mesh like the picture above.
Suppose I have STL mesh as input, how do we make this happen? Or is there any free-software for it?
Update: I figured out the setting is within the "lighting" option.

Material not showing correctly

I'm having an issue where the material is not showing correctly. I checked the MTL file and all looks correct but for some reason, the material seems to be flipped(I can see it through some parts while it should be the screen). Initially I thought there was something wrong with the MTL or the OBJ but here comes the funny part. On 3dviewer.net the model looks completely perfect(last screenshot).
Therefore, does anybody have a clue on what's happening?
By default, Three.js only renders the front side of faces, since there's often no reason to render the inside of objects. The problem is that the asset you've exported has the face of the screen pointing inwards. There are two ways of solving this problem:
Open the asset in a 3D editor, flip the direction of the faces that are pointing inward, and re-export.
You could change the default material.side attribute of your material. My best guess is that: material.side = THREE.BackSide would solve your problem, but you could try the other values in that documentation page.

How can I create a growing object in WebGL and Three.js and Tween.js

I am new to Three.js and Tween.js.
And I want to create an animation which an object could "grow": like an animation of 3D ball grows into a tube (or the 3D ball been dragged into the tube).
Can this been created by THREE.ExtrudeGeometry and Tween.js? If yes,
can I have some detail explanation or simple steps for this?
I'll be really appreciate for any better ideas. :)
Thank you very much.
Brs,
Bryan
If all your looking to do is alter the size of an object that can be accomplished by adjusting it's scale.
objectsName.scale.set( xValue, yValue, zValue );
However based on your description it seems like your looking to morph your object. There's a great example of how this can be accomplished located at threejs.org.
http://threejs.org/examples/#webgl_morphtargets
I hope this helps.

Three.js ignoring fragment shading

I am trying to render a "landscape", with three.js. Now I changed the material for the plane from MeshBasicMaterial to MeshLambertMaterial or MeshPhongMaterial and awaited to get some light effects rendered.
Strangely I see no rendering other than flat.
Can someone tell me, what I am doing wrong or what the actual requirements for Fragment rendering are?
Seems like I was missing plane.computeFaceNormals();.
I had:
plane.computeBoundingSphere();
plane.computeVertexNormals();
before and was expecting computeVertexNormals to call computeFaceNormals implicitly. Seems like this is not the case.
After changing to:
plane.computeBoundingSphere();
plane.computeFaceNormals();
plane.computeVertexNormals();
lighting works. Is there any documentation about under which circumstances the compute* functions need to be called?
And what is computeVertexNormals doing, when no face normals were generated yet?

Blender exports a three.js animation - bones rotate strangely

I'm currently trying to export an animated blender model to three.js using the exporter of three.js (github.com/mrdoob/three.js/tree/dev/utils/exporters/blender/2.66/scripts/addons).
I've created a model including bones and weights and a tiny animation.
The problem I have: The model gets broken. Somehow the bones don't rotate around their origin but around the origin of the root bone. Moving the bones manually does not make a difference.
I followed these tutorials:
devmatrix.wordpress.com/2013/02/27/creating-skeletal-animation-in-blender-and-exporting-it-to-three-js/
dev.mothteeth.com/2012/10/threejs-blender-exporting-skeletal-animations/
I have:
Deleted the Armature
Checked the Vertex Groups
Keyed all bones in the first and last frame.
I've been to pretty much every thread I could find on github and stack overflow. These seem to be the main issues for these errors. But I guess I still miss any point. :(
I have uploaded all files including the blender files and exported animation.
http://www.file-upload.net/download-8068001/forum-files.rar.html
Any suggestions?
Thanks a lot in advance.
The problem was that the location/rotation/scale were not reset before exporting the model.
Before You export Your model, select the mesh and press CTRL+A and select location. Repeat for rotation and scale, then select the armature and do the same. Now it works.
I've downloaded both the tutorial package and your code. The code aspect looks fine. So looking over the model I see that your vertex groups are not well defined. When I select the Left_collarbone bone, left_upperarm, left_lowerarm I seem to be getting vertices from parts of the torso, head, etc... in the mix. I suspect that what your seeing with your funky shoulder stretch animation is that the collarbone is part of some other groupings and when exported the "weights" of the mesh are confused causing the bone to pull badly on the mesh. Try cleaning up the vertex groups and see if that helps. #lukasz1985 has the right idea, nice one! +1
P.S. Thanks for the link to the cool animation tutorials for Three.js :)
I had an issue where calling THREE.GeometryUtils.center(geometryWithBones) on a the newly imported geometry would make all the skinning look very strange. Getting rid of that fixed things.
Also make absolutely sure, that the three.js blender exporter is not set to to align your model in any way. (I had it set to "center" and it took me 4 hours to figure out why my bones rotate around some spot that was NOT the spot they rotate around in blender.)

Resources