I'm testing a custom scene in ThreeJS.org/editor. I've started with the Camera example scene as a template. I want to add custom geometry to it. When I import my OBJ file, the mesh appears in the editor with no problem, but there doesn't seem to be a way to import its material along with it. Instead, I went and manually assigned the correct texture map to the imported object's Material component.
In the editor, the texture map showed up and looked great after I added it manually, but when I pressed Play (or when I Exported or Published the scene) the texture map for that object was gone again. I tried refreshing my window, and all changes I made to the material component were lost.
There must be something simple I've overlooked. Can anyone help?
The OBJ format doesn't store material data; it uses a separate format, MTL, for that. Unfortunately, it seems that the Three.JS editor doesn't currently support MTL files.
Related
I'm working on a little project with react-three-fiber. If I load my .gbl 3D Model into the scene it's completly dark even if I use the ambientlight in the canvas. But in the three.js editor it looks exactly like I want it if I use the Modeviewer environment. Is it possbile to download this environmet somewhere and use it in my project?
yes, the stage component from the drei library https://twitter.com/0xca0a/status/1402975317174726656 all you need is wrap your model into <Stage>. as for models being dark even with ambientlight, this is usually related to wrong materials, for instance metalness=1. take a look here: https://discourse.threejs.org/t/ambient-light-and-gltf-models-not-working-results-in-black-model/7428/5
I have created a 3d object using blender and exported it as .obj file.
I am trying to load that .obj file using OBJloader in threejs. That is a single object with multiple material in it. It is loaded without any issues.
I am trying to track which material the user has clicked in a 3d object. I am using raycasting for this. Since raycasting works only at object level, I am not able to get which specific material user has clicked.
Starting with three.js R101, you can evaluate intersection.face.materialIndex and then retrieve the correct material from your materials array. This was actually a missing feature in previous three.js revisions.
I exported a glft file on this demo page.
And then, I imported the file to Blender but 3d model looks grey color and seems missing color.
How to solve this problem?
Or doesn't glft have color data?
I'm new to glft and Blender, I'd appreciate if you share any solutions or references what I should read to solve it.
When debugging something like this, the first step is to narrow down the source of the issue. If the model appears correctly on viewers like http://gltf-viewer.donmccurdy.com/ or https://sandbox.babylonjs.com/, then the exporter is probably doing its part correctly. If not, file a bug on the threejs repo about the exporter.
If the Blender importer you're using can't load the file, I'd suggest filing a bug on that repository instead. I'd also suggest trying https://github.com/KhronosGroup/glTF-Blender-IO, if you haven't already.
Finally, note that by default when Blender opens, textures are disabled in the viewport. You have to enable Texture, Material, or Rendered in the Viewport Shading menu:
I have recently imported both .blend and .fbx files into my game, and I would like to change their color in-game. To color them, I am using diffuse shaders, and have tried this command:
gameObject.GetComponent<MeshRenderer>().material.color = Color.red;
as well as this command:
gameObject.GetComponent<MeshRenderer>().material.SetColor("_Color", Color.red);
For some reason, both of these work perfectly on pre-generated Unity cubes, but not on my models, even though they have the mesh renderer component. Any suggestions?
There could be several reasons why your code doesn't work.
I would recommend changing the color of your object in the Editor, if it works - your objects are fine.
_Color is just a label, that usually marks the Main Color. Open your shader and check if the label _Color exists or not. Please check this from unity documentation http://docs.unity3d.com/ScriptReference/Material.SetColor.html
maybe you are changing the _Color of the parent object, but the material you are looking at belongs to the child object.
Blender has the ability to set a material to Flat or Smooth.
In the Blender exporter for three.js, when I check "Export Normals" to JS model, I always export all materials as Smooth. The exported file is twice bigger.
Is there a way to export models with Flat Shaded and Smooth shaded faces without need to set it manually in three.js ?
There is no flatshading/noshading/smoothshading equivalent in blender. However as few other features (blending, depthwrite, depthtest) it could be proposed in the 'threejs' part of the material pannel.
You could do it yourself by editing the following files in the addon :
constants.py,
__init__.py,
exporter/material.py,
exporter/api/material.py
(copy the way blending types work for example)
You would just pay attention that the blender io-three addon yet has a shading field for materials, used to define phong or lambert materials. You would just have to chose an other name.
Finally you would also have to edit threejs so the JSONLoader can parse the new property you add.
That said, it is a bit longer than setting your materials properties in your code, since you will always need to write material=new THREE.Mesh****Material(properties)...