I exported a model(with several animations) from 3ds max and ultimately translated it into JSON. However, all of my animations are smashed into one animation. Is there a way in threejs to only play a certain range of frames , or do I need to do an export from 3ds max for each individual animation?
Thanks,
David
there are two types of animations.
I use mesh morph one when exporting from Blender. My resulting json has this line:
"morphTargets" : [{ "name": "animation_000000", "vertices": [...
then I load it using MorphAnimMesh:
mesh = new THREE.MorphAnimMesh( geometry, new THREE.MeshFaceMaterial( materials ) );
after loading I set idle animation by default:
mesh.duration = 4000; //4 seconds whole animation?
mesh.setFrameRange(1,50);
then on some event i just change animation range like this:
mesh.setFrameRange(51,80);
if you use bones and skins animation, your json model ends up with lines
"animations" : [...
"bones": [...
i havent used that one, so try this tutorial:
http://code.tutsplus.com/tutorials/webgl-with-threejs-models-and-animation--net-35993
also this is similar question:
How do I handle animated models in Three.js?
Related
For a dataviz project, I have some datas in an array. I need to use these datas to render a wave in ThreeJS like this:
The height of each peak depends on the given size and must be in its circle depending on the year.
I thought about creating a plan and deforming it with a vertex shader based on the data. Unfortunately, it seems that this is not possible. I'm a bit lost and I clearly need advices about how to do this.
The array looks like this:
[
{
"year": 2016,
"dimension": 28.400 // hectares
},
{
"year": 1995,
"dimension": 12.200
}
]
There is a "displacementMap" texture property on the THREE.Materials.. this will displace the vertices vertically based on the brightness of the pixel in the texture.
You can make a plane with a bunch of subdivisions, like new THREE.Mesh(new THREE.PlaneGeometry(10,10, 30,30),new THREE.MeshStandardMaterial({displacementMap:yourDisplacementTexture})
For the displacementMap texture, you can either use an external image, or create a canvas, draw your height data into that, and then create a THREE.Texture( thecanvas ).
Yet another option is to create the subdivided plane using THREE.PlaneGeometry()
then get the geometry.vertices, and modify them by setting the .z value in each vertex.. followed up with geometry.verticesNeedUpdate = true (to tell the renderer to send the modifications to the GPU).
How can I render an exported scene (with many objects, each with different colors and different properties, such as rotation aroung an axis in the scene) from Blender (with colladaLoader -->.dae) in ThreeJs?
So, the first step is to learn how to create a scene in threeJs and learn some feature with Blender. When you are ready, create your first model and before exporting keep this in mind:
you need to an object with vertices, so if you just create a text with Blender, you have to convert it to a mesh, otherwise threeJs will not render it
be sure to choose the Blender render option and not the Cycles,
otherwise the .dae you export will not be rendered in threeJs
when applying a texture, use just colors and basic materials (basic, phong and lambert) - the others will not work using the colladaLoader
to see if the object will be rendered with color in threeJs with
colladaLoader just look at object in Blender with object mode
(solid) - if it's gray and not colored of the color you choose, it
will be rendered in threeJs the same way
if you apply the 'solidify' modifier to the object and then on threeJs set it to transparent, it will be rendered as wireframed
if you append multiple objects in the scene and 'join' them, the
respective positions and rotations will be respected in threeJs,
otherwise not: for example, if you want to renderize a flower in the
bottle (and thoose objects are different blender files which are
appended/linked in the scene), the flower will not fit in the bottle
in threeJs, but would have a different position and rotation than
the bottle
grouping the objects will not solve this: to see the scene as you see it in Blender you have to 'join' the objects (with the consequences that this entails) or manually change position and rotation on threeJs
the .dae export options don't matter for the rendering of the object in threeJs
and now, the part that regards threeJs:
be sure to import the colladaLoader with:
<script src="jsLib/ColladaLoader.js"></script>
insert this code into your init() function so the loader will load your .dae model:
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load( 'model.dae', function ( collada ) {
// with this you can get the objects of the scene; the [0] is not the first object
// you display in blender in case of many objects (which means you didn't join them)
var obj1 = collada.scene.children[0];
// you can name the object so you can use it even out of the function, if you want
// animate it for example obj1.name = "daeObj1";
// you can set here some material properties as trasparency
obj1.material.needsUpdate = true;
obj1.material.transparent = true;
obj1.material.opacity = 0.5;
obj1.hearth.material.wireframe = false;
// and now some position and rotation for good visualization
obj1.position.set(0, -5, -0.6); //x,z,y
obj1.rotation.set(0, 45, 0);
// and add the obj to the threeJs scene
scene.add(obj1);
});
and some code to the animate() function if you want to update some of your objects, with rotation for example
scene.traverse (function (object) {
if (object.name === 'daeObj1') {
object.rotation.z -= 0.01;
}
});
I hope someone will benefit from this post
I'm trying to make the following in three.js:
I made the model in sketchup with some simple coloured textures and used the collader importer, the result looks like this:
Now I want to dynamically load some photographs onto each of the different planes, however what I end up with is this:
So as you can see, each image is loaded but they are very small and repeated across the rest of the surface.
This is how I load the textures: (preloadTexture() is just a simple preloader)
for(i in cubeSidesArray)
{
preloadTexture(modelThumbsArray[i]);
var newTexture = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture(modelThumbsArray[i]) } );
cubeSidesArray[i].material = newTexture;
}
How do I get the textures to fill the surface?
Thanks!
Edit - I played with the model in sketchup and managed to get it a little better, but not much!
Edit 2 - Still no luck, I'm starting to think building it in code from scratch would be simpler
Option 1: I would advise you to do or next.
1 -.Import the model blender
2 -.Export blender to threejs
3 -.Use this method of charging.
AgregarModeloBlender function (geometry, materials) {
console.log(materials);
material = new THREE.MeshFaceMaterial( materials );
modelo3d_ = new THREE.Mesh( geometry,material );
escenario.add(modelo3d_);
modelo3d_.add(camera);
modelo3d_.scale.set(5,5,5);
modelo3d_.position.set(-900,25,850);
modelo3d_.rotation.y=Math.PI;
}
4 -. Subsequently trabajr with textures independently.
Example: http://all.develoteca.com/builder/
Option 2: I would advise you to do or this:
1 -. Create the geometric shape (vertices) to modify each of the faces of the texture.
Example: http://develoteca.com/Panel/
Greetings.
Can you help me? I try to make music visualization http://webmaster9.ru/freelance/mysicusa/ it based on http://iacopoapps.appspot.com/hopalongwebgl/
I have signal (level of music) but cant change visual effects according music. It use
var materials = new THREE.ParticleBasicMaterial( { size: (3 ), map: sprite1, blending: THREE.AdditiveBlending, depthTest: false, transparent : true } );
materials.color.setHSV(hueValues[s], DEF_SATURATION, DEF_BRIGHTNESS);
var particles = new THREE.ParticleSystem( geometry, materials );
particles.myMaterial = materials;
1 Can I change opacity or brightness according music? Probably using controls? can you show me examples?
2 Can I change texture according music?
2 Can I add light and change light according music?
Thank you
For sure you can get the generated audio data from DOM and use in WebGL javascript part to handle values or even use THREE.js to handle those values.
Just take a look how web-audio works
In my game that uses Three.js (r52) I'm having some trouble getting the lighting right.
This dungeon level uses simple cuboids as the walls and the roof. For some reason the lighting is bright at the beginning of each mesh, but then fades to dark towards the other side.
Notice that the floor doesn't have artifacts, this is because it is one huge quad.
The light used is a PointLight. The materials for my meshes are simply created like this:
var texture = new THREE.Texture( image,
new THREE.UVMapping(),
THREE.RepeatWrapping,
THREE.RepeatWrapping,
THREE.NearestFilter,
THREE.NearestMipMapLinearFilter );
return new THREE.MeshLambertMaterial({
map : texture
});
The cuboids are exported OBJ models from 3ds max, converted using gw::OBJ-exporter. These are my export settings:
Any ideas?
Apparently you hit the same issue as in this thread: https://github.com/mrdoob/three.js/issues/1258
You need to use something like material.shading = THREE.FlatShading;