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
Related
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
I'd like to have a dynamic GLSL shader texture to be used as a reference map (for displacement and other stuff) on multiple, different materials on different Meshes.
My approach would be to do the computation one time, using a THREE.WebGLRenderTarget, setup a ortho cam, a 1X1 plane with a THREE.ShaderMaterial, and access the WebGLRenderTarget.texture, that I'd embed in a "master" object, whenever and wherever I need.
Is there any "official" object I can / may use for this? I seen the postprocessing objects are pretty similar (EG ShaderPass) but I'm unsure if and how to use them.
Thank you.
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.
How can I export a 3d model e.g. from Maya with custom materials, load them in three.js and apply all materials?
All examples that can be found on threejs.org are using hardcoded materials for the child elements of the geometry. Is there any library or 3d format to export custom materials with my own parameters and load them in three.js?
This seems to be a common problem in 3d programming. I guess I need to develop my own material editor for three.js if I want more complex 3d objects with more than Lambert or Phong materials.
Any thoughts?
Is there a way to set the color of an entire THREE.Geometry object using three.js? There are a few naive ways I could do this, but none of the methods seem ideal.
I could clone a material and set a different color for each geometry. Essentially, each geometry would have a one-to-one relationship with a material. However, this would create many heavyweight material objects and possibly unnecessary extra shaders on the GPU.
I could also use a single white material and color all the faces of the geometry instead. However, there would create much repetition of the same color objects, since each geometry will only have one color but many faces.
Is there a "proper" way of doing this with three.js?
However, this would create many heavyweight material objects and possibly unnecessary extra shaders on the GPU.
It should not. Shaders will be reused if they're the same. So creating as many materials as geometries should be ok.