I'm currently trying to create a "flat" shaded ColorMaterial inside of Away3d 4 to use as a mesh on a loaded .obj file.
This is a screenshot of what I'm trying to achieve. The flat shaded model is on the left.
I loaded the same .obj file I’m working with in Away into a program called MeshLab. MeshLab has two settings for Render Mode, flat or smooth.
The Flat render mode is on the left and smooth is on the right. When I load my .obj into Away3D the result looks exactly like MeshLab’s smooth render mode.
In order to get a flat result I’ve tried to set the smooth flag on my ColorMaterial to false but that doesn’t seem to change anything.
http://away3d.com/livedocs/away3d/4.0/away3d/materials/MaterialBase.html
I’m now starting to look into the materials shadowMethod because I was able to find a smooth boolean on ShadingMethodBase although I’m honestly not sure if this is where you would handle this.
http://away3d.com/livedocs/away3d/4.0/away3d/materials/DefaultMaterialBase.html#shadowMethod
http://away3d.com/livedocs/away3d/4.0/away3d/materials/methods/ShadingMethodBase.html
Below is the code for creating my light and light picker,
dL = new DirectionalLight();
dL.diffuse = 20;
dL.ambient=.6;
dL.specular=15
scene.addChild(dL);
lightPicker= new StaticLightPicker([dL]);
dL.direction = new Vector3D(0,1,-2);
And this is my material, I've tried playing around with most of it's properties:
primitiveMaterial = new ColorMaterial(0xcccccc);
primitiveMaterial.smooth = false;
primitiveMaterial.bothSides = false;
//primitiveMaterial.gloss = 800;
//primitiveMaterial.diffuseLightSources = LightSources.LIGHTS;
primitiveMaterial.diffuseMethod.alphaThreshold = .3;
primitiveMaterial.ambient =.2;
primitiveMaterial.lightPicker=lightPicker;
Can anyone help point me in the right direction?
Thanks!
ColorMaterial has no smooth attribute because it hasn't texture and smooth indicates whether or not any used textures should use smoothing. Most likely smooth attribute is inherited from MaterialBase and have no affect.
Your problem is in the normal vectors when surface is flat they are normals, when it is smoothed they are blended so it appears smoother.
Im guessing the problem might be in obj file. If it has no normals Away3d might generate them by it self ass well as MeshLab but Away3d apparently doing it only in smoothed mode by default. Or obj file contain smoothed normals and MeshLab overriding them in flat mode.
Open obj file with text editor and look for normals, try another obj file with flat surface.
But i might be wrong.
Here is smoothed obj
And this one is flat
What you are looking for is probably the Explode class.
Call Explode.apply(<your loaded mesh>) to remove the smoothed normals.
Related
I'm currently working with the mxGraph library in javascript and I'm trying to create my own shapes in draw.io, to export them, then to reuse them as much as I want in my own program using the mxGraph library.
So far, I have tried to create a custom library, which contains all my shapes. I have exported it in XML which gives me a half-encoded XML file. Then, I'd like to import that mxLibrary in my own app so I can reuse these shapes for creating my own diagrams. I have no idea how to deal with that XML file.
I have also tried taking the XML from Extras -> Edit Diagram and reimport it with the codec, then with mxGraph#addCells but the shapes aren't grouped anymore, and I can't seem to find how to clone them.
My goal would literally to have my list of shapes/cells somewhere, which I can reuse whenever I want.
If this is not possible, how may I do that instead? I have also looked up how to create my own shapes (with redrawPath and the style thing), but it looks really long and boring.
Here's an example of what the XML looks like. The shape is a simple double square.
<mxlibrary>[{"xml":"xVNBbsIwEHyN78EugjOhcOqpLzDJgi05XstZSPJ7trFbiAqCqpV6sLQ7O2N7xrJQZdNvow7mDWtwQr0KVUZESlXTl+CckIWthVoLKQteQm7uTGfjtAg6gqdnBDIJTtodISEJaGlwGThEPIZMg0jQT46q0HuoSO8+6cX3K4zUfP4WsAGKA1M6W5NJjGVWGbAHQ1NMt/keX8qLHy6ypdv21GN7nbEE70FXH33HDyHUylDDO65nXOo2sD1u9rYH3nV1N4lrx/LfHL/8veO9da5Eh5Exjx5+GUIWzJNgmHRXAS1uBLT4eUDcXn7TOJt8tjM=","w":80,"h":80,"aspect":"fixed","title":"custom_shape_1"}]</mxlibrary>
Thank you in advance!
There are 2 ways I know, to do it, depending on your needs.
Embed draw.IO as an iframe in your app, and create a plugin that adds your own palette of icon on the side bar. you can watch the p1 plugin code, and replicate it plugin list in draw.io, look for the p1 plugin
. code example of how to integrate draw.io in your app
hint: if pulgins are not loaded, check the plugin folder link.
If you add the vertices on you own app, create your own style, and reuse it when creating.
updateStyles()
{
var style = new Object();
style[(<any>window).mxConstants.STYLE_SHAPE] =
(<any>window).mxConstants.SHAPE_IMAGE;
style[(<any>window).mxConstants.STYLE_PERIMETER] =
(<any>window).mxPerimeter.RectanglePerimeter;
style[(<any>window).mxConstants.STYLE_IMAGE] =
'../assets/transformer.png';
style[(<any>window).mxConstants.STYLE_FONTCOLOR] = '#000000';
style[(<any>window).mxConstants.STYLE_WHITE_SPACE] = 'wrap';
style[(<any>window).mxConstants.STYLE_VERTICAL_ALIGN] = 'bottom';
this.graph.getStylesheet().putCellStyle('transformer', style);
}
reuse this style whenever creating a vertex using insertVertex function.
try {
const parent = this.graph.getDefaultParent();
this.graph.getModel().beginUpdate();
const vertex = this.graph.insertVertex(parent, uuid.v4(), node, 40, 40, 80, 40, 'transformer');
} finally {
this.graph.getModel().endUpdate();
}
I have a basic walk animation in Blender that I´m trying to export to THREE.js. It looks nice in Blender playback:
Now, after being exported with the THREE.js exporter, it looks like this on the browser:
The geometry is broken, not in all the body parts, but certainly has some problems. I´m not sure what to do now, I tried exporting with several options checked/unchecked, with no luck.
I also read the explanations in this posts, I think I followed all the required steps but still getting this weird animations:
http://unboring.net/workflows/animation.html#preview
https://github.com/mrdoob/three.js/pull/8412#issuecomment-210675561
https://github.com/mrdoob/three.js/issues/6050
The code I´m currently using to load the JSON model/animations is like this:
var loader = new THREE.JSONLoader();
var action = {}, mixer;
loader.load(path + '/dino.json', function (geometry, materials) {
materials.forEach(function (material) {
material.skinning = true;
});
character = new THREE.SkinnedMesh(
geometry,
new THREE.MeshFaceMaterial(materials)
);
scene.add(character);
/* ANIMATION */
mixer = new THREE.AnimationMixer(character);
action.walk = mixer.clipAction(geometry.animations[ 3 ]);
action.walk.setEffectiveWeight(1);
action.walk.enabled = true;
/* Update/render functions */
onUpdateFcts.push(function(delta, now){
mixer.update(delta);
});
action.walk.play();
});
I´m using Blender 2.78c and THREE.js r84, with the Blender exporter tool including in this revision.
I found some interesting links about similar animation problems:
Model with bones animation (blender export) animating incorrectly in three.js
http://dev.mothteeth.com/2012/10/threejs-blender-exporting-skeletal-animations/
Blender exports a three.js animation - bones rotate strangely
After reading all of these advices, I had successfully exported the animated mesh without visual artifacts following this workflow:
Create the armature bone by bone around the mesh. When done and in object mode, select first the mesh, then the armature, press CTRL+P > With automatic weights. This generates an armature modifier on the mesh. Against what I read, the armature modifier doesn´t need to be deleted before exporting.
You must have a default pose like the rest position. This must be the one selected on Blender. Also, the playback frame 0 must be selected in that default pose.
I created keyframes at the start and end of every pose for all the bones involved, this seems important.
You must unselect everything and only select the mesh, not the armature. This must be done in object mode.
My export settings:
Note: I must say that this is the same workflow I was following with no luck. This time the difference was that I first deleted every vertex group, also the armature modifier (not the armature itself) and recreated all the steps from the first one. Now, once exported the animated mesh worked fine enough!
I have a basic three.js scene in which I am attempting to get objects exported from Blender (as JSON files with embedded morphs) to function and update their shapes with user input.
Here is a test scene
http://onthez.com/temphosting/three-js-morph-test/morph-test.html
The slab is being resized without morphs by simply scaling a box, which is working just fine.
I must be missing something fundamental with the little monument on top. It has 3 morphs (width, depth, height) that are intended to allow it to resize.
I am using this code to implement the morph based on users dat.gui input.
folder1.add( params, 'width', 12, 100 ).step(1).name("Width").onChange( function () {
updateFoundation();
building.morphTargetInfluences['width'] = params.width/100;
roofL.morphTargetInfluences['width'] = params.width/100;
roofR.morphTargetInfluences['width'] = params.width/100;
building.updateMorphs();
});
The materials for building, roofL, and roofR each have morphTargets set as true.
I've been going over the three.js examples here:
http://threejs.org/examples/?q=morph#webgl_morphtargets_human
as well as #webgl_morphtargets and #webgl_morphtargets_horse
Any thoughts or input would be much appreciated!
I believe I've reached a solution for my question I was under the impression that the JSON loader was preserving the morph target names to be used in place of an index number with morphTargetInfluences
something like morphTargetInfluences['myMorphTargetName']
but, after closer inspection in the console it seems like they should be referred to by number like morphTargetInfluences[0]
Not the most intuitive, but I can work with it.
I have exported an .obj file (along with .mtl and a .png) from Blender to import into a libgdx project. The file contains both UV and normal data.
I am pulling the file into the app like this:
ModelLoader loader = new ObjLoader();
model = loader.loadModel(Gdx.files.internal("data/car.obj"));
The object should look like this: (Yes, I'm not an artist)
But it ends up looking like this:
What happened to my UV mapping?
Use loader.loadModel(Gdx.files.internal("data/car.obj"), true); to flip the vertical texture coordinates. You can also flip vertical textures coordinates while converting to the g3dx file format: fbx-conv -f car.obj (-f is for flip vertical texture coordinates), which will give you a file called car.g3db and is more suitable for rendering. More info on how to load and convert models (and flip texture coordinates) etc. can be found here: http://blog.xoppa.com/.
Just flip the texture vertically and load the texture it will work fine.
You can do it using photoshop.
I am a newbie regarding three.js and I have a problem with imported geometry (js-file from 3dsmax inclusive all material and textures) and the CanvasRenderer. The CanvasRenderer displays the triangle edges of imported geometry, the WebGLRenderer works well.
Canvas example:
http://der-n.square7.ch/threejs/examples/teapot_canvas.html
WebGL example:
http://der-n.square7.ch/threejs/examples/teapot_webgl.html
In the three.js library I have found the option "overdraw: true" for a material to fix this behaviour but obviously the material+textures are defined by the above mentioned exported 3dsmax js-file.
For the tests I use the "misc_camera_trackball" example with small changes (I have added a JSONLoader, changed some camera and trackball parameters, changed some light colors, added a CanvasRenderer)
Any hints how to solve this?
Thanks for your help.
Best regards
Oggy
In the loader callback, you have all of the loaded materials in an array geometry.materials. You could loop over those materials and set the overdraw property to true for each.
As far as I know, THREE.MeshFaceMaterial is just a pass-through material that indicates "faces have an index that points to a material instance to use from the geometry's materials array", so setting properties for MeshFaceMaterial won't have any effect.