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.
Related
I'm working with game dev. He has implemented all the boardgame using Blender. He also added some sprites inside directly and linked the sprite to the Camera inside Blender so that when this camera moves, all the sprites will move accordingly to always face the Camera.
Now my question is, how can I implement this using react-three-js. I see that I can export the Camera object from blender (after exporting the GLTF with the Camera inside) and see it in my GLTF in threejs (under gltf.cameras[0])
My question is, How can I change the camera position of the GLTF (not a copy in threejs) so that I can keep the rules he added for the sprite to always face the camera?
Any constraints created in Blender will not be included when exporting files to other formats. Those would need to be recreated in three.js. In this case I'd recommend using gltfjsx to create a JSX representation of your model, and then using the <Billboard /> component to keep objects facing the camera.
If you have many (100+) sprites, it may be necessary to export them as points, and then assign a THREE.PointsMaterial that applies whatever appearance you need with a texture. Those points will face the camera automatically, as shown in this example.
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.
I'm new to both Blender and ThreeJs and searched a lot before asking. I created a model with Blender and esported it as .dae so I can load it in the html canvas. The problem is that only the model is loaded and not the textures. I'm doing something wrong or it's the loader that somehow causes the problem?
Here is the sample:
http://provasitimek.herobo.com/firstImport2.html
and the code:
https://github.com/MarcinKwiatkowski1988/learningThreeJs/tree/master/ThreeJs_and_blender
PS. the blender version is 2.70 (so maybe the problem lays here?)
PS2: So, after many attempts, these are my conclusions:
to get the color of the object, you have to choose the Blender renderer and not Cycles renderer
the export to the file .dae is not realy significant, should working with all options (or at least I didn't find any differences between files exported with different options)
if you use Blender renderer and any basic materials (Basic, Lambert, Phong) you get only the color on the object rendered in threeJs: so, for example, if you apply a trasparency to you object on blender, you will not see it on the rendered object on threeJs
with my current level (i just started to learn threeJs and blender 2 weeks ago) this is as far as I can help. Hope someone with higher skills like #mrdoob would figure out what the problem is
THREE.js does not pair models and textures until you actually make a mesh. Export The model and texture separately, load them separately and call
new THREE.Mesh(blenderGeometry,blenderTexure)
I have a 3D model stored in OBJ file format. I can load the OBJ file using the OBJLoader just fine.
The model renders correctly and material applied correctly.
What is missing is the loading of polygon groups defined in the OBJ file to identify certain areas in the Model to be able to apply different materials over it.
When I look into the OBJLoader source, I found that it ignores the loading of the polygon groups segments.
How can I read the polygon groups using the OBJLoader and create additional child mesh objects to assign to the parent Model Object3D?
I found a workaround to solve this problem
Download the open source 3D modeling application Blender and install it.
Open your OBJ files using Blender.
Export the OBJ model to another format, I used Collada format which works for me
Use the THREE.JS Collada loader
Collada loader will load the object model and its groups and materials successfully.
Hope this help you guys
I am trying to simulate the OpenGL flat shading model using Three.js. My idea is creating an example like http://en.wikipedia.org/wiki/File:Phong-shading-sample.jpg. I was trying to change some different shading models but I cannot obtain the desired result.
Is it possible to create this scene in three.js?
Thanks in advance
Materials e.g. the MeshBasicMaterial have an option called "shading". It can be set to THREE.None, THREE.FlatShading, THREE.SmoothShading.
I am not sure if you need a light source in the first place or wether you have to enable shading for a the whole scene. Look at the demos at the Three.js website for something with shading.