I have a model of a human body, I am able to load that in threejs with the obj loader. Now after loading the model in threejs I need to do some post-processing like
scaling the length of arm
scaling the length of leg
Is it possible to do that, how can I do that ? I know that obj file store the necessary information to create meshes(i.e. vertices and faces) moreover material information if required. Can we add any extra information to achieve this?
You want to rig your model. You need to define the skeleton, and Three.js can then use "bones" to scale, position and stretch aspects of your mesh. A simple example of a rigged model in three.js is here:
https://threejs.org/docs/#api/objects/SkinnedMesh
Rigging your model in blender is available as a tutorial here: https://www.youtube.com/watch?v=eEqB-eKcv7k&index=15&list=PLOGomoq5sDLutXOHLlESKG2j9CCnCwVqg
Related
I'm new to three js but i have managed to make polyhedron with one texture. but with multiple and with caption is somewhat advanced
Applying multiple diffuse textures in three.js requires the usage of multiple materials. THREE.DodecahedronGeometry as well as all other geometry classes derived from THREE.PolyhedronGeometry do no support multiple materials.
If you still want to use such a geometry with multiple materials, you need to define so called group data. But since you are a beginner in three.js, it might be easier to create your mesh in a DCC tool like Blender, export it to glTF and then import it into your application via THREE.GLTFLoader.
three.js R107
I am using AFrame to load some 3d models from a third-party (using the GLTF-Loader). Unfortunately some of the models have their origins set to random x,y,z coordinates so they look offset when they appear. Is there any way to null their offsets without moving the a-entity they get loaded into?
I don't think you can make a general assumption about what the center of a model is. Imperfect solutions are:
Apply a manual offset from observation of the particular model.
Edit the model center of coordinates in a 3D package like Blender or Maya and re-export to glTF.
I have a basic THREE.js scene, created in Blender, including cubes and rotated planes. Is there any way that I can automatically convert this THREE.js scene into a CANNON.js world ?
Thanks
Looking at the Three.js Blender exporter, it looks like it only exports mesh data, no information about mathematical shapes (boxes, planes, spheres etc) that Cannon.js needs to work. You could try to import your meshes directly into Cannon.js, using its Trimesh class, but this would sadly only work for collisions against spheres and planes.
What you need to feed Cannon.js is mathematical geometry data, telling it which of your triangles in your mesh that represent a box (or plane) and where its center of mass is.
A common (manual) workflow for creating 3D WebGL physics, is importing the 3D models into a WebGL-enabled game engine (like Unity, Goo Create or PlayCanvas). In the game engine you can add collider shapes to your models (boxes, planes, spheres, etc), so the physics engine can work efficiently. You can from there preview your physics simulation and export a complete WebGL experience.
Going to post another answer since there are a few new options to consider here...
I wrote a simple mesh2shape(...) helper that can convert (one object at a time) from THREE.Mesh to CANNON.Shape objects. It doesn't support certain features, such as heightmaps/terrain.
Example:
var shape = mesh2shape(object3D, {type: mesh2shape.Type.BOX})
There is a (experimental!) BLENDER_physics extension for the glTF format to include physics data with a model. You could add physics data in Blender, export to glTF, and then modify THREE.GLTFLoader to pass along the physics data to your application, helping you construct CANNON.js objects.
Three.js - How to change a texture of a 3D model in only one specific point so that not all the model changes texture ?? I have the json file of the model if anyone would like to see it. TIA!
I suggest you take a look at THREE.MeshFaceMaterial -- use this to apply different materials to different parts of a single mesh. MeshFaceMaterial lets you have a group of different "regular" materials, each of which may have a different textures, and then assign on a per-poly basis. The assignment happens in the geometry object. See http://threejs.org/docs/#Reference/Materials/MeshFaceMaterial for docs.
Has anyone got any ideas on how to load real terrain data into a three.js scene.
I would like to have a 3D model on a the actual terrain , i.e the elevations and overlayed satellite imagery .
Create scene : ok
Load and animate models : ok
Terrain and satellite imagery : ???
Thanks in advance.
Jon
Three.js has an example on how to make a terrain, so that one's covered.
Regarding the satellite imagery, you'll use that as a texture on your terrain. The only thing that is important is to get the texture coordinates right, so that may end up being tricky.
This blog post gives a good example and its code is available online, too.
If you some how have, or able to calculate, the elevation data of the points needed in grid mode.
You can use plane geometry and javascript xml Loader to load your data to the planes' geometry vertices.
Use any type of material for the plane you need and define the "map" attribute to add the image texture loaded with ImageLoader
If you have random placed elevation data you can use face3 or other type of three.js geometry and an algorithm to create a TIN (triangulated irregular network) to visualize the terrain.
Also you might want to take a look at cesium library and cesium.js documentation as about the geospatial part of the question, about the terrain loading using this three.js method and this osg.js demo.